Paper.jsラスタライズレイヤーが失敗する

Question

私はPaper.jsを使用してイメージの描画、テキストの追加などを行っています。イメージをスケッチしてすべてをサーバーに戻す必要があります。具体的には、パスのラスタライズに問題があります。私は

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

を使用しようとしていますが、私は画像でこれを行うとき、私はラスタライズする行が届きません。 「：;、base64で画像/ PNGデータ」私の代わりのようなものが付いてbase64でエンコードされた画像の

data:, 

で終わります。ここにPaper.js sketchがあります。それを使用するには、キティの周りを数回クリックして、数行を描きます。 2つの線があると、新しいウィンドウが開き、描いた赤い線でラスターイメージが表示されます。

スケッチでは動作しますが、自分のコードでは動作しません。しかしないパスの、

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を追加するために動作します：

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; 

そして、ここでは、ラスタライズを行うコードです：

は、ここに私の図面を管理するクラスを反応させるのです。どうしてこれなの？スケッチとは対照的に私のコードで何が問題になっていますか？

Answer 1

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