修改折线

Question

如果我想在现有折线上添加额外的线条，我应该首先从画布中删除此现有折线，修改点矩阵，然后添加新的折线吗？或者是否可以更改现有折线，例如更改文本对象的文本？

Answer 1

您可以删除整条折线并添加一条新折线，否则您需要计算尺寸（left，top和pathoffset）并将其设置为折线。

<强> 样本

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('c');
var points = [];
var random = fabric.util.getRandomInt;
points.push(new fabric.Point(random(100,200),random(200,300)));
points.push(new fabric.Point(random(200,300),random(100,200)));
points.push(new fabric.Point(random(200,250),random(150,200)));

var polyLine = new fabric.Polyline(points, {
 stroke: 'black',
 fill: ''
});
canvas.add(polyLine);
setPolyCoords();

function addPoint(){
 polyLine.points.push(new fabric.Point(random(100,400),random(100,400)));
 setPolyCoords();
}

function setPolyCoords(){
 polyLine._calcDimensions();
 polyLine.set({
  top : polyLine.minY,
  left : polyLine.minX,
  pathOffset : {
        x: polyLine.minX + polyLine.width / 2,
        y: polyLine.minY + polyLine.height / 2
      }
 });
 polyLine.dirty = true;
 polyLine.setCoords();
 canvas.renderAll();
}

＆＃13;

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick='addPoint()'>Add Point</button>
<canvas id="c" width="400" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在Fabric版本2.7.0中，这变得更容易了，然后在@Durga中获得答案。 请参阅下面的演示中的新代码。

您还可以通过在构建过程中将dirty传递到折线来手动跳过设置objectCaching: false标志的步骤：

var polyLine = new fabric.Polyline(points, {
    stroke: 'black',
    fill: '',
    objectCaching: false
});

演示

var canvas = new fabric.Canvas('c');
var points = [];
var random = fabric.util.getRandomInt;
points.push(new fabric.Point(random(100,200),random(200,300)));
points.push(new fabric.Point(random(200,300),random(100,200)));
points.push(new fabric.Point(random(200,250),random(150,200)));

var polyLine = new fabric.Polyline(points, {
 stroke: 'black',
 fill: ''
});
canvas.add(polyLine);

function addPoint(){
 polyLine.points.push(new fabric.Point(random(100,400),random(100,400)));
 polyLine.dirty = true;
 canvas.renderAll();
}

canvas {
  border: 1px solid #f00;
  margin: 0px;
  display: block;
}

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<button onclick='addPoint()'>Add Point</button>
<canvas id="c" width="400" height="400"></canvas>