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

Question

Is it possible to fill anchors in Konva.Transformer with shape? I mean, would I have to add another layer in order to make custom anchors or can I do something right in Transformer component?

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

At the current moment [email protected] doesn't have support for such functions.

As a workaround you can:

1. create an external canvas with the size of custom shape
2. Manually draw into that canvas
3. Manually style required anchors with that canvas to use it as 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