[英]Rotate location of SVG group element in JavaScript without rotating whole image
我在SVG中绘制了一个地图,该地图使用矩阵转换根据某些鼠标事件进行旋转。 当我单击地图的某些部分时,会绘制注释(在与旋转图像分开的组元素中)。
现在,只要将事件发送到JavaScript函数以作为单独的动作进行移动,就可以在拖动地图时随地图移动这些注释。 旋转和缩放基础地图时,我想做同样的事情,但是不确定如何进行-很明显,我不想旋转整个注释图像。 我只想移动它以匹配更新的地图。 似乎我可能需要弄清楚如何计算地图变换对单个点的X / Y坐标的影响,然后将该计算应用于注释位置。 我似乎找不到任何可能有助于弄清楚该怎么做的资源。
这是我写的一篇博客文章,内容涉及如何操纵底层地图: http : //justindthomas.wordpress.com/category/flower-nfa/
该文章中的实时示例目前无法正常工作(我已移动JavaScript文件的位置),但它应为我的问题提供一些有用的上下文。
我最终只是手工做数学。 这是我用于后代的功能:
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 + ")");
为了扩展,我使用了类似的策略。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.