react-konva - 处理 transformer select、deselect 和悬停？

Question

我尝试使用 react-konva 来学习本教程 https://konvajs.github.io/docs/select_and_transform/Basic_demo.html

但事实是，React 管理 DOM 的方式完全不同。

那么如何处理 select、deselect 和悬停在 Transformer 上？

谢谢。

Answer 1

这不是纯粹的反应方式。但是效果很好：

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect, Transformer } from "react-konva";

const Rect1 = () => (
  <Rect
    name="rectange1"
    x={20}
    y={20}
    width={50}
    height={50}
    fill="red"
    draggable
  />
);

const Rect2 = () => (
  <Rect
    name="rectange2"
    x={60}
    y={120}
    width={50}
    height={50}
    fill="green"
    draggable
  />
);

class TransformerComponent extends React.Component {
  componentDidMount() {
    this.checkNode();
  }
  componentDidUpdate() {
    this.checkNode();
  }
  checkNode() {
    const stage = this.transformer.getStage();
    const { selectedShapeName } = this.props;
    const selectedNode = stage.findOne("." + selectedShapeName);
    if (selectedNode === this.transformer.node()) {
      return;
    }
    if (selectedNode) {
      this.transformer.attachTo(selectedNode);
    } else {
      this.transformer.detach();
    }
    this.transformer.getLayer().batchDraw();
  }
  render() {
    return (
      <Transformer
        ref={node => {
          this.transformer = node;
        }}
      />
    );
  }
}

class App extends Component {
  state = {
    selectedShapeName: ""
  };
  handleStageClick = e => {
    this.setState({
      selectedShapeName: e.target.name()
    });
  };
  render() {
    return (
      <Stage
        width={window.innerWidth}
        height={window.innerHeight}
        onClick={this.handleStageClick}
      >
        <Layer>
          <Rect1 />
          <Rect2 />
          <TransformerComponent
            selectedShapeName={this.state.selectedShapeName}
          />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById("root"));

TODO：您需要监听 transformend 事件并更新 React 状态下的形状属性。

https://codesandbox.io/s/pk332k1n97

react-konva - 处理 transformer select、deselect 和悬停？

react-konva - Handle transformer select, deselect and hover?

reactjs

konvajs