KonvaJS，可能会有一组可拖动的图像吗？

编程问答 2022-06-13

问题描述

我正在使用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提供的代码完成创建可拖动的图像组有任何建议，或者是我没有考虑的替代方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

konvajskonvajs-reactjsreactjsreactjstypescripttypescript