有没有办法在 Konvajs 的 Transformer 的锚点中放置形状？答案

【问题标题】：Are there any ways to place shape in anchors of Transformer in Konvajs?有没有办法在 Konvajs 的 Transformer 的锚点中放置形状？
【发布时间】：2020-12-28 00:39:51
【问题描述】：

是否可以用形状填充 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}
      />

【问题讨论】：

标签： konvajs

【解决方案1】：

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

作为一种解决方法，您可以：

创建具有自定义形状大小的外部画布
手动绘制到该画布中
使用该画布手动设置所需锚点的样式，以将其用作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

【讨论】：