Réagissez: Interagissez avec l'instance de canvas fabric.js d'un autre composant

Question

J'essaie de créer une interface utilisateur pour interagir avec un canvas fabric. Sur la gauche sera un composant qui affiche une bibliothèque d'éléments qui peuvent être ajoutés à la toile. Au milieu sera le canvas fabric, et sur la droite sera un composant qui liste tous les éléments ajoutés qui sont sur le canevas (similaire au panneau couches de photoshops).

Je veux savoir comment je peux avoir un événement onClick dans le composant sur la gauche (ItemsList.js), accéder à l'instance de toile fabricjs qui est déclarée dans son composant parent.

C'est le composant principal ...

MainComponent.js

import React, { Component } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 

import ItemsList from './ItemsList.js'; 
import LayersPanel from './LayersPanel.js'; 

import {fabric} from 'fabric'; 

class Designer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     canvasWidth: '' 
    }; 
    } 

    updateCanvasDimensions() { 
    this.setState({ 
     canvasWidth: this.refs.canvas_wrapper.offsetWidth 
    }); 
    canvas.setHeight(this.state.canvasWidth); 
    canvas.setWidth(this.state.canvasWidth); 
    } 

    componentDidMount() { 
    canvas = new fabric.Canvas('c', { 
     width: this.refs.canvas_wrapper.offsetWidth, 
     height: this.refs.canvas_wrapper.offsetWidth 
    }); 
    this.updateCanvasDimensions(canvas); 
    window.addEventListener("resize", this.updateCanvasDimensions.bind(this)); 
    canvas.renderAll(); 
    } 

    componentWillUnmount() { 
    window.removeEventListener("resize", this.updateCanvasDimensions.bind(this)); 
    } 

    render() { 
    return (
     <div> 

      <div> 
      <ItemsList /> 
      </div> 

      <div className="canvas-wrapper" ref="canvas_wrapper"> 
      <canvas ref="c" id = "c"></canvas> 
      </div> 

      <div> 
      <LayersPanel /> 
      </div> 

     </div> 
    ); 
    } 
} 

export default createContainer(({ params }) => { 

    return { 
    }; 

}, Designer); 

Quelque part dans ItemsList.js, pour chaque élément de la liste, il y a un bouton pour ajouter de l'élément image sur la toile.

... 
<Button onClick={() => { 

    //Need to get the canvas instance here so 
    //that I can add this particular item's image to the canvas like this... 

    canvas.add(rowData.image); 

}}>Add Item</Button> 
... 

Après cliqué sur ce bouton pour un élément particulier dans le composant ÉlémentsGroupe, je veux l'image de l'élément clicked à ajouter à la toile qui est déclarée dans un des composants jusqu'à l'arbre. Par exemple ...

<MainComponent> <-- This is where I declare the fabric canvas. 
    <ItemsList> 
    <Item/> <-- This is where the button is clicked. 
    </ItemsList> 
</MainComponent> 

Comment puis-je accéder à l'instance de la toile à l'intérieur <Item/>?

Dans le cas où il est pertinent à la réponse, en même temps, j'ai besoin également du composant sur la droite (<LayersPanel/>) pour afficher ce qui est ajouté à la toile.

Merci

Answer 1

j'ai réussi à le faire avec les éléments suivants ...

Créer la toile ...

<canvas ref="c" id = "c"></canvas> 

ramasser partout (aussi longtemps qu'il a chargé bien sûr) ...

canvas = document.getElementById("c").fabric;