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

如果我只想要一个坦克，那很好用。但是我想做更多的坦克，让他们互相交流。

我尝试将路径放入它自己的对象中并将它们放在其他地方。那没有用。

我听说过 Symbols，但它似乎没有将 Groups 作为参数：

var sym = Symbol(whole_tank);

有没有办法正确创建多个路径的实例？或者我应该为坦克的每个部分创建一个符号，然后将它们组合在一起？

感谢任何帮助。谢谢。

Answer 1

我稍微修改了 paper.js documentation about SymbolDefintion 以从 Group 创建符号并且它有效：

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.

请注意，您也可以 rasterize 您的 Group 并使用生成的图像；您可以将这些图像放在 canvas 顶部的 div 中，然后使用 css （或 webgl ;-) ）移动它们。

从 Paperjs 中的多个路径创建符号

Create symbol from more than one path in Paperjs

javascript

paperjs