Question

这是一个初学javascript / fabric.js“for / Loop”的问题。我正在使用fabric.js。我搜索了堆栈溢出，w3schools，谷歌搜索，并查看书籍，但我真的找不到对我有意义的答案或直接适用于我想要做的事情。

我有两个功能。一个函数打开fabric.js画布中的网格视图。一个人把它关掉。代码基于create a snap to grid using fabricjs。我使用两个按钮包含在画布上方的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一起玩。

这个小提琴在画布上绘制文字：http://jsfiddle.net/sunny001/ctdcp8j0/47/由于某种原因，我无法将垂直列中的文本对齐。代码只是一个黑客，但也许它暗示了一种方法。

更新：我们在这里度过了一个下雪天，我想更好地理解Fabric.js，所以我玩了一个网格功能。它可以更加紧凑和简洁。仍然无法使文本的垂直列右对齐。一切都包含在一个组中，因此切换可见性/ z顺序很容易。

假设有一个名为Fabric.js

的canvas个实例

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();
}

如何为网格结构编号

1 个答案: