我正在尝试将js集成到与paperjs画布的合作中。以下是设置paperjs&的代码。 togetherjs(作为window
中的全局对象添加)
componentDidMount() {
this.canvas = ReactDOM.findDOMNode(this.refs.canvasContainer);
this.paper = new paperjs.PaperScope();
this.paper.setup(this.canvas);
this.view = this.paper.view;
this.tool = new this.paper.Tool();
this.tool.minDistance = 5;
this.tool.onMouseDown = this.onMouseDown;
this.tool.onMouseDrag = this.onDrag;
this.tool.onMouseUp = this.onMouseUp;
this.raster = new this.paper.Raster({
source: null,
position: this.view.center
});
this.raster.scale(0.4);
this.raster.size = this.paper.view.size;
this.view.draw();
this.project = this.paper.project;
this.drawingLayer = new this.paper.Layer();
this.drawingLayer.activate();
}
togetherjs
个事件在构造函数中添加如下,
window.TogetherJS.hub.on('draw', this.collabDraw);
window.TogetherJS.hub.on('drawstart', this.collabDrawStart);
window.TogetherJS.hub.on('drawend', this.collabDrawFinish);
但是,在启用协作模式时,新路径的绘制不起作用。属性this.colabPath
是保存从对等方发送的路径数据的属性,并作为事件触发,drawstart
,draw
和drawend
(如上所示)
setCollabUserName() {
return this.props.profileName;
}
newCollabPathStart(point, width, color) {
this.collabPath = new this.paper.Path();
this.collabPath.strokeWidth = width;
this.collabPath.strokeColor = color;
this.collabPath.add(point);
this.pathArray.push(this.collabPath);
return;
}
newCollabPathDraw(point) {
this.collabPath.add(point);
return;
}
newCollabPathFinish() {
this.collabPath.simplify();
return;
}
collabDrawStart(msg) {
if (!msg.sameUrl) {
return;
}
this.newCollabPathStart(msg.point, msg.color, msg.width);
this.view.draw();
return;
}
collabDraw(msg) {
if (!msg.sameUrl) {
return;
}
this.newCollabPathDraw(msg.point);
this.view.draw();
return;
}
collabDrawFinish(msg) {
if (!msg.sameUrl) {
return;
}
this.newCollabPathFinish(msg.event);
this.view.draw();
return;
}
onMouseUp(event) {
event.preventDefault();
if (!this.props.panStatus) {
this.path.simplify();
if (window.TogetherJS.running) {
window.TogetherJS.send({
type: 'drawend'
});
}
} else {
// check for collab status
this.canvas.style.cursor = 'grab';
this.canvas.style.cursor = '-moz-grab';
this.canvas.style.cursor = '-webkit-grab';
this.lastX = event.point.x;
this.lastY = event.point.y;
}
this.view.draw();
threedrUtils.exportJSON(this.project.activeLayer).then(
(jsonString) => {
this.props.addAnnotation(jsonString);
}
);
}
onMouseDown(event) {
event.preventDefault();
if (this.props.importAnnotation) {
this.project.activeLayer.clear();
this.props.clearImport(null);
}
if (!this.props.isStrokeOpen) {
this.props.toggleStrokeWindow();
}
if (!this.props.panStatus) {
this.canvas.style.cursor = 'default';
this.path = new this.paper.Path();
this.path.strokeWidth = this.props.strokeWidth;
this.path.strokeColor = this.props.strokeColor;
this.path.add(event.point);
this.pathArray.push(this.path);
if (window.TogetherJS.running) {
window.TogetherJS.send({
type: 'drawstart',
point: event.point,
color: this.props.strokeColor,
width: this.props.strokeWidth
});
}
} else {
// check for collab status
this.canvas.style.cursor = 'grab';
this.canvas.style.cursor = '-moz-grab';
this.canvas.style.cursor = '-webkit-grab';
this.lastX = event.point.x;
this.lastY = event.point.y;
}
this.view.draw();
}
onDrag(event) {
event.preventDefault();
if (!this.props.panStatus) {
this.path.add(event.point);
if (window.TogetherJS.running) {
window.TogetherJS.send({
type: 'draw',
point: event.point
});
}
} else {
// check collab status
event.tool.minDistance = 1;
this.canvas.style.cursor = 'grabbing';
this.canvas.style.cursor = '-moz-grabbing';
this.canvas.style.cursor = '-webkit-grabbing';
const deltax = this.lastX - Math.ceil(event.point.x);
const deltay = this.lastY - Math.ceil(event.point.y);
this.project.view.scrollBy(deltax, deltay);
}
this.view.draw();
}
这是很多代码,但我无法解释这个问题:|