0

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

1 回答 1

0

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

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

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

this.setState({ canvas })

并将该画布/织物对象检索bringToFront为

var {canvas } = this.state

这应该可以解决问题。链接到更新的代码框工作示例

于 2020-10-01T05:37:26.507 回答