Preact 和 FabricJS

Question

我开始使用 preact 开发应用程序，我想知道是否可以在 preact 中使用 FabricJS。有人可以帮助我了解如何执行此操作吗？

Answer 1

基本示例

To do that, place your Fabric instantiation into 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

Preact 和 FabricJS

Preact and FabricJS

html

javascript

fabricjs

preact

基本示例

全球范例