javascript - Preact 和 FabricJS

Question

我开始使用 preact 开发一个应用程序，我想知道是否可以在 preact 中使用 FabricJS。有人可以帮我理解我该怎么做吗？

Answer 1

基本示例

为此，请将您的 Fabric 实例化放入 componentDidMount
@RishatMuhametshin

import { Component } from 'preact';
import { findDOMNode } from 'preact-compat';

class MyComponent extends Component {
    componentDidMount() {
        const self = findDOMNode(this); // Or just the canvas ID
        const canvas = new fabric.Canvas();

        // fabric initialize...
        canvas.initialize(self, { /* Canvas options */ });
    }
    render() {
       return ( <canvas id="myCanvas" /> )
    }
}

全局示例

//Somewhere else
const canvas = new fabric.Canvas(); 

// MyComponent.js
class MyComponent extends Component {
    componentDidMount() {

        //Initialize fabric js
        canvas.initialize("myCanvasId", { /* Canvas options */ });

        // fabric js stuff...
        const square = new canvas.Rect({
            fill: 'red',
            width: 50,
            height: 50
        });

        //Add object
        canvas.add(square);
    }
    render() {
       return ( 
           <div class={"myComponentClass"}>
               { /* your component content... */ }
               <canvas id="myCanvasId" />
           </div> 
       )
    }
}

你应该检查一下：我如何使用fabric-js和react？

Answer 2

我写这个包是为了我自己的需要。你可以试试

https://github.com/indatawetrust/preact-fabric