fabricjs - 如何添加多边形点并将其绘制在 fabric js 中的图像上

Question

此代码在 fabric js 1.5 版中受支持，但在最新版本的 fabric js(如 1.7 及更高版本)中不受支持。任何人都可以帮助我解决此代码问题。我希望它在 fabric 版本 1.7.21 中实现。Whats在较新版本的结构中对鼠标坐标所做的更改。

var canvas = new fabric.Canvas('canvas');
var polygonCount = 1;
var startDrawingPolygon;
var ArrayLength;
var addTexture = false;
var circleCount = 1;
var fillColor = "rgba(46, 240, 56, 0.5)";

function done() {
  startDrawingPolygon = false;
  ArrayLength = circleCount;
  circleCount = 1;
  var tempCount = 0;
  window["polygon" + polygonCount] = new fabric.Polygon([{
    x: 0,
    y: 0
  }, {
    x: 0.5,
    y: 0.5
  }], {
    fill: fillColor,
    PolygonNumber: polygonCount,
    name: "Polygon",
    type: 'normal',
    noofcircles: ArrayLength
  });
  canvas.add(window["polygon" + polygonCount]);
  for (var i = 0; canvas.getObjects().length > i; i++) {
    if (canvas.getObjects()[i].polygonNo === polygonCount) {
      var points = window["polygon" + polygonCount].get("points");
      if (canvas.getObjects()[i].circleNo == 1) {
        points[0].x = canvas.getObjects()[i].left - window["polygon" + polygonCount].get("left");
        points[0].y = canvas.getObjects()[i].top - window["polygon" + polygonCount].get("top");
      } else if (canvas.getObjects()[i].circleNo == 2) {
        points[1].x = canvas.getObjects()[i].left - window["polygon" + polygonCount].get("left");
        points[1].y = canvas.getObjects()[i].top - window["polygon" + polygonCount].get("top");
      } else {
        points.push({
          x: canvas.getObjects()[i].left - window["polygon" + polygonCount].get("left"),
          y: canvas.getObjects()[i].top - window["polygon" + polygonCount].get("top"),
        });

      }
      window["polygon" + polygonCount].set({
        points: points
      });
      canvas.renderAll();
    }
  }
  for (var i = 0; canvas.getObjects().length > i; i++) {
    if (canvas.getObjects()[i].name == "draggableCircle") {
      canvas.bringForward(canvas.getObjects()[i]);
      canvas.renderAll();
    }
  }
  polygonCount++;
  canvas.renderAll();
}

function Addpolygon() {
  startDrawingPolygon = true;

}
canvas.on('object:moving', function(option) {
  var startY = option.e.offsetY,
    startX = option.e.offsetX;
  for (var i = 0; i < canvas.getObjects().length; i++) {
    if (canvas.getObjects()[i].name == "Polygon") {
      if (canvas.getObjects()[i].PolygonNumber == option.target.polygonNo) {
        var points = window["polygon" + option.target.polygonNo].get("points");
        points[option.target.circleNo - 1].x = startX - window["polygon" + option.target.polygonNo].get("left");
        points[option.target.circleNo - 1].y = startY - window["polygon" + option.target.polygonNo].get("top");
        window["polygon" + option.target.polygonNo].set({
          points: points
        });
        canvas.renderAll();
      }
    }

    if (canvas.getObjects()[i].name == "draggableCircle") {
      canvas.bringForward(canvas.getObjects()[i]);
    }

  }
  canvas.renderAll();
})
canvas.on('mouse:down', function(option) {
  if (typeof option.target != "undefined") {
    return;
  } else {
    if (addTexture) {
      console.log(option);
    }
    if (startDrawingPolygon) {
      circle = new fabric.Circle({
        left: canvas.getPointer(option.e).x,
        top: canvas.getPointer(option.e).y,
        radius: 7,
        hasBorders: false,
        hasControls: false,
        polygonNo: polygonCount,
        name: "draggableCircle",
        circleNo: circleCount,
        fill: "rgba(0, 0, 0, 0.5)",
        hasRotatingPoint: false,
        originX: 'center',
        originY: 'center'
      });
      canvas.add(circle);
      canvas.bringToFront(circle);
      circleCount++;
      canvas.renderAll();
    }
  }
});

