反应:与来自另一个组件的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/>
)的组件来显示什么是添加到画布。
感谢
答
我设法用下面的做到这一点...
创建画布...
<canvas ref="c" id = "c"></canvas>
从任何地方(只要把它捡起来,因为它已经加载当然)...
canvas = document.getElementById("c").fabric;