Problem with path update 路径更新问题

[Synergism612]

在对path.path数组进行更改时，会出现选择框不更新的情况，导致改变path后对于超出框体的部分无法选择
When changes are made to the path.path array, the selection box will not be updated. As a result, the parts beyond the box cannot be selected after the path is changed
我在这里提出我的解决办法，并希望官方能够尽快给出对于该问题的官方函数或者案例
I propose my solution here, and hope that the official function or case for this problem can be given as soon as possible

这个方法会导致使用toJSON()异常，请查看下方留言！！！！
This method will result in a toJSON() exception, see the comment below at ！！！！

我使用如下环境
I use the following environment

  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@ant-design/pro-components": "^2.4.4",
    "@types/fabric": "^5.3.3",
    "@umijs/max": "^4.0.79",
    "antd": "^5.4.0",
    "fabric": "^5.3.0"
  }

path的参数
path options

                  {
                    stroke: 'black',
                    strokeWidth: lineStrokeWidth,
                    fill: '',
                    name: pathCurveName,
                    data: { id: pathNodeId },
                    objectCaching: false,
                    lockMovementX: true,
                    lockMovementY: true,
                    originX: 'center',
                    originY: 'center',
                    // perPixelTargetFind: true,
                  }

最初的问题情景
The original problem scenario

      // 移动元素时触发的事件
      // object moving event
      canvas.on('object:moving', function (opt: fabric.IEvent<MouseEvent>) {
        // const evt = opt.e;
        const element = opt.target;
        let objects = canvas.getObjects('path');
        //控制点移动 曲线改变曲率
        //Modified curvature of curve
        if (element && element.name === pathControlName) {
          for (let index = 0; index < objects.length; index++) {
            const obj = objects[index] as fabric.Path;
            if (
              obj.name === pathCurveName &&
              obj.data.id === element.data.id &&
              obj.path
            ) {
              // [1][1] control point x ;[1][2] control point y
              //@ts-ignore
              obj.path[1][1] = element.left;
              //@ts-ignore
              obj.path[1][2] = element.top;
              obj.setCoords();
            }
          }
        }
});

结果如下：
results are as follows:

在框体外我无法选中path
I can't select path outside the box

所以我使用了一种取巧的办法：让框体变大到包含曲线的三个重要点
So I used a trick: I made the box large enough to include three important points on the curve

新建一个工具ts
Create a new tool ts

interface Coord {
  x: number;
  y: number;
}

interface Result {
  width: number;
  height: number;
}

const pathCurveName = 'pathCurve';

export const pathCurveChange = (obj: fabric.Path): Result | null => {
  if (obj.name !== pathCurveName) {
    return null;
  }
  //获取path数组
  //get path array
  const path = obj.path as unknown as number[][];
  const start: Coord = { x: path[0][1], y: path[0][2] };
  const control: Coord = { x: path[1][1], y: path[1][2] };
  const end: Coord = { x: path[1][3], y: path[1][4] };
  let width = obj.width!;
  let height = obj.height!;
  const center: Coord = {
    x: obj.left!,
    y: obj.top!,
  };

  if (Math.abs(start.x - center.x) > width / 2) {
    width += 2 * (Math.abs(end.x - center.x) - width / 2);
  }
  if (Math.abs(start.y - center.y) > height / 2) {
    height += 2 * (Math.abs(end.y - center.y) - height / 2);
  }
  if (Math.abs(end.x - center.x) > width / 2) {
    width += 2 * (Math.abs(end.x - center.x) - width / 2);
  }
  if (Math.abs(end.y - center.y) > height / 2) {
    height += 2 * (Math.abs(end.y - center.y) - height / 2);
  }

  if (Math.abs(control.x - center.x) > width / 2) {
    width += Math.abs(control.x - center.x) - width / 2;
  }
  if (Math.abs(control.y - center.y) > height / 2) {
    height += Math.abs(control.y - center.y) - height / 2;
  }
  return {
    width: width,
    height: height,
  };
};

