如何访问符号定义属性以在 paperjs 中执行转换

Question

我在围绕特定轴心点旋转符号时遇到问题。

这是我的代码：

    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 path_arena_separation = new Path(new Point(view.size.width/2,0),
    new Point(view.size.width/2, view.size.height));
    path_arena_separation.strokeColor = 'black';
    path_arena_separation.closed = true;

    var whole_tank = new Group();
    whole_tank.addChild(path_tank_left_track);
    whole tank.addChild(new Point(5,20)); // trying to add the middle of the left track pivot point
    whole_tank.addChild(path_tank_body);
    whole_tank.addChild(path_tank_right_track);
    whole tank.addChild(new Point(50,20)); // trying to add the middle of the right track pivot point
    whole_tank.addChild(path_tank_gun);

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

    var instance1 = definition.place();
    instance1.position = new Point(view.size.width/4, view.size.height/2);
    var instance2 = definition.place();
    instance2.position = new Point(3*view.size.width/4, view.size.height/2);

    function onFrame(event) {
      instance1.rotate(1, instance1.definition.item.children[1]);
    }

如您所见，在 onFrame 函数中，我试图围绕我之前创建的点每帧将实例旋转 1 度。但是我得到一个错误，说 item_remove 不是论文中的函数-full.js.

我很困惑，我试图用一个点创建一条路径并将其添加到组中，但它没有让我这样做。

如果我修改代码使枪在其枢轴上旋转，它确实有效：

function onFrame(event) {
  instance1.definition.item.children['gun'].rotate(1, instance1.definition.item.children['gun'].pivot);
}

枪确实围绕正确的枢轴旋转，并且即使符号四处移动，枢轴仍与符号相连。除了将整个水箱围绕相对于水箱中心的特定点转动之外，我如何才能实现这种行为？

感谢您的帮助，如果我应该包括更多细节，请告诉我。

Answer 1

您的代码崩溃是因为您尝试添加一个点（而不是您似乎尝试添加的包含单个点的路径）作为子组，这不是 API 所期望的。

要创建包含单个点的路径，您必须这样做：

var path = new Path(new Point(x,y));

但我认为添加单点路径作为子路径以便稍后检索其位置以将其用作轴心点的想法在您的情况下是错误的。
您将每个坦克创建为 Symbol 这一事实意味着您将无法访问其自己的子坦克。
相反，您可以在放置符号之前存储 2 个向量：一个从中心到左，一个从中心到右。他们稍后会帮助您计算左/右轨道位置。

这是根据您的代码改编的 Sketch，演示了这一点。

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 path_arena_separation         = new Path(new Point(view.size.width / 2, 0), new Point(view.size.width / 2, view.size.height));
path_arena_separation.strokeColor = 'black';
path_arena_separation.closed      = true;

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

// store vectors from bounds center to tracks middle points
var tankCenter       = whole_tank.bounds.center;
var leftTrackCenter  = new Point(5, 20);
var rightTrackCenter = new Point(50, 20);
var leftVector       = leftTrackCenter - tankCenter;
var rightVector      = rightTrackCenter - tankCenter;

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

var instance1      = definition.place();
instance1.position = new Point(view.size.width / 4, view.size.height / 2);
var instance2      = definition.place();
instance2.position = new Point(3 * view.size.width / 4, view.size.height / 2);

function onFrame(event)
{
    // calculate pivot point position
    // first we rotate vector accordingly to instance current rotation
    var rotatedVector = rightVector.rotate(instance1.rotation);
    // then we add it to current tank center
    var point = instance1.bounds.center + rotatedVector;

    // turn right
    instance1.rotate(1, point);
}

如何访问符号定义属性以在 paperjs 中执行转换

How to access symbol definition attributes to perform transformation in paperjs

paperjs