Canvas 拖动现有对象时绘制的重复对象

我正在从事使用fabric js创建形状的项目。我可以根据fabric js文档创建所有形状

我有一个问题，在用户拖动的形状下面创建一个形状

请找到下面的小提琴以便更好地理解

$（文档）.ready（函数（）{
//获取画布
var canvas1=新织物.Canvas（“canvas2”）；
var freeDrawing=true；
var divPos={}；
var offset=$（“#canvas2”）.offset（）；
$（文档）.mousemove（函数（e）{
divPos={
左：e.pageX-offset.left，
顶部：e.pageY-offset.top
};
});
$（'#2'）。单击（函数（）{
控制台日志（“按钮2已锁定”）；
//声明变量
var isMouseDown=错误；
var指标；
//设置鼠标事件
canvas1.on（'mouse:down'，函数（事件）{
//定义程序
isMouseDown=真；
//获取鼠标坐标
//创建矩形对象
if（自由绘图）{
var rect=new fabric.rect({
左：divPos.left，
顶部：divPos.top，
宽度：0，
高度:0,，
笔划：“红色”，
冲程宽度：3，
填充：“”
});
canvas1.add（rect）；
reflect=rect；//**矩形对象的引用
}
});
canvas1.on（'mouse:move'，函数（事件）{
//定义程序
如果（！isMouseDown）{
返回；
}
//获取鼠标坐标
if（自由绘图）{
var posX=左侧的divPos；
var posY=divPos.top；
reflect.setWidth（Math.abs（（posX-reflect.get（'left'））；
reflect.setHeight（Math.abs（（posY-reflect.get（'top'）））；
canvas1.renderAll（）；
}
});
canvas1.on（'mouse:up'，function（））{
//警惕（“鼠标向上！”）；
画布1.添加（引用）；
isMouseDown=错误；
canvas1.add（）；
//freeDrawing=false；//**禁用线条绘制
});
});
});


$（文档）.ready（函数（）{
//获取画布
var canvas=newfabric.canvas（“画布”）；
var rect，isMouseDown=false；
$（“#选择”）。单击（函数（）{
canvas.selection=true；
更改状态（真）；
//删除鼠标事件
canvas.off（'mouse:down'，onMouseDown）；
canvas.off（'mouse:move'，onMouseMove）；
canvas.off（'mouse:up'，onMouseUp）；
})
功能更改状态（值）{
canvas.forEachObject（函数（obj）{
obj.可选=值；
})
canvas.renderAll（）；
}
$（'#矩形'）。单击（函数（）{
canvas.selection=false；
更改状态（假）；
//注册鼠标事件
canvas.on（'mouse:down'，onMouseDown）；
canvas.on（'mouse:move'，onMouseMove）；
canvas.on（'mouse:up'，onMouseUp）；
});
函数onMouseDown（事件）{
//定义程序
isMouseDown=真；
var pointer=canvas.getPointer（event.e）；
//创建矩形对象
rect=新结构。rect({
左：指针.x，
顶部：pointer.y，
宽度：0，
高度:0,，
笔划：“红色”，
冲程宽度：3，
可选：false，
填充：“”
});
canvas.add（rect）；
}
mouseMove函数（事件）{
//定义程序
如果（！isMouseDown）{
返回；
}
var pointer=canvas.getPointer（event.e）；
setWidth（Math.abs（（pointer.x-rect.get（'left'））；
setHeight（Math.abs（（pointer.y-rect.get（'top'））；
canvas.renderAll（）；
}
函数onMouseUp（）{
//警惕（“鼠标向上！”）；
rect.setCoords（）；
isMouseDown=错误；
}
});
画布{
边框：2个点绿色；
}




$（文档）.ready（函数（）{
//获取画布
var canvas=newfabric.canvas（“画布”）；
var rect，isMouseDown=false；
$（“#选择”）。单击（函数（）{
canvas.selection=true；
更改状态（真）；
//删除鼠标事件
canvas.off（'mouse:down'，onMouseDown）；
canvas.off（'mouse:move'，onMouseMove）；
canvas.off（'mouse:up'，onMouseUp）；
})
功能更改状态（值）{
canvas.forEachObject（函数（obj）{
obj.可选=值；
})
canvas.renderAll（）；
}
$（'#矩形'）。单击（函数（）{
canvas.selection=false；
更改状态（假）；
//注册鼠标事件
canvas.on（'mouse:down'，onMouseDown）；
canvas.on（'mouse:move'，onMouseMove）；
canvas.on（'mouse:up'，onMouseUp）；
});
函数onMouseDown（事件）{
//定义程序
isMouseDown=真；
var pointer=canvas.getPointer（event.e）；
//创建矩形对象
rect=新结构。rect({
左：指针.x，
顶部：pointer.y，
宽度：0，
高度:0,，
笔划：“红色”，
冲程宽度：3，
可选：false，
填充：“”
});
canvas.add（rect）；
}
mouseMove函数（事件）{
//定义程序
如果（！isMouseDown）{
返回；
}
var pointer=canvas.getPointer（event.e）；
setWidth（Math.abs（（pointer.x-rect.get（'left'））；
setHeight（Math.abs（（pointer.y-rect.get（'top'））；
canvas.renderAll（）；
}
函数onMouseUp（）{
//警惕（“鼠标向上！”）；
rect.setCoords（）；