旋转和偏移动力学 js

Question

我好几天都在为一个问题苦苦挣扎

如果我拖动箭头附近的圆圈并调整整个箭头的大小，则旋转不会围绕正确的中心进行

我按下旋转按钮

有什么想法吗？

旋转应始终以绿色旋钮为中心

更新：http://jsfiddle.net/d9nAq/2/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var anchor1 = new Kinetic.Circle({
    x: 50,
    y: 50,
    radius: 10,
    fill: "blue",
    draggable: true
});
anchor1.on("dragmove", function () {
    connector.repoint();
});
layer.add(anchor1);

var anchor2 = new Kinetic.Circle({
    x: 200,
    y: 75,
    radius: 10,
    fill: "green",
    draggable: true
});
anchor2.on("dragmove", function () {
    connector.repoint();
});
layer.add(anchor2);

var connector = new Kinetic.Polygon({
    points: [],
    strokeWidth: 1,
    fill: "red",
});
connector.arrowHeight = 12;
connector.arrowWidth = 16;
connector.anchorRadius = 5;
connector.repoint = function () {
    var x1 = anchor1.getX();
    var y1 = anchor1.getY();
    var r1 = anchor2.getRadius();
    var r2 = anchor2.getRadius();
    var dx = anchor2.getX() - x1;
    var dy = anchor2.getY() - y1;
    var lineLength = Math.sqrt(dx * dx + dy * dy) - r2 - this.arrowWidth;
    var angle = Math.atan2(dy, dx);
    var points = [];
    points.push(r1, 0);
    points.push(lineLength, 0);
    points.push(lineLength, -this.arrowHeight / 2);
    points.push(lineLength + this.arrowWidth, 0);
    points.push(lineLength, this.arrowHeight / 2);
    points.push(lineLength, 0);
    points.push(r1, 0);
    this.setPoints(points);
    this.setPosition(x1, y1);
    this.setRotation(angle);
    layer.draw();
}
layer.add(connector);
connector.repoint();

document.getElementById('P10005_ROTATE_RIGHT').addEventListener('click', function() {


          var arrow = layer;

        var deg = arrow.getRotationDeg();


        arrow.setRotationDeg(deg+15);


      // arrow.setPosition([arrowx-xoff,arrowy-yoff]);
       console.log(arrow.getPosition());
        console.log(arrow.getOffset());


    layer.draw();

        }, false);

Answer 1

Kinetic 中的所有对象都围绕它们的偏移点旋转。

所以，如果你想让所有东西都围绕 anchor2 旋转，那么所有“卫星”对象的偏移量都必须指向 anchor2 的中心点。

如果您移动anchor2 或任何卫星，则必须将每个卫星偏移重置为指向anchor2 的中心点。

问题：

Kinetic 对象的位置会自动链接到它的偏移点。如果您更改偏移点，对象将自动在舞台上视觉上重新定位。

要将任何对象的偏移量指向 anchor2，您需要知道该对象在舞台上的位置。不幸的是，Kinetic 的 anyObject.getAbsolutePosition 不返回该对象的偏移+变换位置。

如果无法知道物体被拖动+旋转的位置，Kinetic 框架本身就没有解决方案。

这就是为什么您在 Kinetic 内部寻找解决方案时一直头疼的原因……没有一个 :-(

理论解

您可以使用三角函数计算每颗卫星相对于 anchor2 的旋转位置。有了真正的旋转位置，您就可以设置卫星的偏移+位置，让您的项目顺利进行。