在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組元素的位置而不旋轉整個圖像

回答

相關問題