Javascript Paper.js光栅化层失败
我正在使用Paper.js在图像上画图、添加文本等。然后我需要在图像上绘制所有草图,并将其全部发送回服务器。具体来说,我在路径光栅化方面遇到了问题。我正在尝试使用Javascript Paper.js光栅化层失败,javascript,raster,paperjs,rasterizing,Javascript,Raster,Paperjs,Rasterizing,我正在使用Paper.js在图像上画图、添加文本等。然后我需要在图像上绘制所有草图,并将其全部发送回服务器。具体来说,我在路径光栅化方面遇到了问题。我正在尝试使用 paper.project.layers[0].rasterize(); 但是,当我在图像上这样做时,我不会使线条光栅化。我最终得到了 data:, 而不是以“data:image/png;base64”为前缀的base64编码图像。这是一个Paper.js,我在这里工作。要使用它,请在小猫周围单击几次以绘制几条线。有两条线后,将
paper.project.layers[0].rasterize();
但是,当我在图像上这样做时,我不会使线条光栅化。我最终得到了
data:,
而不是以“data:image/png;base64”为前缀的base64编码图像。这是一个Paper.js,我在这里工作。要使用它,请在小猫周围单击几次以绘制几条线。有两条线后,将打开一个新窗口,显示带有您绘制的红线的光栅化图像
它在草图中有效,但在我自己的代码中无效
下面是我的React类,它管理图形:
var DrawingTools = React.createClass({
componentDidUpdate: function() {
// Initial path object, will be reset for new paths after Alt is released
var path = this.newPath();
// On mousedown add point to start from
paper.project.layers[0].on('mousedown', function(event) {
if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
if(path.lastSegment == null) {
path.add(event.point, event.point);
} else {
path.add(path.lastSegment.point, path.lastSegment.point)
}
}
});
// On mousedrag add points to path
paper.project.layers[0].on('mousedrag', function(event) {
if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
if(event.event.shiftKey) { // Use shift key for freeform
path.add(event.point);
} else { // Default of straight line added to path
path.lastSegment.point = event.point;
}
}
}.bind(this));
// Each time Alt comes up, start a new path
var tool = new paper.Tool();
tool.onKeyUp = function(event) {
if(event.key == "option") {
path.onMouseEnter = this.props.movableEvents.showSelected;
path.onMouseDrag = this.props.movableEvents.dragItem;
path.onMouseLeave = this.props.movableEvents.hideSelected;
// Start a new path
path = this.newPath();
}
}.bind(this);
},
newPath: function() {
var path = new paper.Path();
path.strokeColor = 'black';
path.strokeWidth = 10;
return path;
},
render: function() {
// Someday colors will go here, or thickness controls, etc.
return (
<div>
</div>
);
}
});
module.exports = DrawingTools;
因此,光栅化可以用于添加,但不能用于路径。为什么会这样?与草图相比,我的代码有什么问题?我认为您的问题处理得不对。也许更好的方法是保存用户单击的点,然后将数据发送回服务器,您知道它们将始终形成直线。也稍微优化了网络访问 如果有更多的上下文,我很乐意看一看,但不清楚DrawingTools是如何使用的。在发布的代码中唯一值得注意的是呈现函数是语法错误。
var layerAsRaster = paper.project.layers[0].rasterize(); // TODO flatten layers when have multiple layers // Layer to Paper.js Raster object
var dataString = layerAsRaster.toDataURL();
console.log(dataString);