[javascript] 自动调整SVG内的鼠标位置


0 Answers

@Phrogz:谢谢你的精彩榜样,我从那里学到了很多东西。 我已经改变了下面的一些内容,使它变得有点容易。 我认为就像我们在核心java中处理鼠标事件一样,我们也可以在这里处理相同的方式,所以我在你的例子中尝试了我的方式。

我已经删除了“rotateElement”功能,因为我认为它有些困难,如果它我会找到替代品。

见下面的代码:

var svg=document.getElementById("svg1");
var pt=svg.createSVGPoint();
var end_small=document.getElementById("end_small");
var line=document.getElementById("line1");

end_small.addEventListener('mousemove', function(evt) {

    var loc=getCursor(evt);
    end_small.setAttribute("cx",loc.x);
    end_small.setAttribute("cy",loc.y);

    loc = getCursor(evt); // will get each x,y for mouse move

    line.setAttribute('x2',loc.x); // apply it  as end points of line
    line.setAttribute('y2',loc.y); // apply it as end points of line

}, false);

function getCursor(evt) {
    pt.x=evt.clientX;
    pt.y=evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
}

所以我所做的就是我刚刚将监听器添加到小圆而不是整个SVG中,每当鼠标移动到你的时候,我将从上面所述的getCursor()函数得到x, y ,我将把这个x, y作为x2, y2我的行的x2, y2 ,它不会翻译,也不会旋转。 您必须将鼠标移动到圆圈然后慢慢移动,如果您的鼠标离开圆圈,则线条将不会移动,因为我们刚刚在右侧的小圆圈上添加了侦听器。

Question

我遇到了关于鼠标光标在我的SVG文档中的位置的麻烦。 我想在HTML页面中使用JavaScript设计一个在拖动时跟随光标的电位计。

我尝试了evt.clientX / Y和evt.screenX / Y,但由于我的SVG处于自动缩放状态 ,因此我的SVG中的坐标是不同的。 我现在一直在寻找答案,但我找不到任何解决方案(要么实时了解我的SVG重新缩放因子,要么在SVG坐标系统中具有鼠标位置功能)。

轮换将遵循一个简单的规则:

if(evt.screenX <xc)

ang = Math.atan((evt.screenY - yc)/(evt.screenX - xc))* 360 /(2 * Math.PI) - 90;
if(evt.screenX> xc)
ang = Math.atan((evt.screenY - yc)/(evt.screenX - xc))* 360 /(2 * Math.PI)+ 90;

用(xc; yc)作为旋转中心,用SVG中鼠标的坐标替换所有evt.screenX / Y.




Related