Question

我正在使用SnapSVG尝试在拖动对象时围绕其轴旋转对象。

使用.drag()方法，我将此函数称为：

var rotate = function(dx,dy) {
    angle = Math.atan((dx-100)/(dy-100)) * 180/Math.PI;
    this.attr({
        transform: this.data('origTransform') + (this.data('origTransform') ? "R" : "r") + angle
    });
}

这将使用毕达哥拉斯（Pythagoras）计算角度，然后应用旋转。形状确实会旋转，但不会干净-会跳来跳去并在其轴上轻拂。

Here's a codepen和示例

我需要怎么做才能使其平稳旋转？

Answer 1

我发现了Snap.angle()函数，该函数用了大量的数学方法解决了这个问题。这就是我设法使其顺利运行的方式：

var start_angle = 0;
var angle = 0;

var rotate = function(dx,dy, x, y) {
    theta = Snap.angle(350, 350, x, y)
    angle = (start_angle - theta) * -1

    this.attr({
        transform: this.data('origTransform') + (this.data('origTransform') ? "R" : "r") + angle
    });
}

var start = function(x, y) {
    start_angle = Snap.angle(350, 350, x, y) 
    this.data('origTransform', this.transform().local );
}
var stop = function(x, y) {
    current_angle = Snap.angle(350, 350, x, y) 

}

element.drag(rotate, start, stop);

使用SnapSVG拖动旋转对象

1 个答案: