Javascript 使用Fabric js在画布中绘制圆形和矩形

我试着画三个形状。使用三个单独的函数

线

圈

长方形

有三个功能可以正常工作。但是，如果我想画一条直线和一个圆（一个接一个地运行两个函数）。第一个很好，但是第二个它会以相同的协调方式画第一个和第二个。它会重复。有没有办法一次画一个形状

var canvas=newfabric.canvas（'canvas1'{
选择：false
});
无功线路，isDown；
函数myFun（）{
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：20，
填写：“#07ff11a3”，
笔划：“#07ff11a3”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
}
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
函数drawcle（）{
var circle、isDown、origX、origY；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
圆形=新织物。圆形({
左：指针.x，
顶部：pointer.y，
半径：1，
冲程宽度：2，
笔划：“红色”，
填充：“白色”，
可选：false，
原文：“中心”，
原创：“中心”
});
canvas.add（圆圈）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
圆集({
半径：Math.abs（origX-pointer.x）
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
}
函数drawrec（）{
var线路、isDown、origX、origY；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
var pointer=canvas.getPointer（o.e）；
line=新结构。Rect({
左：origX，
上图：奥里基，
原文：“左”，
原创：“top”，
宽度：pointer.x-origX，
高度：指针。y-原点，
角度：0，
填充：“rgba（255,0,0,0.5）”，
透明转换器：错误
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
if（origX>pointer.x）{
line.set({
左：Math.abs（pointer.x）
});
}
if（origY>pointer.y）{
line.set({
顶部：Math.abs（pointer.y）
});
}
line.set({
宽度：Math.abs（origX-pointer.x）
});
line.set({
高度：Math.abs（origY-pointer.y）
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
}

您可以使用

canvas.off（）

从画布中删除事件侦听器。它正在绘制其他形状，因为它正在将侦听器添加到画布，所以当您调用绘图函数时，请从画布中删除附加的侦听器，然后添加当前侦听器

var canvas=newfabric.canvas（'canvas1'{
选择：false
});
无功线路，isDown；
函数drawLine（）{
移除事件（）；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
var points=[pointer.x，pointer.y，pointer.x，pointer.y]；
线=新织物。线（点{
冲程宽度：20，
填写：“#07ff11a3”，
笔划：“#07ff11a3”，
原文：“中心”，
原创：“中心”
});
canvas.add（行）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
line.set({
x2:pointer.x，
y2:pointer.y
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
}
函数drawcle（）{
var circle、isDown、origX、origY；
移除事件（）；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
圆形=新织物。圆形({
左：指针.x，
顶部：pointer.y，
半径：1，
冲程宽度：2，
笔划：“红色”，
填充：“白色”，
可选：false，
原文：“中心”，
原创：“中心”
});
canvas.add（圆圈）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
圆集({
半径：Math.abs（origX-pointer.x）
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
}
函数drawrec（）{
var rect、isDown、origX、origY；
移除事件（）；
canvas.on（'mouse:down'，函数（o）{
isDown=真；
var pointer=canvas.getPointer（o.e）；
origX=指针.x；
origY=pointer.y；
var pointer=canvas.getPointer（o.e）；
rect=新结构。rect({
左：origX，
上图：奥里基，
原文：“左”，
原创：“top”，
宽度：pointer.x-origX，
高度：指针。y-原点，
角度：0，
填充：“rgba（255,0,0,0.5）”，
透明转换器：错误
});
canvas.add（rect）；
});
canvas.on（'mouse:move'，函数（o）{
如果（！isDown）返回；
var pointer=canvas.getPointer（o.e）；
if（origX>pointer.x）{
矩形集({
左：Math.abs（pointer.x）
});
}
if（origY>pointer.y）{
矩形集({
顶部：Math.abs（pointer.y）
});
}
矩形集({
宽度：Math.abs（origX-pointer.x）
});
矩形集({
高度：Math.abs（origY-pointer.y）
});
canvas.renderAll（）；
});
canvas.on（'mouse:up'，函数（o）{
isDown=假；
});
}
函数removeEvents（）{
canvas.off（'mouse:down'）；
帆布
function removeEvents(){
 canvas.off('mouse:down');
 canvas.off('mouse:up');
 canvas.off('mouse:move');
}