更新fabric.js动态路径点 [英] Update fabric.js Path points dynamically

问题描述

我正在尝试动态地为路径对象添加点。当我这样做时，路径渲染正确，但边界矩形永远不会更新，使得用户几乎不可能在画布上选择和移动路径。

I'm trying to add points to a path object dynamically. When I do, the path renders correctly, but the bounding rectangle never gets updated, making it nearly impossible for a user to select and move the path on canvas.

当你可以在下面的代码中看到，路径最初是用单个点创建的，然后我动态添加第二个点以及一个控制点。执行此操作后，边界矩形永远不会更新：

As you can see in the code below, the path is initially created with a single point, then I dynamically add a second point as well as a control point. After doing this, the bounding rectangle never updates:

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = '#f5f5f5';
var path = new fabric.Path('M 0 20',{
    left: 100,
    top: 100,
    stroke: 'black',
    fill: ''
});

canvas.add(path);

var commandArray = [];
commandArray[0] = 'Q';
commandArray[1] = 50;
commandArray[2] = 100;
commandArray[3] = 100;
commandArray[4] = 20;

path.path[1] = commandArray;

canvas.renderAll();

我也试过调用 path.setCoords（），但这没有任何区别。如何在将路径添加到路径后让边界矩形更新其尺寸？

I also tried calling path.setCoords(), but that did not make any difference. How can I get the bounding rectangle to update its dimensions after adding points to a path?

这是一个小提琴： http://jsfiddle.net/flyingL123/17ueLva2/2/

推荐答案

最终变得更加复杂。如果在路径中添加了一个点，导致 _parseDimensions 返回 left 值为负值，则路径将跳转在屏幕周围。对于我的用例，我需要在添加和操作点时保持原位的路径。这个小提示显示了我的工作解决方案：

It ended up being more complicated. If a point is added to the path that results in _parseDimensions returning a left value that is negative, the path would jump around the screen. For my use case, I need the path to stay in place while points are added and manipulated. This fiddle shows my working solution:

http： //jsfiddle.net/flyingL123/8763bx2q/8/

如果在打开JS控制台的情况下运行它，您将看到每次附加后脚本暂停添加点，或操纵当前点。当发生这种情况时，您将看到路径不会沿着画布移动，这是所需的行为。在所有断点完成后，您将看到曲线在其选择框中居中。

If you run it with a JS console open, you will see the script pausing after each additional point is added, or current point is manipulated. As this happens you will see that the path does not get moved along the canvas, which is the desired behavior. After all the break points complete, you will see that the curve is centered within its selection box.

如果有更简单的方法来实现此行为，我很乐意知道。

If there is an easier way to achieve this behavior, I would love to know.

这是我用来设置尺寸的功能，以防小提琴链接消失：

Here's the function I'm using to set the dimensions just in case the fiddle link ever goes away:

function updateDims() {
    var dims = path._parseDimensions(),
        prevDims = path.prevDims || {},
        leftDiff = dims.left - (prevDims.left || 0),
        topDiff = dims.top - (prevDims.top || 0);

    path.setWidth(dims.width);
    path.setHeight(dims.height);

    if (dims.left < 0) {
        path.pathOffset.x = path.width/2 + dims.left;
        path.left = path.left + leftDiff;
    } else {
        path.pathOffset.x = path.width/2;
    }

    if (dims.top < 0) {
        path.pathOffset.y = path.height/2 + dims.top;
        path.top = path.top + topDiff;
    } else {
         path.pathOffset.y = path.height/2;   
    }

    path.prevDims = dims;
    path.setCoords();
}

这篇关于更新fabric.js动态路径点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！