如何解决在 Konva 中将变压器应用于具有剪辑属性的组时,如何设置变压器的初始尺寸?
我有一个带有几个节点的 Konva.Group
,我设置了剪辑属性来限制看到的内容。我将 Konva.Transformer
应用于组,我面临的问题是 Transformer 包围了整个组,甚至是未剪裁的部分。即使它功能齐全并且可以完成工作,这看起来也不太好。有没有什么办法可以设置transformer的初始宽度和高度,让它只包围被裁剪的部分?
这是应用剪辑和变换之前的组
这是应用剪辑和变换后的样子
import React,{useRef,useEffect} from 'react';
import { render } from 'react-dom';
import { Stage,Layer,Rect,Circle,Line,Group,Transformer } from 'react-konva';
const App = () => {
const trRef = useRef(null)
const grpRef = useRef(null)
useEffect(()=>{
const transformNode = trRef.current;
transformNode.enabledAnchors(["top-left","top-right","bottom-left","bottom-right"])
transformNode.nodes([grpRef.current])
},[trRef])
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Group ref={grpRef} clipX={0} clipY={0} clipwidth={200} clipHeight={200}>
<Rect
x={20}
y={50}
width={100}
height={100}
fill="red"
shadowBlur={10}
/>
<Circle x={200} y={100} radius={50} fill="green" />
<Line
x={20}
y={200}
points={[0,100,100]}
tension={0.5}
closed
stroke="black"
fillLinearGradientStartPoint={{ x: -50,y: -50 }}
fillLinearGradientEndPoint={{ x: 50,y: 50 }}
fillLinearGradientColorStops={[0,'red',1,'yellow']}
/>
</Group>
<Transformer rotateEnabled={false} ref={trRef} />
</Layer>
</Stage>
);
};
render(<App />,document.getElementById('root'));
解决方法
这是 Konva.Transform
的默认行为,无法更改。一种解决方法是在剪切部分周围创建一个透明矩形,对其应用变换,然后将更改复制到组中。
import React,{useRef,useEffect} from 'react';
import { render } from 'react-dom';
import { Stage,Layer,Rect,Circle,Line,Group,Transformer } from 'react-konva';
const App = () => {
const trRef = useRef(null)
const grpRef = useRef(null)
const rectRef = useRef(null)
// To copy the transform matrix from the rectangle to the group
function handleTransform(e){
const shape1 = e.target;
const transform = shape1.getTransform().copy();
const attrs = transform.decompose();
grpRef.current.setAttrs(attrs);
}
useEffect(()=>{
const transformNode = trRef.current;
transformNode.enabledAnchors(["top-left","top-right","bottom-left","bottom-right"])
transformNode.nodes([rectRef.current])
},[trRef])
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Group draggable>
{/* Transparent rectangle to which the transform is now applied to */}
<Rect
ref={rectRef}
x={0}
y={0}
width={200}
height={200}
id="invisible-rect"
/>
<Group ref={grpRef} clipX={0} clipY={0} clipWidth={200} clipHeight={200}>
<Rect
x={20}
y={50}
width={100}
height={100}
fill="red"
shadowBlur={10}
/>
<Circle x={200} y={100} radius={50} fill="green" />
<Line
x={20}
y={200}
points={[0,100,100]}
tension={0.5}
closed
stroke="black"
fillLinearGradientStartPoint={{ x: -50,y: -50 }}
fillLinearGradientEndPoint={{ x: 50,y: 50 }}
fillLinearGradientColorStops={[0,'red',1,'yellow']}
/>
</Group>
</Group>
<Transformer onTransform={handleTransform} rotateEnabled={false} ref={trRef} />
</Layer>
</Stage>
);
};
render(<App />,document.getElementById('root'));
这是上述代码的 demo。感谢 Anton,这个很棒的库的创建者提出了这个解决方案。
Reference - Konva 形状变换共享很简单
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。