Paperjsの複数のパスからシンボルを作成

Question

これでpaperjsに何かを描こうとしていますが、その形状は単なる正方形や円よりも少し複雑です。

var path_tank_left_track = new Path({ 
    segments: [[0,0], [10, 0], [10,40], [0,40]], strokeColor: 'black', 
    closed: true 
}); 
var path_tank_right_track = new Path({ 
    segments: [[40,0], [50, 0], [50,40], [40,40]], strokeColor: 'black', 
    closed: true 
}); 

var path_tank_body = new Path({ 
    segments: [[10,5], [40,5], [40,35], [10,35]], strokeColor: 'black', 
    closed: true 
}); 

var path_tank_gun = new Path({ 
    segments: [[23,15], [23,0], [27, 0], [27, 15]], 
    strokeColor: 'black', 
    pivot: [25,15], 
    name: 'gun' 
}); 

これは小さなタンクを行い、変更を容易にするため、私はこのようなグループにこれらのパスのすべてをグループ化：私は一つだけのタンクをしたい場合は正常に動作します

var whole_tank = new Group(path_tank_left_track, path_tank_body, 
    path_tank_right_track, path_tank_gun); 

。しかし、私はより多くのタンクを作り、相互に相互作用させたいと思っています。

パスを別のオブジェクトに配置し、別の場所に配置しようとしました。それはうまくいかなかった。

私は記号のことを聞いたが、引数としてグループを取るようには見えません。

var sym = Symbol(whole_tank); 

が正しく倍数パスのインスタンスを作成する方法はありますか？または、タンクの各部分ごとにシンボルを作成してグループ化する必要がありますか？

何か助けていただければ幸いです。 ありがとうございます。

Answer 1

私は少しGroupからシンボルを作成するpaper.js documentation about SymbolDefintionを修正し、それが動作します：

var path = new Path.Star(new Point(0, 0), 6, 5, 13); 
path.style = { 
    fillColor: 'white', 
    strokeColor: 'black' 
}; 

var c = new Path.Circle(new Point(0, 0), 5); 
c.fillColor = 'red'; 

var g = new Group(); 
g.addChild(path); 
g.addChild(c); 

// Create a symbol definition from the path: 
var definition = new SymbolDefinition(g); 

// Place 100 instances of the symbol definition: 
for (var i = 0; i < 100; i++) { 
    // Place an instance of the symbol definition in the project: 
    var instance = definition.place(); 

    // Move the instance to a random position within the view: 
    instance.position = Point.random() * view.size; 

    // Rotate the instance by a random amount between 
    // 0 and 360 degrees: 
    instance.rotate(Math.random() * 360); 

    // Scale the instance between 0.25 and 1: 
    instance.scale(0.25 + Math.random() * 0.75); 
} 

スケッチhere作業。

rasterizeGroupもあります。結果の画像を使用してください。それらの画像をキャンバスの上のdivに入れて、CSS（またはwebgl ;-)）で移動させることができます。