Question

Fabric.js是一个框架，该框架允许将画布用于各种事物，例如自由手绘，SVG编辑，添加文本扩展。

当我想创建一个使用Fabric来实现画布功能的应用程序时，我陷入了React原理，即向下传递道具并提升状态。

通常我想创建一个组件，为画布提供初始化面料的功能，如下所示：

componentDidMount() {

    this.theCanvas = new fabric.Canvas('main-canvas', {
        preserveObjectStacking: true
    })
}

一些局部变量被分配了一个fabric.Canvas对象，它是在应用程序中安装了id =“ main-canvas”的画布之后。

render() {

    return (
        <React.Fragment>
            <div id="canvas-container">
                <canvas style={{border: 'solid 1px #555'}} id='main-canvas' />
            </div>
        </React.Fragment>
    );

此外，我还将构造一些UI元素，例如工具栏，工具设置，导出按钮，撤消/重做等。

示例性的绘制按钮，用于切换画布的drawMode。

render() {
    return(
        <Button
            onClick={this.props.toggleDraw}
            style={{
                backgroundColor: this.props.drawMode ? 'red' : 'blue'
            }}
        >
            Freehand
        </Button>
    );
}

现在的问题是，需要告知Fabric将此drawMode设置为true或设置为false时被禁用：

    this.the_canvas.isDrawingMode = this.props.drawMode;

the_canvas.isDrawingMode将当前Fabric画布对象（存在于Fabric组件中）设置为图形。

现在，我想知道如何以最佳方式进行组织。

我可以摆脱Fabric组件，并在Root组件（这里是App.js）中对其进行初始化。工具栏组件可以将状态一直传递到App.js并在那里切换设置。我不希望这样做，因为这会使整个应用程序模块化程度降低。
使用Redux，MobX或React.Context之类的商店来提供全局状态，以便每个工具栏元素都可以直接访问Canvas。
我可以从Fabric中完全删除结构.Canvas初始化完全是通过React UI并以传统方式将其直接包含到HTML根文件中，然后在UI元素中构造包装函数。

为了概括我的问题，由于这个问题不仅限于Fabric.Js，而且在任何情况下我都想使用在React应用程序中提供外部功能的库，在这里使用的最佳实践是什么？ / p>

有一些将模块提供到我的应用程序中的React模块，但是我发现的所有内容（例如在类似问题中建议的“ react-fabricjs”）都已经使用了几年并且不再维护，所以我不想使用它们完全没有。

Answer 1

似乎现在有了official package的布料，而kangax是其中的合作者之一。

从文档中

安装凉亭

$ bower install fabric

使用npm安装

要使用npm安装Fabric.js，必须首先在系统上手动安装Cairo 。 Cairo是一个系统库，可为Fabric.js所依赖的节点画布提供支持。安装完成后，您可能需要在安装结构之前重新启动终端或命令提示符。

$ npm install fabric --save

如何在React中使用Fabric.js之类的东西？

1 个答案: