React - Fabric Js getActiveObject не работает

Question

Я новичок в React с Fabric Js. Я просто попытался установить текущий активный образ. Моя проблема после выбора настройкиgetActiveObject()изображение на холсте станет белым. Я пробовал использовать несколько методов, но не могу найти решение.

Демо-ссылка: https://o8n8h.csb.app/Codesandbix Ссылка: https://codesandbox.io/s/eloquent-platform-o8n8h?file=/src/App.js

Вот мой пример кода

import React, { Component } from "react";
import { fabric } from "fabric";
export default class App extends Component {
  componentDidMount() {
    this.clg();
  }
  clg = () => {
    var canvas = new fabric.Canvas("a");
    canvas.add(
      new fabric.Rect({
        left: 50,
        top: 50,
        height: 50,
        width: 50,
        fill: "red"
      })
    );
    canvas.add(
      new fabric.Rect({
        left: 70,
        top: 70,
        height: 50,
        width: 50,
        fill: "green"
      })
    );
    canvas.add(
      new fabric.Rect({
        left: 90,
        top: 90,
        height: 50,
        width: 50,
        fill: "blue"
      })
    );
    canvas.renderAll();
  };
  bringToFront = () => {
    var canvas = new fabric.Canvas("a");
    var activeObj = canvas.getActiveObject();
    activeObj &&
      canvas
        .bringToFront(activeObj)
        .discardActiveObject(activeObj)
        .renderAll();
  };
  render() {
    return (
      <div>
        <canvas id="a" width="200" height="200" />
        <button onClick={this.bringToFront}>Bring to front</button>
      </div>
    );
  }
}

Answer 1

Первоначально вы должны инициировать объект ткани с опцией {preserveObjectStacking: true}так что наложение активов сохраняется. например,

clg = () => { var canvas = new fabric.Canvas("a", { preserveObjectStacking:true }); ...

в bringToFrontФункция обработчика щелчков вы получаете новый объект ткани вместо использования старого объекта ткани. Что вы можете сделать, так это сохранить объект ткани в состоянии внутри this.clg функция в конце

this.setState({ canvas })

и получить этот объект холста / ткани в bringToFront в виде

var {canvas } = this.state

Это должно помочь. Ссылка на обновленные коды и ящик Рабочий пример