如何解决KonvaJS,可能会有一组可拖动的图像吗?
我正在使用react-konva,并且我需要能够一次拖动多个图像(不使用mutliselect)。看来Konva通过使用“组”或“容器”来处理此问题。
我查看了TypeScript文件,并且:
export declare class Group extends Container<Group | Shape> {
_validateAdd(child: Node): void;
}
export interface ContainerConfig extends NodeConfig {
clearBeforeDraw?: boolean;
clipFunc?: (ctx: CanvasRenderingContext2D) => void;
clipX?: number;
clipY?: number;
clipWidth?: number;
clipHeight?: number;
}
export declare abstract class Container<ChildType extends Node> extends Node<ContainerConfig> {
export declare class Image extends Shape<ImageConfig> {
似乎Image
是Shape
的一个实例,因此应该放在Group
中,但我无法使其正常工作。
我尝试做:
<Group height={<SOME NUMBER>} width={<SOME NUMBER>} draggable>
{obj.map((obj2: any,idx: number) => {
return (
<Image
X={<SOME NUMBER>}
Y={<SOME NUMBER>}
key={idx}
scale={<SOME NUMBER>}
image=<SOME IMAGE CONFIG>}
draggable
/>
)
})}
</Group>
我尝试通过Vanilla API查找示例,但找不到任何内容。它表明Group
应该能够包含Shape
api
组构造函数。组用于包含形状或其他组。
我想知道是否有人对利用Konva提供的代码完成创建可拖动的图像组有任何建议,或者是我没有考虑的替代方法。
解决方法
您的尝试对我来说很好。在Konva
中,图层内部可能具有组和形状。任何组都可以在内部包含其他组或形状。图像只是一个形状。
有一个适合您的演示:
const URLImage = ({ url,...rest }) => {
const [image] = useImage(url);
return <Image image={image} {...rest} />;
};
class App extends Component {
render() {
const images = [
"https://konvajs.org/assets/lion.png","https://konvajs.org/assets/yoda.jpg"
];
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Group draggable>
{images.map((url,i) => (
<URLImage url={url} x={i * 120} key={i} />
))}
</Group>
</Layer>
</Stage>
);
}
}
演示:https://codesandbox.io/s/recursing-bohr-vlcsw?file=/src/index.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。