绘制多边形织物 JS 2.0

Question

在以前的fabricjs版本中，我有以下功能可以帮助我在单击鼠标时绘制一个多边形，并且它是正确完成的。

function draw_polygon(){
  //I define the variables that I need
      var mode = "add", currentShape;
      var newColor = "#FF0000";
  var puntos;
  var obj;
      newColor = this.getRandomColor();

  //I prepare the reading of the event mouse: down, 
  //for when I click, if I am adding the polygon for 
  //the first time, that is created and added to the canvas
  canvas.on("mouse:down", function (event) {
    var pos = canvas.getPointer(event.e);
        if (mode === "add") {
      // console.log(this.getRandomColor);
            currentShape = new fabric.Polygon([{
                            x: pos.x,
                            y: pos.y
                }, {
                  x: pos.x + 1, 
                  y: pos.y + 1
                        }], {
                  fill: "#FF0000",
                            selectable: false,
                  olvidar: "olvidar"
                });
      canvas.add(currentShape);
      canvas.renderAll();
            newColor= currentShape.get('fill');
      mode = "edit";
          } else if (mode === "edit" && currentShape && currentShape.type === "polygon") {
      //In the case that I have added the polygon, what I have to do is add the points, as I click
      var points = currentShape.get("points");
      points.push({
        x: pos.x ,
        y: pos.y
      });
      puntos = points;
      currentShape.set({
        points: points
      });
              canvas.renderAll();
          }
  });
  //I set up a mouse: move listener that modifies the poligo in real time, 
  //to see where the next point will go, following the position of the mouse
  canvas.on("mouse:move", function (event) {
    console.log("Hola");
    var pos = canvas.getPointer(event.e);
    console.log("CurrShape", currentShape);
    if (mode == "edit" && currentShape) {
      var points = currentShape.get("points");

      points[points.length - 1].x = pos.x;
      points[points.length - 1].y = pos.y;
      currentShape.set({
        points: points,
        dirty: true
      });
      currentShape.setCoords();
      canvas.renderAll();
    }
  });

  // <%'
  // 'Descripción: función que nos ayuda a parar la creación del poligono cuando hacemos doble click 
  // 'Inputs: 
  // 'Outputs:
  // 'DFDNSCADA0676
  // %>

  //This function is executed at the end of the creation of the polygon, which is double clicking on the screen
  function pararCreacion(){
    if (mode === 'edit' || mode === 'add') {
      mode = 'normal';
      var obj = currentShape.toObject();
      currentShape = new fabric.Polygon(puntos,{obj});
      currentShape.set({
        originY: "top",
        originX: "left",
        fill: newColor,
        type: 'polygon'
      });
      canvas._objects.pop();
      canvas.add(currentShape);
      currentShape.set({
        selectable: true,
      });
      $("#Elemento_186").removeAttr("style");
      canvas.renderAll();
      // <%' Cuando ya termino con el poligono y refresco el canvas entonces es cuando añado el cambio a mi matriz deshacer %>
      canvas.off("mouse:move");
    }   
    currentShape = null;
        fabric.util.removeListener(fabric.document,'dblclick', pararCreacion);    //de esta forma cuando termina la creación me sale de la función y me anula el evento
     }
     fabric.util.addListener(fabric.document, 'dblclick', pararCreacion);
  };

这个函数的问题是它会生成一个不可见的矩形或类似的东西，其大小小于画布的大小。或者这就是我在画布上看到的，正因为如此，我看到了那个盒子里的人物。

我不知道如何更好地解释它

Creating the object

Final result of the creation of the object

Fiddle Working Example

Answer 1

在绘制时设置为多边形对象，如果启用缓存，它不会更新缓存画布的宽度/高度，因此无法绘制多边形。

objectCaching:false

jsfiddle