Thema

Um mit Konva.js ein Lineal zu erstellen, können Sie eine horizontale oder vertikale Linie zusammen mit Strichmarkierungen zeichnen, um Maße darzustellen. Unten finden Sie ein einfaches Beispiel, wie Sie dies erreichen können. Der Code setzt voraus, dass Sie mit HTML und JavaScript vertraut sind und die Konva.js-Bibliothek in Ihr Projekt integriert haben.### Beispiel eines horizontalen Lineals mit 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>

```### Erklärung:- Dieser Code erstellt eine Konva-Bühne in einem Container mit voller Breite.- Es zeichnet eine horizontale Linie als Hauptlineal.- Es fügt in regelmäßigen Abständen Strichmarkierungen entlang des Lineals hinzu.- Jede Strichmarkierung ist mit ihrem entsprechenden Maß (0 bis 10 in diesem Fall) beschriftet.Sie können die Längen, Farben, Beschriftungen und Positionen der Striche weiter an Ihre Designbedürfnisse anpassen. Wenn Sie ein vertikales Lineal erstellen möchten, können Sie die `points` und `x`/`y` Koordinaten entsprechend anpassen.