#backgroundCanvas {
  background-image: url('nike.jpg');
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  position: absolute;
  width: 800px;
  height: 800px;
  left: 0px;
  top: 0px;
  -webkit-user-select: none;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button onclick="Addpolygon()">Add Polygon Points</button>
    <button onclick="done()">Create Polygon</button>
</div>
<div style="position:relative">
    <canvas id="canvas" width="800px" height="800px" style="z-index:10;background-color:transparent;"></canvas>
    <div id="backgroundCanvas" style="width:400px;height:400px"> </div>
</div>

Answer 1

objectCaching: false

如果禁用，它不会为对象创建缓存 Canvas 。对于多边形点，我取了左圆和最高值。

演示

var canvas = new fabric.Canvas('canvas');
var polygonCount = 1;
var startDrawingPolygon;
var ArrayLength;
var addTexture = false;
var circleCount = 1;
var fillColor = "rgba(46, 240, 56, 0.5)";

function done() {
  startDrawingPolygon = false;
  ArrayLength = circleCount;
  circleCount = 1;
  var tempCount = 0;
  var objects = canvas.getObjects();
  var points = [];
  for (var i = 0; objects.length > i; i++) {
    if (objects[i].polygonNo === polygonCount) {
      points.push({
        x: objects[i].left,
        y: objects[i].top
      });
      canvas.renderAll();
    }
  }
  console.log(points)
  window["polygon" + polygonCount] = new fabric.Polygon(points, {
    fill: fillColor,
    PolygonNumber: polygonCount,
    name: "Polygon",
    selectable: false,
    noofcircles: ArrayLength,
    objectCaching: false
  });
  canvas.add(window["polygon" + polygonCount]);
  canvas.sendToBack(window["polygon" + polygonCount])
  canvas.renderAll();
  polygonCount++;
}

function Addpolygon() {
  startDrawingPolygon = true;
}

canvas.on('object:moving', function(option) {
  var object = option.target;
  canvas.forEachObject(function(obj) {
    if (obj.name == "Polygon") {
      if (obj.PolygonNumber == object.polygonNo) {
        var points = window["polygon" + object.polygonNo].get("points");
        points[object.circleNo - 1].x = object.left;
        points[object.circleNo - 1].y = object.top;
        window["polygon" + object.polygonNo].set({
          points: points
        });
      }
    }
  })
  canvas.renderAll();
});

canvas.on('mouse:down', function(option) {

  if (option.target && option.target.name == "draggableCircle") {
    return;
  } else {
    if (addTexture) {
      console.log(option);
    }
    if (startDrawingPolygon) {
      var pointer = canvas.getPointer(option.e);
      circle = new fabric.Circle({
        left: pointer.x,
        top: pointer.y,
        radius: 7,
        hasBorders: false,
        hasControls: false,
        polygonNo: polygonCount,
        name: "draggableCircle",
        circleNo: circleCount,
        fill: "rgba(0, 0, 0, 0.5)",
        hasRotatingPoint: false,
        originX: 'center',
        originY: 'center'
      });
      canvas.add(circle);
      circleCount++;
    }
  }
});

#backgroundCanvas {
  background-image: url('nike.jpg');
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  position: absolute;
  width: 800px;
  height: 800px;
  left: 0px;
  top: 0px;
  -webkit-user-select: none;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button onclick="Addpolygon()">Add Polygon Points</button>
    <button onclick="done()">Create Polygon</button>
</div>
<div style="position:relative">
    <canvas id="canvas" width="800px" height="800px" style="z-index:10;background-color:transparent;"></canvas>
    <div id="backgroundCanvas" style="width:400px;height:400px"> </div>
</div>