我正在使用Keith Wood的svg jquery插件,而不是HTML5画布.
我像这样定义我的svg图像来缩放我的svg三角形图像以适合它的div容器:
但是,我如何匹配坐标系?
我想在三角形上的某个点捕获鼠标位置,并在这些XY坐标处绘制一个圆,但由于坐标系不匹配,因此圆绘制在不同的位置.
因此,在10,10点绘制一个圆,但例如看起来是50,60.
人们如何应对这种情况?
谢谢.
最终解决方案:使用JQuery插件绘制圆圈,使用getScreenCTM()计算点数.
也许我不再需要JQuery插件,但它现在会做.仅使用插件无法看到如何做到这一点.
$('#cvtriangle .tri').on( "click", function(e) { jqsvg = $('#cvtriangle').svg('get'); svg = document.querySelector("svg"); var pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; pt = pt.matrixTransform(svg.getScreenCTM().inverse()); jqsvg.circle(pt.x, pt.y, 5, {class: 'vote', fill: 'white', stroke: 'white', strokeWidth: 2, cursor: 'pointer'}); });
defghi1977.. 10
请参阅http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx 这是我的示例代码.对于此用法,getScreenCTM方法非常有用.
Paul LeBeau.. 6
如果getScreenCTM()
在SVG元素上调用该函数,它将返回用于将文档坐标转换为屏幕坐标的变换矩阵.您希望变换矩阵用于另一个方向,因此请调用inverse()
矩阵对象.
var transform = svg.getScreenCTM().inverse();
现在,您可以转换点对象以进行最终转换:
pt = pt.matrixTransform(transform);
在这里工作演示