Как я могу получить свойства изображения, такие как scaleX в Reaction-Kova?

Question

Как и в примере, показанном для фигуры, он имеет x,y, вращение и т. Д. https://konvajs.github.io/docs/select_and_transform/Transform_Events.html

Изображение в Реакции-Конве также расширяет форму.

Как я могу получить эти значения для изображения (с трансформатором) в реаги-конве.

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