如何在fabric.js画布中通过单击按钮移除网格线
如何在fabric.js画布中通过单击按钮移除网格线
提问于 2018-05-31 18:20:29
我有两个按钮，一个用来添加网格，另一个用来删除网格。当我单击add按钮时，我编写了以下代码行：
var gridsize = 5;
var gridoption={ stroke: "#000000", strokeWidth: 1, selectable:false, strokeDashArray: [5, 5],evented:false};
for(var x=1;x<(canvas.width/gridsize);x++)
{
canvas.add(new fabric.Line([100*x, 0, 100*x, 600],gridoption));
canvas.add(new fabric.Line([0, 100*x, 600, 100*x],gridoption));
}使用这些代码，网格通过单击按钮出现，但我也希望在单击另一个按钮后删除网格，而不对画布中的其他对象进行任何更改。因为我在这里没有选择任何对象。remove()也不起作用。请帮帮忙。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 19:08:52
创建一组网格，然后添加到画布，同时删除删除组对象；
演示
var canvas = new fabric.Canvas('c', {
width: 600,
height: 600
})
var gridGroup;
function addGrid() {
if (gridGroup) return;
var gridsize = 5;
var gridoption = {
stroke: "#000000",
strokeWidth: 1,
strokeDashArray: [5, 5]
};
var gridLines = [];
for (var x = 1; x < (canvas.width); x += 100) {
gridLines.push(new fabric.Line([x, 0, x, canvas.width], gridoption));
}
for (var x = 1; x < (canvas.height); x += 100) {
gridLines.push(new fabric.Line([0, x, canvas.height, x], gridoption));
}
gridGroup = new fabric.Group(gridLines, {
selectable: false,
evented: false
})
gridGroup.addWithUpdate();
canvas.add(gridGroup);
}
function removeGrid() {
gridGroup && canvas.remove(gridGroup);
gridGroup = null;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick='addGrid()'>Add</button>
<button onclick='removeGrid()'>Remove</button>
<canvas id="c" style="border:1px solid black"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50621997
复制相关文章
相似问题
腾讯云开发者
