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不是paper-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中执行转换

1 个答案: