如何给格子布编号

Question

这是一个初学者javascript/fabric.js "for/Loop"问题。我正在使用 fabric.js。我搜索了 stack overflow、w3schools、google 并查阅了书籍，但我无法真正找到对我有意义或直接适用于我正在尝试做的事情的答案。

我有两个功能。一个函数打开 fabric.js canvas 中的网格视图。一个将其关闭。该代码基于 create a snap to grid using fabricjs。我使用 canvas 上方的 div 元素中包含的两个按钮来关闭和打开网格。

我想自动对网格线进行水平和垂直编号，增量为 5 (0, 5,10,15,20...) 0 ......5.......10.......15.......20 . . 5. . . . 10。 . . . 15。 . . . 20。 .

就目前而言，我正在尝试使用带空格的 for 循环，但我知道这是糟糕的编码。我只是在学习。这些数字不使用空格排列（。如何用代码做到这一点？

 <div id="demo"><script>
    var count;
                for(count = 0; count < 10; count++){
                   document.write(count + "&nbsp &nbsp &nbsp &nbsp &nbsp;&nbsp &nbsp &nbsp &nbsp &nbsp;&nbsp &nbsp");
                }

    </script></div>

Answer 1

可能不是你要找的东西，但我想玩 FabricJS。

此 fiddle 在 canvas 上绘制文本： http://jsfiddle.net/sunny001/ctdcp8j0/47/ 由于某种原因，我无法使垂直列中的文本正确对齐。该代码只是一个黑客，但也许它提出了一种方法。

更新： 我们这里下雪了，我想更好地理解 Fabric.js 所以我尝试制作一个网格函数。它可以更加紧凑和简洁。仍然无法使文本的垂直列右对齐。所有内容都包含在一个组中，因此切换 visibility/z-order 很容易。

假设有一个名为 canvas

的 Fabric.js 实例

drawGrid(50, 600, 400, 100, 100);

function drawGrid(cellSize, gridWidth, gridHeight, xPos, yPos) {

    var bkgndrect = new fabric.Rect({
        width: gridWidth + 50,
        height: gridHeight + 50,
        stroke: '#ccc',
        fill: 'transparent',
        selectable: false
    });

    var rect = new fabric.Rect({
        left: 25,
        top: 25,
        width: gridWidth,
        height: gridHeight,
        stroke: '#000000',
        fill: '#cccccc',
        selectable: false
    });

    var gridGroup = new fabric.Group([bkgndrect, rect], {
        left: xPos,
        top: yPos,
        selectable: false
    });

    canvas.add(gridGroup);

    for (var i = 1; i < (gridWidth / cellSize); i++) {
        var line = new fabric.Line([0, 0, 0, gridHeight], {
            left: (gridWidth / 2) - i * cellSize,
            top: -gridHeight / 2,
            stroke: '#000000',
            selectable: false
        });
        gridGroup.add(line);
    }

    for (var i = 1; i < (gridHeight / cellSize); i++) {
        var line = new fabric.Line([0, 0, gridWidth, 0], {
            left: -gridWidth / 2,
            top: (gridHeight / 2) - i * cellSize,
            stroke: '#000000',
            selectable: false
        });
        gridGroup.add(line);
    }

    for (var i = 0; i < (gridWidth / cellSize); i++) {
        var text = new fabric.Text(String((i) * 5), {
            left: -(gridWidth / 2) + i * cellSize,
            top: -(gridHeight / 2) - 20,
            fontSize: 14,
            selectable: false
        });
        gridGroup.add(text);
    }

    for (var i = 0; i < (gridHeight / cellSize); i++) {
        var text = new fabric.Text(String((i) * 5), {
            left: -(gridWidth / 2) - 20,
            top: -(gridHeight / 2) + (i) * cellSize,
            fontSize: 14,
            textAlign: 'right',
            selectable: false
        });
        gridGroup.add(text);
    }

    canvas.renderAll();
}

如何给格子布编号

How to number a grid fabrics

javascript

fabricjs