javascript - 使用 fabric.js 创建引用线和网格标尺

Question

有没有办法像 photoshop 一样用 fabric.js 创建引用线和网格标尺？我知道一个用于此目的的图书馆: 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'
    }));