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

解决方法

您的尝试对我来说很好。在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

canvaskonvajskonvajs-reactjsreactjsreactjsreactjsreactjstypescripttypescripttypescript