Javascript 如何在fabric js中实现橡皮擦
Javascript 如何在fabric js中实现橡皮擦,javascript,html5-canvas,fabricjs,Javascript,Html5 Canvas,Fabricjs,var width=$（'#image'）.width（）； 变量高度=$（“#图像”）.height（）； var canvas=new fabric.canvas（'kv_mark'，{selection:false，width:width，height:height}）； var标记=”； var i=0； var linex1=[]； var linex2=[]； var Line1=[]； 变量liney2=[]； var rightx=[]； var righty=[]； var错误
var width=$（'#image'）.width（）；
变量高度=$（“#图像”）.height（）；
var canvas=new fabric.canvas（'kv_mark'，{selection:false，width:width，height:height}）；
var标记=”；
var i=0；
var linex1=[]；
var linex2=[]；
var Line1=[]；
变量liney2=[]；
var rightx=[]；
var righty=[]；
var错误x=[]；
var错误=[]；
$（'.mark按钮'）。单击（函数（）{
//警报（“此处”）；
标记=$（this.data（'value'）；
如果（标记=='right'）{
img=“img/tick green.png”；
}
如果（标记==‘错误’）{
img=“img/error.png”；
}
如果（标记==“”）{alert（'请选择一个工具'）；}
});
无功线路，isDown；
canvas.on（'mouse:down'，函数（o）{
如果（标记=='line'）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
x1=指针.x；
y1=指针y；
linex1.推动（x1）；
线路1.推送（y1）；
线=新织物。线（点{
冲程宽度：1，
填充：“红色”，
笔划：“红色”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
}
});
canvas.on（'mouse:move'，函数（o）{
如果（标记=='line'）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
set（{x2:pointer.x，y2:pointer.y}）；
canvas.renderAll（）；
//log（指针）；
}
});
canvas.on（'mouse:up'，函数（o）{
var pointer=canvas.getPointer（o.e）；
x2=指针.x；
y2=指针y；
linex2.推送（x2）；
线路2.推送（y2）；
如果（mark=='line'）{isDown=false；}
});
canvas.on（'mouse:dblclick'，function（o）{
如果（标记=='错误'| |标记=='正确'）{
var pointer=canvas.getPointer（o.e）；
var x=指针.x；
var y=指针.y；
如果（标记==‘错误’）{
错误x.推（x）；
错误。推（y）；
}
如果（标记=='right'）{
右x.推（x）；
对,推(y),；
}
$（“#容器”）。附加（“”）；
//
////$（“千伏马克”）。附加（“”）；
i++；}
});
$（'#container'）。在（“click”、“.mark”上，函数（e）{
$（this.remove（）；
});
$（“#kv_标记”）。在（“单击”，“标记”，函数（e）{
$（this.remove（）；
});
$（“#千伏马克”）.dblclick（函数（e）{
a[i]=（e.pageX-this.offsetLeft）-17；
b[i]=（e.pageY-this.offsetTop）-17；
//控制台日志（a）；
//控制台日志（b）；
})。校正块{
宽度：100%；
位置：相对位置；
}
.校正块{
宽度：100%；
}
.画布主体{
位置：相对位置；
/*排名：0；
左：0；
身高：100%；
宽度：100%*/
}
.校正块.帆布容器{
位置：绝对！重要；
排名：0；
左：0；
宽度：100%！重要；
身高：100%！重要；
边框：1px实心#333；
}
.校正块画布{
位置：绝对位置；
排名：0；
左：0；
宽度：100%！重要；
身高：100%！重要；
}
.亲戚{
位置：相对位置；
}这取决于你说的是哪种橡皮擦。如果要创建具有橡皮擦特性的对象（即圆或矩形），只需将属性
globalCompositeOperation='destination out'如果你想要一个
免费画笔