使用fabric.js創建指南和網格標尺

Question

有沒有一種方法可以像photoshop一樣使用fabric.js創建指南和網格標尺？ 我知道一個圖書館爲此目的： http://mark-rolich.github.io/RulersGuides.js/

但我想申請統治者和指導的一個部。那麼有沒有其他庫或一些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' 
    }));