使用这个工具函数
Use this utility function

      // 移动元素时触发的事件
      // object moving event
      canvas.on('object:moving', function (opt: fabric.IEvent<MouseEvent>) {
        // const evt = opt.e;
        const element = opt.target;
        let objects = canvas.getObjects('path');
        //控制点移动 曲线改变曲率
        //Modified curvature of curve
        if (element && element.name === pathControlName) {
          for (let index = 0; index < objects.length; index++) {
            const obj = objects[index] as fabric.Path;
            if (
              obj.name === pathCurveName &&
              obj.data.id === element.data.id &&
              obj.path
            ) {
              // [1][1] control point x [1][2] control point y
              //@ts-ignore
              obj.path[1][1] = element.left;
              //@ts-ignore
              obj.path[1][2] = element.top;
              //重新绘制框体
              //update box
              const change = pathCurveChange(obj)!;
              obj.width = change.width;
              obj.height = change.height;
              obj.setCoords();
            }
          }
        }
});

结果如下：
results are as follows:

我在节点移动中也使用了工具函数
I also used utility functions in node movement
在移动节点时也同样好用
It also works well when moving nodes

最后将path参数中的//perPixelTargetFind:true解除注释即可
Finally in the path parameter / / perPixelTargetFind: true remove annotation

这样就会通过像素来选择path
This will select the path by pixel

[Synergism612]

@asturur @ShaMan123
We hope that an official solution will be available soon

[Synergism612]

new question!
https://github.com/fabricjs/fabric.js/issues/9340#issue-1896184250

[asturur]

This is the same case of the polygon points demo.
You should let fabric change the bounding box and the position of the curve without doing it yourself.

[Synergism612]

How can this be done , I can't use setCoords() to get him to change

[Synergism612]

我无法解决toJSON()后的问题，它总是会有偏差，所以我使用原始一点的方法
I can't solve the problem after toJSON(), it's always biased, so I use the primitive approach

   // 移动元素时触发的事件
      // object moving event
      canvas.on('object:moving', function (opt: fabric.IEvent<MouseEvent>) {
        // const evt = opt.e;
        const element = opt.target;
        let objects = canvas.getObjects('path');
        //控制点移动 曲线改变曲率
        //Modified curvature of curve
        if (element && element.name === pathControlName) {
          for (let index = 0; index < objects.length; index++) {
            const obj = objects[index] as fabric.Path;
            if (
              obj.name === pathCurveName &&
              obj.data.id === element.data.id &&
              obj.path
            ) {
              const pathArray = obj.path as unknown as string[2][3];
             const copyObj = new fabric.Path(
                pathArray[0][0] +
                  ' ' +
                  pathArray[0][1] +
                  ' ' +
                  pathArray[0][2] +
                  ' ' +
                  pathArray[1][0] +
                  ' ' +
                  // pathArray[1][1] +
                  element.left +
                  ' ' +
                  // pathArray[1][2] +
                  element.top +
                  ' ' +
                  pathArray[1][3] +
                  ' ' +
                  pathArray[1][4],
                {
                  stroke: obj.stroke,
                  fill: obj.fill,
                  strokeWidth: obj.strokeWidth,
                  name: obj.name,
                  data: { id: obj.data.id },
                  objectCaching: obj.objectCaching,
                  lockMovementX: obj.lockMovementX,
                  lockMovementY: obj.lockMovementY,
                  selectable: obj.selectable,
                  perPixelTargetFind: obj.perPixelTargetFind,
                  originX: obj.originX,
                  originY: obj.originY,
                },
              );
              canvas.remove(obj);
              canvas.add(copyObj);
            }
          }
        }
});

没有办法的办法，曲线的曲率更新暂时没有更好的方法可以支持toJSON()
There is no way to update the curvature of the curve. There is no better way to support toJSON().