5

私は Paper.js を使用して、画像に描画したり、テキストを追加したりしています。次に、画像のすべてのスケッチを取得して、すべてをサーバーに送り返す必要があります。具体的には、パスのラスタライズに問題があります。私は使用しようとしています

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

しかし、画像でこれを行うと、線がラスタライズされません。私はで終わる

data:,

「data:image/png;base64」のようなプレフィックスが付いた base64 でエンコードされた画像の代わりに。これは、私がこれを機能させている Paper.jsスケッチです。使用するには、子猫の周りを数回クリックして、数本の線を描きます。2 本の線ができたら、新しいウィンドウが開き、ラスタライズされた画像と、描いた赤い線が表示されます。

スケッチでは機能しますが、自分のコードでは機能しません。

描画を管理する 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の追加には機能しますが、Path の追加には機能しません。どうしてこれなの？スケッチとは対照的に、私のコードの何が問題になっていますか?

4

1 に答える 1

1

あなたはあなたの問題について間違っていると思います。おそらく、ユーザーがクリックしたポイントを保存し、そのデータをサーバーに送り返す方がよいでしょう。ポイントは常に直線を形成します。ネットワークアクセスも少し最適化します。

于 2015-10-23T22:50:23.153 に答える