我使用的是Keith Wood的svg jquery插件,而不是HTML5画布。
我像这样定义我的 svg 图像以缩放我的 svg 三角形图像以适应其div 容器:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" viewBox="0 0 299 215" >
<g>
<polygon points="1,1 299,1 149,210" fill="blue" stroke="blue" stroke-width="0" class="votenow"/>
</g>
</svg>
但是,如何匹配坐标系呢?
我想在三角形上的某个点捕获鼠标位置,并在这些 X Y 坐标处绘制一个圆,但由于坐标系不匹配,圆圈被绘制在不同的位置。
因此,将在点 10,10 处绘制一个圆圈,但例如似乎在 50,60 处。
人们如何应对这种情况?
谢谢。
最终解决方案:使用 JQuery 插件绘制圆圈并获取 ScreenCTM() 来计算点数。
也许我不再需要 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'});
});
请参阅 http://msdn.microsoft.com/en-us/library/hh535760%28v=vs.85%29.aspx这是我的示例代码。对于这种用法,getScreenCTM方法非常有用。
<svg viewBox="0 0 300 300" onload="
var c = document.getElementById('c');
var cx = c.cx.baseVal;
var cy = c.cy.baseVal;
var svg = this;
var point = svg.createSVGPoint();
svg.onmousemove = function(e){
point.x = e.clientX;
point.y = e.clientY;
var ctm = c.getScreenCTM();
var inverse = ctm.inverse();
var p = point.matrixTransform(inverse);
cx.value = p.x;
cy.value = p.y;
};
">
<rect width="100%" height="100%" fill="yellow"/>
<circle id="c" r="10" fill="blue"/>
</svg>
如果在 SVG 元素上调用函数 getScreenCTM()
,它将返回用于将文档坐标转换为屏幕坐标的转换矩阵。 您希望转换矩阵用于另一个方向,因此在矩阵对象上调用inverse()
。
var transform = svg.getScreenCTM().inverse();
现在,您可以转换点对象以执行最终转换:
pt = pt.matrixTransform(transform);
在这里工作演示
var x = document.getElementById("x"),
y = document.getElementById("y"),
svg = document.querySelector("svg");
svg.addEventListener("mousemove", function(evt) {
var pt = svg.createSVGPoint();
pt.x = evt.pageX;
pt.y = evt.pageY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
x.innerHTML = pt.x;
y.innerHTML = pt.y;
}, false);
#container {
width: 200px;
height: 200px;
}
div {
float: left;
margin-left: 1em;
}
<div id="container">
<svg version="1.0" viewbox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="blue"/>
</svg>
</div>
<div>
x = <span id="x"></span><br/>
y = <span id="y"></span>
</div>
如果上述版本(使用 pageX/Y)不适合您,请尝试此版本。
var x = document.getElementById("x"),
y = document.getElementById("y"),
svg = document.querySelector("svg");
svg.addEventListener("mousemove", function(evt) {
var pt = svg.createSVGPoint();
pt.x = evt.clientX;
pt.y = evt.clientY;
pt = pt.matrixTransform(evt.target.getScreenCTM().inverse());
x.innerHTML = pt.x;
y.innerHTML = pt.y;
}, false);
#container {
width: 200px;
height: 200px;
}
div {
float: left;
margin-left: 1em;
}
<div id="container">
<svg version="1.0" viewbox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="blue"/>
</svg>
</div>
<div>
x = <span id="x"></span><br/>
y = <span id="y"></span>
</div>