Question

我正在用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，然后从元素的简化版文件中删除该元素。

Answer 1

我认为问题在于，由于Konva.image组件在创建图像时需要引用图像节点。当从舞台上取消选择图像时，在再次选择Konva.image之前，不会渲染原始图像节点所在的React.Component，因此Konva.image丢失了该图像的引用以在其中显示它消失了。

这就是为什么组件本身仍处于舞台中，但是直到再次选择Konva.image才显示图像的原因。

我只保存了Konva.image状态，然后重新渲染组件，其中引用的Image节点将不会重新渲染。我希望这很清楚。

感谢您的帮助。

Konva图像元素消失了

1 个答案: