0

我正在使用 Konva 构建某种图像编辑器。我有一个菜单，可以在其中选择图像并将其添加到舞台上。它工作正常，直到我添加了添加多个图像的可能性。

发布代码对于任何人来说都是非常耗时的阅读，但如果有人遇到同样的问题，......

当一个元素被选中时，一个函数将一个变量 'active' 设置为 true。在再次选择相同的元素时，“活动”将设置为 false。这完美地工作，当我通过单击它周围的任何地方将元素的“活动”变量设置为 false 时，就会出现问题。

它过去只是简单地被取消选择并留在原位，但现在当我从外部取消选择它时，整个元素变得不可见。我在每个元素上也有一个“可见”属性，但它设置为 true，并且在此过程中不会改变。

1.元素onClick功能：

    onClick(){

      if (this.props.ElementReducer.element === null){
         // console.log("There is no element selected || I´m getting selected");
        this.setState({
          active: true
        });
        this.props.selectedElement(this.state);
      }else{
        if (this.props.ElementReducer.element.identity == this.state.identity){
          // console.log("I am already selected || I´m getting deselected");             
          this.setState({
            active: false
          });
          this.props.unSelectedElement();
        }else{
          // console.log("Something else is selected || I´m getting selected");                        
          this.props.prepareToUnSelectElement();
          setTimeout(()=> {
            this.props.unSelectedElement();
            this.setState({
              active: true
            });
            this.props.selectedElement(this.state);
          },10);
        }
      }
    }

2.外部取消选择功能：

    deselectElement() {
      if (this.props.ElementReducer.selectedId !== -1) {
        this.props.prepareToUnSelectElement();
        setTimeout(this.props.unSelectedElement, 100);
      }
    }

现在，即使它们中的任何一个都在更改元素的任何其他属性，并且没有调用其他函数，但我不明白为什么元素在取消选择时变得不可见。

任何想法或意见都受到好评，谢谢。

为了清楚起见，'2。外部取消选择函数”调用另一个组件中的几个函数，这些函数与“1. 元素 onClick 功能'。将 active 属性设置为 false，然后从元素的 edition reducer 文件中删除该元素。

4

1 回答 1

0

我认为问题在于 Konva.image 组件在创建时需要一个图像节点来引用。当从舞台上取消选择图像时，初始图像节点所在的 React.Component 将不会渲染，直到再次选择 Konva.image，因此 Konva.image 失去了要显示的图像的引用它消失了。

这就是为什么组件本身仍然在舞台上，但是直到再次选择 Konva.image 才显示图像。

在重新渲染引用的 Image 节点不会重新渲染的组件之前，我只是保存了 Konva.image 状态。我希望它足够清楚。

谢谢您的帮助。

于 2018-10-31T16:10:30.600 回答