有什么方法可以在 Konvajs 的 Transformer 锚中放置形状？

Question

是否可以用形状填充 Konva.Transformer 中的锚点？我的意思是，我是否必须添加另一层才能制作自定义锚点，或者我可以在 Transformer 组件中做一些正确的事情吗？

return (
    <>
      <Rect
        x={100}
        y={100}
        fill="red"
        width={200}
        height={100}
        ref={rectRef}
      />
      <Transformer
        ref={transformerRef}
        rotateEnabled
        rotateAnchorOffset={48}
        keepRatio={false}
        anchorFill={'yellow'}
        borderDash={[5,10]}
        padding={10}
      />

Answer 1

目前konva@7.2.2不支持此类功能。

作为解决方法，您可以：

创建一个具有自定义形状大小的外部 canvas
手动绘制到那个canvas
手动设置所需锚点的样式 canvas 以将其用作 patternImage。

  const trRef = React.useRef();

  const anchorShapeCanvas = React.useMemo(() => {
    const canvas = document.createElement("canvas");
    canvas.width = 12;
    canvas.height = 12;
    const ctx = canvas.getContext("2d");
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.lineTo(0, 0);
    ctx.lineTo(12, 0);
    ctx.lineTo(12, 4);
    ctx.lineTo(4, 4);
    ctx.lineTo(4, 12);
    ctx.lineTo(0, 12);
    ctx.closePath();
    ctx.stroke();
    ctx.stroke = "2px";
    return canvas;
  }, []);

  React.useEffect(() => {
    if (isSelected) {
      // we need to attach transformer manually
      trRef.current.nodes([shapeRef.current]);

      trRef.current.find(".top-left").fillPriority("pattern");
      trRef.current.find(".top-left").fillPatternImage(anchorShapeCanvas);
      trRef.current.find(".top-left").strokeEnabled(false);
      trRef.current.getLayer().batchDraw();
    }
  }, [isSelected]);

https://codesandbox.io/s/react-konva-fill-pattern-for-transformer-anchor-45zc5?file=/src/index.js:236-1151

有什么方法可以在 Konvajs 的 Transformer 锚中放置形状？

Are there any ways to place shape in anchors of Transformer in Konvajs?

konvajs