Есть ли способ использовать fabric.js canvas и vanilla canvas вместе и как это сделать с помощью redux? - PullRequest
Новая
       5

Есть ли способ использовать fabric.js canvas и vanilla canvas вместе и как это сделать с помощью redux?

0 голосов
/ 30 сентября 2019

Итак, я сейчас создаю приложение, использующее Reaction-Redux.

Проблема в том, что я делаю что-то более сложное, чем примеры, которые я изучаю, и я не знаю, как сделать мой интерактивный. Из некоторых предыдущих работ компонент компонент 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, который имеет ту же структуру, что и FabricCanvasReduxed по ссылке: Как подружить Fabric.js и Redux?

Ранее холст со свойством id = {this.props.id} - это холст поверх всех остальных (z-индекс больше, чем у всех остальных). А поскольку ShapeCanvas является нижним уровнем, все взаимодействия с мышью в fabric.js не будут работать (потому что он вообще не затрагивается).

Я не могу объединить другое полотно с полотном fabric.js. Поэтому я пробовал другой способ взаимодействия с объектами на полотне ткани: имитировать событие мыши, я ссылался на это: Как мне запускать события мыши в fabric.js для имитации действий мыши?

Код, который я создал по этой ссылке: 

// 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)
}

Не работает. Я хочу, чтобы canvas.js работал вместе с другими ванильными холстами, в то время как canvas.js находится на нижнем уровне. Есть ли хороший способ сделать это?

Обновление по этому вопросу:

Глупый способ обойти эту проблему - поставить этот холст из ткани поверх всех остальных. Вы все еще можете вызывать функции для смены других полотен.

Я не могу найти хороший способ сделать это. И кажется, что это не устраивает мой проект.

...