javascript - 在不旋转整个图像的情况下在 JavaScript 中旋转 SVG 组元素的位置

Question

我有一张用 SVG 绘制的 map ，我使用矩阵变换根据某些鼠标事件进行旋转。当我点击 map 的某些部分时，我会绘制注释(在与旋转图像分开的组元素中)。

现在，当我拖动 map 时，我可以将这些注释与 map 一起移动，方法是将事件发送到 JavaScript 函数以作为一个单独的 Action 来执行该移动。当我旋转和缩放底层 map 时，我想做同样的事情，但我不确定如何继续——显然我不想旋转整个注释图像；我只想移动它以匹配更新的 map 。看来我可能需要弄清楚如何计算 map 变换对单个点的 X/Y 坐标的影响，然后将该计算应用于注释位置。我似乎找不到任何可能有助于弄清楚如何做到这一点的资源。

这是我写的一篇博客文章，讲述了我如何操作底层 map :http://justindthomas.wordpress.com/category/flower-nfa/

那篇文章中的实时示例现在不起作用(我移动了 JavaScript 文件的位置)，但它应该为我的问题提供一些有用的上下文。

Answer 1

我最终只是手算了一下。这是我为后代使用的功能:

getRadiusAngle: function(referenceX, referenceY, centerX, centerY) {                
    var width = centerX - referenceX;
    var height = centerY - referenceY;
    var angle, radius;

    if(centerY > referenceY) {
        if(centerX > referenceX) {
            angle = Math.PI - Math.atan(Math.abs(height/width));
            radius = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        } else if (centerX < referenceX) {
            angle = Math.atan(Math.abs(height/width));
            radius = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        } else if (centerX == referenceX) {
            angle = Math.PI / 2;
            radius = height;
        }
    } else if(centerY < referenceY) {
        if(centerX > referenceX) {
            angle = Math.PI + Math.atan(Math.abs(height/width));
            radius = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        } else if (centerX < referenceX) {
            angle = (2 * Math.PI) - Math.atan(Math.abs(height/width));
            radius = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
        } else if (centerX == referenceX) {
            angle = Math.PI * 1.5;
            radius = Math.abs(height);
        }
    } else if(centerY == referenceY) {
        if(centerX > referenceX) {
            angle = Math.PI;
            radius = width;
        } else if (centerX < referenceX) {
            angle = 0;
            radius = Math.abs(width);
        } else if(centerX == referenceX) {
            angle = 0;
            radius = 0;
        }
    }

    return({
        "radius": radius, 
        "angle": angle
    })
},

对于旋转操作，我随后使用了:

var calcwidth = annotations[i].getAttribute("calcwidth");
var matrix = annotations[i].getCTM();

var referenceX = (matrix.e + (calcwidth/2));
var referenceY = (matrix.f + 32);

var ra = this.getRadiusAngle(referenceX, referenceY, pointerX, pointerY);

var current_angle = ra.angle;
var radius = ra.radius

var newX, newY;
if(radius == 0) {
    newX = matrix.e;
    newY = matrix.f;
} else {      
    var new_angle = current_angle + -radians;  

    newX = (pointerX + (radius * Math.cos(new_angle))) - (calcwidth/2);
    newY = (pointerY + -(radius * Math.sin(new_angle))) - 32;
}

annotations[i].setAttribute("transform", "translate(" 
    + newX + " " + newY + ")");

对于扩展，我使用了类似的策略。