konvajs - 有没有办法在 Konvajs 的 Transformer 的锚点中放置形状？
问题描述
是否可以用形状填充 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}
/>
解决方案
目前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]);