用多边形转换圆的位置 - FabricJs

Question

我有一个fabricjs 多边形，它的顶点上有fabric js 圆。 我试图通过拖动修改多边形来移动圆圈，为此我尝试使用这篇文章的建议：Here

并做了一些小改动（因为我不能做 canvas.clear()，因为我的画布包含背景图像）：

这是我的代码。

fabricPoly.on('modified', function () {

  const matrix = this.calcTransformMatrix();
  const transformedPoints = this.get('points')
    .map(function (p) {
      return new fabric.Point(p.x - fabricPoly.minX - fabricPoly.width / 2, p.y - fabricPoly.minY - fabricPoly.height / 2);
    })
    .map(function (p) {
      return fabric.util.transformPoint(p, matrix);
    });

  const circles = transformedPoints.map(function (p, i) {
    const currCircleStyle = Object.assign({}, {
      radius: 10,
      fill: 'black',
      hasRotatingPoint: false,
      hasControls: false,
      selectable: true,
      originX: 'center',
      originY: 'center',
      hasBorders: false
    });
    currCircleStyle['index'] = i;
    currCircleStyle['left'] = p.x;
    currCircleStyle['top'] = p.y;
    return new fabric.Circle(currCircleStyle);
  });

  self.fabricList.slice(1).forEach(e => { // self.fabricList[0] is the polygon, and the rest are former circles
    this.canvas.remove(e);
  });
  circles.forEach((e, i) => {
    self.canvasRef.add(e);
  });

  this.points = transformedPoints;

  self.canvasRef.renderAll();
});

但是，在转换完成后，canvas.renderAll() 被击中，多边形似乎移动得更远，它被拖动，在相同的方向。

可能是什么原因？

Answer 1

您可以使用canvas.getObjects('circle') 获取所有圆形对象，并使用canvas.remove() 从画布中删除所有对象

为V-1.x.x

演示

var canvas = new fabric.Canvas("c", {selection: false});
canvas.setBackgroundImage('http://fabricjs.com/assets/pug.jpg', canvas.renderAll.bind(canvas));
var polygon = new fabric.Polygon([
  new fabric.Point(200, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150),
  new fabric.Point(350, 50),
],{fill:'yellow'});

polygon.on("modified", function () {
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points")
  .map(function(p){
    return new fabric.Point(p.x - polygon.minX -polygon.width/2, p.y - polygon.minY - polygon.height/2);
    })
  .map(function(p){
    return fabric.util.transformPoint(p, matrix);
  });
  var circles = transformedPoints.map(function(p){
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  
  this.canvas.remove(...this.canvas.getObjects('circle')).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();

canvas {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<p>
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification.
</p>
<canvas id="c" width="600" height="400"></canvas>

为V-2.x.x

演示

var canvas = new fabric.Canvas("c", {selection: false});
canvas.setBackgroundImage('http://fabricjs.com/assets/pug.jpg', canvas.renderAll.bind(canvas));
var polygon = new fabric.Polygon([
  new fabric.Point(200, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150),
  new fabric.Point(350, 50),
],{fill:'yellow'});

polygon.on("modified", function () {
  var matrix = this.calcTransformMatrix();
  
  var transformedPoints = this.get("points")
  .map(function(p){
    var dimen = polygon._calcDimensions();
    return new fabric.Point(p.x - dimen.left -dimen.width/2, p.y - dimen.top - dimen.height/2);
    })
  .map(function(p){
    return fabric.util.transformPoint(p, matrix);
  });
  var circles = transformedPoints.map(function(p){
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  this.canvas.remove(...this.canvas.getObjects('circle')).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();

canvas {
  border: 1px solid;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p>
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification.
</p>
<canvas id="c" width="600" height="400"></canvas>