0

我正在使用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> {

看起来 theImage是一个实例，Shape因此应该可以放在 a 中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 代码来完成创建可拖动的图像组或我没有考虑的替代方法有任何建议。

4

1 回答 1

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

于 2020-09-18T17:13:33.730 回答