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

Question

我正在使用 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应该可以包含Shapeapi

Group constructor. Groups are used to contain shapes or other groups.

我想知道是否有人对利用提供的 Konva 代码来完成创建一组可拖动的图像或者我没有考虑的替代方法有任何建议。

Answer 1

我觉得你的尝试不错。在 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

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

KonvaJS, Possible to have a draggable group of images?

reactjs

typescript

canvas

konvajs

konvajs-reactjs