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，但似乎并没有将群体作为一个论点：

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并使用生成的图片;你可以将这些图像放在画布顶部的div中，并用css（或webgl ;-)）移动它们。

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

1 个答案: