konvajs - 如何在 react-kova 中获得像 scaleX 这样的图像属性？

Question

就像显示的形状示例一样，它具有 x、y、旋转等。https://konvajs.github.io/docs/select_and_transform/Transform_Events.html

react-konva 中的图像也扩展了形状。

如何在 react-konva 中获取图像（带变压器）的这些值。

Answer 1

您可以侦听transform事件，然后从图像节点读取所有属性。

  handleTransform = () => {
    const props = {
      x: this.image.x(),
      y: this.image.y(),
      rotatio: this.image.rotation(),
      width: this.image.width(),
      height: this.image.height(),
      scaleX: this.image.scaleX(),
      scaleY: this.image.scaleY()
    };
    console.log(props);
  };
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            image={this.state.image}
            ref={node => {
              this.image = node;
            }}
            draggable
            onTransform={this.handleTransform}
            onDragMove={this.handleTransform}
          />
          <Transformer
            ref={node => {
              this.transformer = node;
            }}
          />
        </Layer>
      </Stage>
    );
  }

演示：https ://codesandbox.io/s/wq184owy45