Question

我挣扎了几天的问题

如果我在箭头附近拖动圆圈并调整整个箭头的大小，则旋转不会在右侧中心附近

我按下旋转按钮

有什么想法吗？

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

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的中心点。

问题：

动力学对象的位置自动链接到它的偏移点。如果更改偏移点，对象将自动在舞台上以可视方式重新定位。

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

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

这就是为什么你一直在寻找Kinetic里面的解决方案时头疼的日子...没有一个： - （

理论解决方案

您可以使用三角法计算每个卫星相对于anchor2的旋转位置。使用真正的旋转位置，您可以设置卫星的偏移+位置并使您的项目正常工作。

旋转和偏移动力学js

1 个答案: