修改折线 [英] Modify polyline

查看:41
本文介绍了修改折线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果我想在现有折线上添加一条额外的线,是否应该先从画布上删除该现有折线,修改点矩阵,然后添加新的折线?还是可以更改现有的折线,例如更改文本对象的文本?

If I want to add an extra line to an existing polyline, should I remove this existing polyline from the canvas first, modify the points matrix, and add the new polyline? Or is it possible to change the existing polyline, like changing the text of a text object?

推荐答案

您可以删除整条折线并添加一条新折线,否则需要计算尺寸(left,top和pathoffset)并将其设置为折线.

You may remove whole polyline and add a new one or else you need to calculate the dimensions(left,top and pathoffset) and set it to polyline.

演示

DEMO

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();
}

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

<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>

这篇关于修改折线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