موضوع

لإنشاء مسطرة باستخدام Konva.js، يمكنك رسم خط أفقي أو عمودي مع علامات لتحديد القياسات. وفيما يلي مثال بسيط على كيفية تحقيق ذلك. يفترض الكود أنك على معرفة بـ HTML و JavaScript وأنك قد قمت بتضمين مكتبة Konva.js في مشروعك.### مثال على مسطرة أفقية باستخدام 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>

```### الشرح:- يقوم هذا الكود بإنشاء مرحلة Konva في حاوية بعرض كامل.- يرسم خطًا أفقيًا كالمسطرة الرئيسية.- يضيف علامات عند فترات منتظمة على طول المسطرة.- يتم تسميات كل علامة بالقياس المقابل لها (من 0 إلى 10 في هذه الحالة).يمكنك تخصيص أطوال العلامات، والألوان، والتسميات، والمواقع وفقًا لاحتياجات التصميم الخاصة بك. إذا كنت ترغب في إنشاء مسطرة عمودية، يمكنك تعديل `points` و `x`/`y` وفقًا لذلك.