在JavaScript中旋转SVG组元素的位置而不旋转整个图像

我在SVG中绘制了一张地图，我使用矩阵变换根据某些鼠标事件进行旋转。当我点击地图的某些部分时，我会绘制注释（在与旋转图像分离的组元素中）。在JavaScript中旋转SVG组元素的位置而不旋转整个图像

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

这里是我写在谈论我如何操作基础图的博客文章：http://justindthomas.wordpress.com/category/flower-nfa/

该文章中的活生生的例子目前不工作（我感动的JavaScript文件的位置），但它应该给我的问题提供一些有用的背景。

来源

2011-06-19 Justin Thomas

如果你找到自己的解决方案，你应该把它作为答案并接受它。 – Dan

感谢您的提示！ –

我最后只是手工做数学。下面是我用后人的功能：

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 + ")");

缩放，我使用了类似的策略。

来源

2011-06-25 02:56:31

在JavaScript中旋转SVG组元素的位置而不旋转整个图像

回答

相关问题