fabricjs - 如何通过在fabric.js画布中单击按钮来删除网格线
问题描述
我有两个按钮,一个用于添加网格,另一个用于删除网格。当我单击添加按钮时,我正在编写以下代码行:
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() 也不起作用。请帮忙。
解决方案
创建一组网格然后添加到画布,同时删除删除组对象;
演示
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>
推荐阅读
- docker - 主机网络接口和docker内部网络
- regex - 根据下划线的位置忽略字符串的一部分
- image - DYMO SDK 打印图片
- powerbi - 从一组重复项中查找要分配给唯一值的值
- jquery - 复制变量中元素的html并使用Jquery删除新变量中的一些元素
- asp.net-mvc - 为什么我的实体框架网站不工作?
- mdx - SSAS MDX 基于其他属性维度和动态度量获取维度属性
- visual-studio - Visual Studio 2017 调试错误:为了防止在评估函数 *.toString 时发生不安全的中止,所有线程都被允许运行
- imagemagick - ImageMagick - 沿内部不透明对象边界分割透明图像
- r - 数据组的R多个滚动平均窗口