使用 SnapSVG 在拖动时旋转对象答案

【问题标题】：Rotate an object on drag with SnapSVG使用 SnapSVG 在拖动时旋转对象
【发布时间】：2018-12-01 15:30:38
【问题描述】：

我正在使用 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
    });
}

这使用毕达哥拉斯计算角度，然后应用旋转。形状确实会旋转，但不是很干净 - 它会在其轴上跳来跳去。

Here's a codepen 举个例子

我需要做什么才能让它顺利旋转？

【问题讨论】：

我觉得您可能每次都想存储角度。当您使用 dx/dy 拖动时，您需要知道拖动了多少，然后将其添加到已经旋转的角度。另外，您需要考虑 atan 立即从正数转换为负数（如果您在日志中看到）。

标签： javascript svg snap.svg

【解决方案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);

【讨论】：