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> 
       )
    }
}

您应该检查：How can I use fabric-js with react?

Answer 2

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

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