Paper.js栅格化图层失败。

Question

我正在使用Paper.js在图像上进行绘制、添加文本等操作。然后需要将所有的素描内容发送到服务器上。具体来说，我在路径光栅化方面遇到了一些问题。我尝试使用

paper.project.layers[0].rasterize();

但是当我试图对一张图片进行此操作时，它并没有被光栅化。最终我的结果是保留了原始格式的代码。

data:,

instead of a base64 encoded image prefixed with something like "data:image/png;base64,". Here's a Paper.js sketch where I have this working. To use it, click a few times around the kitty to draw a few lines. Once you have two lines, a new window should open showing the rasterized image with the red lines you drew.

它在草图中可行，但在我的代码中却不行。

这是我管理绘画的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;

这里是进行光栅化的代码：

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

因此，光栅化适用于添加PointTexts，但不适用于路径。为什么会这样？与示例代码相比，我的代码有什么问题？

- Scotty H

---

如果有更多的上下文，我很乐意去看一下，但是目前不清楚DrawingTools是如何使用的。在发布的代码中唯一显著的问题是render函数存在语法错误。 - bmacnaughton

Answer 1

我认为你解决问题的方式不正确。也许更好的方法是保存用户点击的点，然后将这些数据发送回服务器，因为你知道它们总是形成直线。这也可以优化网络访问。

- Nathan Bellowe