Preact и FabricJS

Question

Я начинаю работать над приложением, использующим preact, и я хотел бы знать, возможно ли использовать FabricJS в preact. Может кто-нибудь помочь мне понять, как я могу это сделать?

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 с реагировать?

Answer 2

Я написал этот пакет для своих собственных нужд. Ты можешь попробовать

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