Question

这是我尝试使Rect组件恢复到其原始位置（ReactKonva）：

var toolBarWidth = window.innerWidth * 0.2;
var toolBarHeight = window.innerHeight * 0.2;

class Toolbar extends Component {
    state = {
        x: toolBarWidth / 4,
        y: toolBarHeight / 4
    };
render() {
return (
  <Stage width={toolBarWidth} height={toolBarHeight} fill="red">
    <Layer>
      <Rect width={toolBarWidth} height={toolBarHeight} fill="blue" />

      <Rect
        x={this.state.x}
        y={this.state.y}
        width={toolBarWidth / 5}
        height={toolBarWidth / 5}
        fill="red"
        draggable
        onDragStart={() => {
          console.log("hi");
        }}
        onDragEnd={() => {
          this.setState({ x: toolBarWidth / 4, y: toolBarHeight / 4 });
          this.forceUpdate();
        }}
      />
    </Layer>
  </Stage>
);
}
}

export default Toolbar;

因此，默认情况下，矩形的位置设置为state.x，state.x为toolBarWidth / 4。然后在拖动结束时，我再次设置了我认为会引发另一个渲染的状态，但是React仅在感觉到更新时才渲染，因此再次将状态设置为相同的东西将不起作用，因此我做到了。强制性升级（）;这没有任何运气。有趣的是，如果我执行this.setState（{ 1 + toolBarWidth / 4 ...}），它确实可以工作，当然这只是第一次。

我觉得必须有一些konva方式来设置元素的属性，但是我找不到它。我还尝试过执行document.getElementId（“ canva id”）和document.getContext（“ canva element id”），但由于我找不到为我的canva定义ID的地方而停止了，因为它似乎被写入了舞台元素。

Answer 1

要使用内部konva方法，您必须为每个图层和矩形定义引用 <Layer ref="layer">

<Rectangle ref="rectangle">

并在dragEnd函数中使用refs将矩形的位置设置为 {x: 0, y: 0}

onDragEnd={() => {
  var rectangle = this.refs.rectangle,
      layer = this.refs.layer
  rectangle.position({ x: 0, y: 0 });
  layer.draw()
}}

最终的JSX代码如下所示

<Stage width={400} height={400} fill="red">
    <Layer ref="layer">
      <Rect width={400} height={400} fill="blue" />
      <Rect
        ref="rectangle"
        x={this.state.x}
        y={this.state.y}
        width={400 / 5}
        height={400 / 5}
        fill="red"
        draggable
        onDragStart={() => {
          console.log("hi");
        }}
        onDragEnd={() => {
          var rectangle = this.refs.rectangle,
              layer = this.refs.layer
          rectangle.position({ x: 0, y: 0 });
          layer.draw()
        }}
      />
    </Layer>
</Stage>

还创建了一个代码沙箱供您参考 https://codesandbox.io/s/set-rectangle-back-to-original-position-on-drag-end-kg9bg

在React + Konva中拖动后如何将<Rect />元素返回到原始位置

1 个答案: