反应：与来自另一个组件的fabric.js画布实例进行交互

我正在尝试创建一个用户界面来与fabricjs画布进行交互。左边是一个组件，显示可以添加到画布的项目库。中间是fabricjs画布，右侧是一个组件，列出画布上所有添加的项目（类似于photoshops图层面板）。反应：与来自另一个组件的fabric.js画布实例进行交互

我想知道如何在左边的组件（ItemsList.js）中有一个onClick事件，可以访问在其父组件中声明的fabricjs画布实例。

这是最主要的成分......

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

某处内ItemsList.js，对名单上的每一个项目，有一个按钮来添加项目的图像到画布。

... 
<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> 
...

单击此按钮在ItemsList份的特定项目后，我想被点击项目的形象将被添加到在一个组件上树宣布画布。例如...

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

如何从<Item/>中访问画布实例？

在情况下，它相关的答案，同时，我还需要在右边（<LayersPanel/>）的组件来显示什么是添加到画布。

感谢

来源

2017-10-07 Serks

我设法用下面的做到这一点...

创建画布...

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

从任何地方（只要把它捡起来，因为它已经加载当然）...

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

来源

2017-11-07 22:57:13 Serks

反应：与来自另一个组件的fabric.js画布实例进行交互

回答

相关问题