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

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

感谢您的帮助。 谢谢。

我稍微修改了一下，从

组中创建了符号，它可以工作：

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

var path=newpath.Star（新点（0,0,6,5,13））；
path.style={
fillColor:'白色'，
strokeColor:“黑色”
};
var c=新路径圆（新点（0,0,5）；
c、 fillColor='红色'；
var g=新组（）；
g、 addChild（路径）；
g、 addChild（c）；
//从路径创建符号定义：
var定义=新符号定义（g）；
//放置100个符号定义实例：
对于（变量i=0；i<100；i++）{
//在项目中放置符号定义的实例：
var instance=definition.place（）；
//将实例移动到视图中的任意位置：
instance.position=Point.random（）*view.size；
//将实例旋转一个随机量（介于
//0和360度：
instance.rotate（Math.random（）*360）；
//在0.25和1之间缩放实例：
scale（0.25+Math.random（）*0.75）；
}

工作草图

请注意，您也可以将
分组
并使用生成的图像；您可以将这些图像放在画布顶部的一个div中，并使用css（或webgl；-）移动它们。
我稍微修改了一下，从
组中创建符号，它可以工作：

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

var path=newpath.Star（新点（0,0,6,5,13））；
path.style={
fillColor:'白色'，
strokeColor:“黑色”
};
var c=新路径圆（新点（0,0,5）；
c、 fillColor='红色'；
var g=新组（）；
g、 addChild（路径）；
g、 addChild（c）；
//从路径创建符号定义：
var定义=新符号定义（g）；
//放置100个符号定义实例：
对于（变量i=0；i<100；i++）{
//在项目中放置符号定义的实例：
var instance=definition.place（）；
//将实例移动到视图中的任意位置：
instance.position=Point.random（）*view.size；
//将实例旋转一个随机量（介于
//0和360度：
instance.rotate（Math.random（）*360）；
//在0.25和1之间缩放实例：
scale（0.25+Math.random（）*0.75）；
}

工作草图

请注意，您也可以将
分组
并使用生成的图像；您可以将这些图像放在画布顶部的一个div中，并使用css（或webgl；-）移动它们。
这很有效！非常感谢。我甚至不知道符号定义的存在。。。有没有一种方法可以给这些符号一些属性，这些属性对我的代码有帮助？比如速度之类的？您可以使用该属性来存储自定义属性。如果你喜欢这个答案，你可以投赞成票；-）我的名声还不足以推翻任何东西，但我确实把你的回答记下来了！再次感谢你，成功了！非常感谢。我甚至不知道符号定义的存在。。。有没有一种方法可以给这些符号一些属性，这些属性对我的代码有帮助？比如速度之类的？您可以使用该属性来存储自定义属性。如果你喜欢这个答案，你可以投赞成票；-）我的名声还不足以推翻任何东西，但我确实把你的回答记下来了！再次感谢。