Question

所以我现在正在使用react-redux创建一个应用程序。

问题是，我正在做的事情比我研究的例子还要复杂，而且我不知道如何使我的互动。从以前的一些作品中，在组件内部使用了react canvas组件。看起来像这样：

  render() {
    return (
        <canvas
          id={this.props.GIFcanvasId}
          height={this.state.height}
          width={this.state.width}
          style={{ display: "none" }}
        />
        <canvas
          id={this.props.backgroundImageCanvasId}
          height={this.state.height}
          width={this.state.width}
        />
        <canvas
          id={this.props.id} //store.getState().canvasReducer.present.get("canvasId")
          touchstart={this.props.onMouseDown}
          touchend={this.props.onMouseUp}
          touchmove={this.props.onMouseMove}
          onTouchStart={this.props.onMouseDown}
          onTouchEnd={this.props.onMouseUp}
          onTouchMove={this.props.onMouseMove}
          onMouseDown={this.props.onMouseDown}
          onMouseUp={this.props.onMouseUp}
          height={this.state.height}
          width={this.state.width}
          onMouseMove={this.props.onMouseMove}
          onScroll={this.props.onScroll}
          onWheel={this.props.onScroll}
        />
        <div id= {this.props.shapeCanvasId}>
          <ShapeCanvas  
            onTouchMove={this.props.onMouseMove}
            onMouseDown={this.props.onMouseDown}
            height={this.state.height}
            width={this.state.width} />
        </div>
      </div>
    );
  }

我创建的另一个组件是ShapeCanvas，其结构与链接How to make friends Fabric.js and Redux?

中的FabricCanvasReduxed相同。

以前，属性为id = {this.props.id}的画布是其他所有对象之上的画布（z索引大于其他所有对象）。而且由于ShapeCanvas是较低的一层，因此fabric.js中的所有鼠标交互都将不起作用（因为根本没有碰到它）。

我无法将其他画布合并到fabric.js画布中。因此，我正在尝试与织物画布中的对象进行交互的另一种方法：模拟鼠标事件，我引用了以下内容： How do i trigger mouse events in fabric.js to simulate mouse actions?

我通过此参考创建的代码：

// create an event. I used immutable.js, UndoRedo.js so you can see how I get the canvasId. It doesn't matter here. It is correct.
document.querySelector(store.getState().canvasReducer.present.get("canvasId")).onclick = function() {
  var evt = new MouseEvent("click", {
    clientX: 15,
    clientY: 15
  });
  // dispatch an event. 
  document.getElementById(store.getState().canvasReducer.present.get('shapeCanvas')).querySelector(".upper-canvas")).dispatch(evt)
}

它不起作用。我想要的是，使fabric.js画布与其他香草画布一起使用，而fabric.js画布位于较低层。有什么好办法吗？

有关此问题的更新：

绕过此问题的一种愚蠢的方法是将此织物画布设置在其他所有对象之上。您仍然可以调用函数来更改其他画布。

我找不到一种很好的方法来做到这一点。看来这不适合我的项目。

有没有一种方法可以同时使用fabric.js画布和香草画布以及如何使用redux

0 个答案: