Onderwerp

Om een liniaal te maken met Konva.js, kun je een horizontale of verticale lijn tekenen samen met tickmarkeringen om metingen weer te geven. Hieronder een eenvoudig voorbeeld van hoe je dit kunt bereiken. De code gaat ervan uit dat je bekend bent met HTML en JavaScript en de Konva.js-bibliotheek in je project hebt opgenomen.### Voorbeeld van een Horizontale Liniaal met Konva.js```html

body { margin: 0; padding: 0; overflow: hidden; }

<script>
    const stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: 100 // Ruler height
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    // Draw the ruler (horizontal line)
    const rulerLine = new Konva.Line({
        points: [0, 50, window.innerWidth, 50],
        stroke: 'black',
        strokeWidth: 2
    });
    layer.add(rulerLine);

    // Draw tick marks
    const tickLength = 20;
    const numberOfTicks = 10; // Number of ticks
    
    for (let i = 0; i <= numberOfTicks; i++) {
        const x = (i / numberOfTicks) * window.innerWidth; // Calculate x position
        
        // Tick mark
        const tick = new Konva.Line({
            points: [x, 50 - tickLength, x, 50], // Vertical tick line
            stroke: 'black',
            strokeWidth: 2
        });
        layer.add(tick);
        
        // Tick label
        const label = new Konva.Text({
            x: x - 10, // Center the label
            y: 55, // Slightly below the tick
            text: `${i}`, // Tick label
            fontSize: 12,
            fontFamily: 'Calibri',
            fill: 'black'
        });
        layer.add(label);
    }

    layer.draw();
</script>

```### Uitleg:- Deze code maakt een Konva-stadium in een container met volledige breedte.- Het tekent een horizontale lijn als de hoofdliniaal.- Het voegt tickmarkeringen toe op regelmatige intervallen langs de liniaal.- Elke tick is gelabeld met de bijbehorende meting (0 tot 10 in dit geval).Je kunt de lengtes, kleuren, labels en posities van de tickmarkeringen verder aanpassen op basis van je ontwerpeisen. Als je een verticale liniaal wilt maken, kun je de `points` en `x`/`y` coördinaten dienovereenkomstig aanpassen.