Javascript 引导点多边形创建

我试图帮助我的用户创建一个多边形，使用多边形顶点中的圆。 我知道如何添加圆，但我看不到如何在双击多边形创建结束时消除圆，它总是抛出一个错误，告诉我要删除的对象未定义

var canvas=window.\u canvas=newfabric.canvas（'c'）；
抽油杆（6）；
函数drawPoligon（id）{
//我定义了我需要的变量
var mode=“add”，currentShape；
var puntos；
var-obj；
newColor=“#FF0000”；
//我准备阅读事件鼠标：向下，
//当我单击时，如果我正在为添加多边形
//第一次，创建并添加到画布
canvas.on（“鼠标：向下”，函数（事件）{
var pos=canvas.getPointer（event.e）；
如果（模式=“添加”）{
//console.log（this.getRandomColor）；
currentShape=新结构。多边形([{
x:pos.x，
y:位置y
}, {
x:位置x+1，
y:位置y+1
}], {
填写：“FF0000”，
可选：false，
id:id，
objectCaching:false，
奥尔维达：“奥尔维达”
});
canvas.add（currentShape）；
var circ=新结构。圆({
id:“guiaPol”，
事件：错误，
顶部：位置y-5，
左：位置x-5，
半径：10，
填充：“红色”，
perPixelTargetFind：真
});
canvas.add（circ）；
canvas.renderAll（）；
newColor=currentShape.get（'fill'）；
mode=“编辑”；
}else if（mode==“edit”&¤tShape&¤tShape.type==“polygon”）{
//如果我已经添加了多边形，我要做的就是在单击时添加点
var points=currentShape.get（“点”）；
点。推({
x:pos.x，
y:位置y
});
puntos=点；
currentShape.set({
点数：点数
});
var circ=新结构。圆({
id:“guiaPol”，
事件：错误，
顶部：位置y-5，
左：位置x-5，
半径：10，
填充：“红色”，
perPixelTargetFind：真
});
canvas.add（circ）
canvas.renderAll（）；
}
});
//我设置了一个鼠标：移动监听器，实时修改poligo，
//按照鼠标位置查看下一个点的位置
canvas.on（“鼠标：移动”），函数（事件）{
//控制台日志（“Hola”）；
var pos=canvas.getPointer（event.e）；
//console.log（“CurrShape”，currentShape）；
如果（模式==“编辑”&¤tShape）{
var points=currentShape.get（“点”）；
点[points.length-1].x=pos.x；
点[points.length-1].y=pos.y；
currentShape.set({
点:点,，
肮脏的：真的
});
currentShape.setCoords（）；
canvas.renderAll（）；
}
});
// 
canvas.off（“鼠标：移动”）；
}   
currentShape=null；
fabric.util.removeListener（fabric.document，'dblclick'，pararcreaction）//在紧急情况下，销售职能和销售合同的最终形式
}
fabric.util.addListener（fabric.document，'dblclick'，pararcreaction）；
};

---

如何解决此错误？

请替换您的代码

canvas.forEachObject(function(o){
    if(o.id == "guiaPol"){
        canvas.remove(o);
    }
});

与

请参阅fabric.js上的问题

---

因为FabricJs v1.6.6函数forEachObject以0到n的形式循环数组中的所有元素remove功能是拼接该数组，然后当项目成功从数组中删除时，它会为您提供未定义的内容。您需要获取画布上的所有对象，然后从最后一个元素循环到第一个元素。

请替换代码

canvas.forEachObject(function(o){
    if(o.id == "guiaPol"){
        canvas.remove(o);
    }
});

var circleObjects = [];
canvas.forEachObject(function(o){
  if(o.id == "guiaPol"){
    circleObjects.push(o);
  }
});
canvas.remove(...circleObjects);

与

请参阅fabric.js上的问题

因为FabricJs v1.6.6函数forEachObject以0到n的形式循环数组中的所有元素remove功能是拼接该数组，然后当项目成功从数组中删除时，它会为您提供未定义的内容。您需要获取画布上的所有对象，然后从最后一个元素循环到第一个元素

var circleObjects = [];
canvas.forEachObject(function(o){
  if(o.id == "guiaPol"){
    circleObjects.push(o);
  }
});
canvas.remove(...circleObjects);

您可以使用

canvas.remove（）

获取所有圆形对象并删除。 这里有更新

并使用canvas.remove（currentShape）删除上一个多边形所以旧多边形将被删除，然后在dblclick处理程序中添加新多边形

您可以使用

canvas.remove（）

获取所有圆形对象并删除。 这里有更新

并使用canvas.remove（currentShape）删除上一个多边形所以旧多边形将被删除，然后在dblclick处理程序中添加新多边形