Line：在fabric.js 6.3.0版本中，当从左侧控件更改宽度时，位置正在发生变化

Question

if (this.selected.type === 'line') {
  var newWidth = Math.round(this.selected.width * this.selected.scaleX);

  // Check if the new width is less than 10, if so, set it to 10
  if (newWidth < 50) {
    newWidth = 50;
    this.selected.set({
      scaleX: Number((50 / this.selected.width).toFixed(3)),  // Adjust scale to maintain min width
      scaleY: Number((50 / this.selected.width).toFixed(3))
    });
  } else {
    this.selected.width = newWidth;

  }

  // Ensure stroke width is handled appropriately
  this.selected.scaleX = 1;
  this.selected.scaleY = 1;
  this.canvas.renderAll();
}

**为什么在这一行位置发生变化时**

https://www.loom.com/share/e34a9639ea894e0c82452614b2a1e651 https://www.loom.com/share/e34a9639ea894e0c82452614b2a1e651

为什么在这一行位置发生变化时

Answer 1

添加此自定义补丁

function applyCustomControlsToObject(object: any, controlType: string) {
    // General function to create resizing controls for both width and height with custom icons
    const createResizeControl = (
      xPos: number,
      yPos: number,
      axis: 'x' | 'y',
      isNegative: boolean,
      iconRenderFunction: any // Pass the custom render function (drawVerticalIcon or drawHorizontalIcon)
    ) => {
      return new (fabric as any).Control({
        x: xPos,
        y: yPos,
        cursorStyleHandler: (fabric as any).controlsUtils.scaleSkewCursorStyleHandler,
        render: iconRenderFunction, // Set custom icon render function here
        actionHandler: function(eventData: MouseEvent, transform: any, x: number, y: number) {
          const target = transform.target;
          let newValue, originalEdge;

          if (axis === 'x') {
            originalEdge = target.left + target.width;
            newValue = isNegative ? target.width - (x - target.left) : x - target.left;

            if (newValue > 0) {
              target.set({
                width: newValue,
                left: isNegative ? originalEdge - newValue : target.left
              });
            }
          } else if (axis === 'y') {
            originalEdge = target.top + target.height;
            newValue = isNegative ? target.height - (y - target.top) : y - target.top;

            if (newValue > 0) {
              target.set({
                height: newValue,
                top: isNegative ? originalEdge - newValue : target.top
              });
            }
          }
          target.setCoords();
          return true;
        },
        actionName: 'resizing'
      });
    };

    // Apply controls based on object type and attach custom icons
    if (controlType === 'rect') {
      // Vertical resizing (Left and Right) use drawVerticalIcon
      object.controls.ml = createResizeControl(-0.5, 0, 'x', true, drawVerticalIcon);  // Left (width - negative direction)
      object.controls.mr = createResizeControl(0.5, 0, 'x', false, drawVerticalIcon);  // Right (width - positive direction)

      // Horizontal resizing (Top and Bottom) use drawHorizontalIcon
      object.controls.mt = createResizeControl(0, -0.5, 'y', true, drawHorizontalIcon);  // Top (height - negative direction)
      object.controls.mb = createResizeControl(0, 0.5, 'y', false, drawHorizontalIcon);  // Bottom (height - positive direction)
    } else if (controlType === 'line') {
      // For lines, only the left control (ml) will be shown with a vertical icon
      object.controls.ml = createResizeControl(-0.5, 0, 'x', true, drawVerticalIcon);  // Left (width - negative direction)
    }

    object.setCoords();
}