Créer un symbole à partir de plusieurs chemins dans Paperjs

Question

Donc, j'essaie de dessiner quelque chose dans paperjs mais la forme est un peu plus complexe que juste un carré ou un cercle.

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

Cela fait un petit réservoir, pour faciliter la modification, je regroupé les tous ces chemins dans un groupe comme celui-ci:

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

Cela fonctionne très bien si je veux un seul réservoir. Mais j'aimerais faire plus de chars et les faire interagir les uns avec les autres.

J'ai essayé de placer les chemins dans son propre objet et de les placer ailleurs. Cela n'a pas fonctionné.

J'ai entendu des symboles, mais il ne semble pas prendre des groupes comme argument:

var sym = Symbol(whole_tank); 

Y at-il un moyen de créer correctement les instances de chemins de multiples? Ou devrais-je créer un symbole pour chaque partie du réservoir, puis les regrouper?

Toute aide est appréciée. Merci.

Answer 1

I légèrement modifié paper.js documentation about SymbolDefintion pour créer des symboles d'un Group et il fonctionne:

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

travail esquisse here.

Notez que vous pouvez également rasterize votre Group et utiliser l'image résultante; vous pouvez mettre ces images dans un div sur le dessus de la toile et les déplacer avec css (ou webgl ;-)).