Javascript 绘制多边形时，将“原点”和“原点”设置为“中心”会导致独立位移

我试图用织物，用鼠标画一个多边形，之前在我的应用程序中，对象的原点是“左”，对象的原点是“顶”。现在，因为它会在应用程序的其他部分产生问题，我们决定必须建立originX和origin，并且两者都带有“center”

这会在多边形创建结束时导致对象发生位移

要查看问题，请取消对代码的注释。有了这些注释，它可以很好地与originX=“left”和originY=“top”配合使用

---

为什么要为所有对象更改

originX

和

originY

？因为如果我使用originX=“left”和originY=“top”修改对象的角度，对象将从左上角旋转，我希望它从中心旋转对象。我刚刚意识到我可以用object来做这个。我想你现在不需要改变了。是的。现在的问题是如何获取所讨论对象的左上角坐标，因为根据OriginX/Y，它返回一个或另一个坐标。我们知道，默认情况下，它们是从左上角收集的，但旋转时，这些坐标会发生变化，因为该角已发生变化。如果我们将originX/Y置于中心，它将返回对象中心的坐标，但这将影响我向用户提供的信息。现在我做了一个梅西，有一个方法，返回一个物体的顶部和左侧，不管这个物体有多大的旋转？

var canvas = window._canvas = new fabric.Canvas('c');

draw_polygon(1);


function draw_polygon(id){
  editandoPoligono = true;
  canvas.selection=false;
  var mode = "add", currentShape;
  var puntos;
  newColor = "red";
  canvas.observe("mouse:move", function (event) {
     var pos = canvas.getPointer(event.e);
     if (mode === "edit" && currentShape) {
     //currentShape.originX = "center";
     //currentShape.originY = "center";
     var points = currentShape.get("points");
        points[points.length - 1].x = pos.x;
            points[points.length - 1].y = pos.y;
            currentShape.set({
                points: points,
            });
            canvas.renderAll();
    }
 });
 canvas.observe("mouse:down", function (event) {
 var pos = canvas.getPointer(event.e);
 if (mode === "add") {
     var obj = new fabric.Polygon([{
                    x: pos.x,
                     y: pos.y
            }, {
              x: pos.x + 1, 
              y: pos.y + 1
                    }], {
               fill: newColor,
               objectCaching: false,
                       selectable: false,
                   id: id,
               olvidar: "olvidar",
               strokeWidth: 0,
               originX: "center",
               originY: "center"
 });
 var circ =new fabric.Circle({
       id: "guiaPol",
       evented: false,
       selectable: false,
       top: pos.y-2.5,
       left: pos.x-2.5,
       radius: 5,
       fill:"black",
       perPixelTargetFind: true,
       originX: "center",
       originY: "center"
 });
 currentShape = obj;
 canvas.add(currentShape);
 canvas.add(circ);
 newColor= currentShape.get('fill');
 mode = "edit";
    }   else if (mode === "edit" && currentShape && currentShape.type === "polygon") {
 //currentShape.originX="center";
 //currentShape.originY="center";
     var points = currentShape.get("points");
 points.push({
    x: pos.x ,
    y: pos.y
 });
 puntos = points;
 currentShape.set({
   points: points
 });
 var circ = new fabric.Circle({
     id: "guiaPol",
     evented: false,
     selectable: false,
     top: pos.y-2.5,
     left: pos.x-2.5,
     radius: 5,
     fill: "black",
     perPixelTargetFind: true,
     originX: "center",
     originY: "center"
  });
  canvas.add(circ);
        canvas.renderAll();
  }
});


function pararCreacion(){
 if (mode === 'edit' || mode === 'add') {
    mode = 'normal';
    var obj = currentShape.toObject();
    currentShape = new fabric.Polygon(puntos,{obj});
    currentShape.set({
        id:id,
        originY: "top",
        originX: "left",
        fill: newColor,
        type: 'polygon',
        nombre: 'Objeto_' + id,
        perPixelTargetFind: true,
        strokeWidth: 0/*,
        originX: "center",
        originY: "center"*/
     });
     var circleObjects = [];
     canvas.forEachObject(function (o) {
        if (o.id == "guiaPol") {
          circleObjects.push(o);
        }
      });
      canvas.remove(...circleObjects);
      canvas._objects.pop();

      currentShape.nombre = 'Objeto_'+id;
      if(currentShape.get('points').length>4){
        canvas.add(currentShape);
        fabric.Object.prototype.originX ="left";
        fabric.Object.prototype.originY ="top";
        currentShape.set({
          selectable: true
        });  
      }else{
        alert("Error");
      }
      canvas.selection=true;
      editandoPoligono = false;
      canvas.renderAll();
    }   
   currentShape = null;
   canvas.on("mouse:dblclick", pararCreacion);
 }
  canvas.on("mouse:dblclick", pararCreacion);

  };