使用fabric.js创建指南和网格标尺

Question

有没有办法用fabric.js像photoshop一样创建指南和网格标尺？ 我知道一个用于此目的的库： http://mark-rolich.github.io/RulersGuides.js/

但我想将统治者和指南应用于Div。那么有没有其他库或一些fabricJs代码片段来实现这个目标呢？

感谢。

Answer 1

这里有一个关于fabricjs中标尺的演示：https://jsfiddle.net/grqorhqw/1/。它的主要部分是在循环中添加行和文本标记：

 window.canvas.add(new fabric.Line([measurementThickness - tickSize, location1, measurementThickness, location1], { stroke: '#888', selectable: false }));
    window.canvas.add(new fabric.Text(count + "\"", {
        left: measurementThickness - (tickSize * 2) - 7,
        top: location1,
        fontSize: 12,
        fontFamily: 'san-serif'
    }));