Konva 图像元素消失

Question

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

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

一个函数在选择元素时将变量 'active' 设置为 true。在相同的元素再次被选中时，'active' 将被设置为 false。这非常有效，当我通过单击元素周围的任意位置将元素的 'active' 变量设置为 false 时出现问题。

它过去只是被取消选择并留在原处，但现在当我从外部取消选择它时，整个元素变得不可见。我在每个元素上也有一个 'visible' 属性，但它被设置为 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 文件中删除元素。

Answer 1

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

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

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

感谢您的帮助。

Konva 图像元素消失

Konva Image Elements Disapearing

reactjs

konvajs

konvajs-reactjs

react-konva