反应 - Fabric Js getActiveObject 不工作答案

【问题标题】：React - Fabric Js getActiveObject not working反应 - Fabric Js getActiveObject 不工作
【发布时间】：2020-10-15 01:15:29
【问题描述】：

我是使用 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>
    );
  }
}

【问题讨论】：

标签： html reactjs canvas fabricjs react-canvas

【解决方案1】：

最初，您必须使用选项{preserveObjectStacking: true} 启动结构对象，以便保留资产堆叠。例如，

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

在bringToFront click 处理函数中，您将获得新的结构对象，而不是使用旧的结构对象。您可以做的是将织物对象保存在最后this.clg函数中的状态

this.setState({ canvas })

并在bringToFront 中检索该画布/织物对象

var {canvas } = this.state

这应该可以解决问题。链接到更新的代码框Working example

【讨论】：