59

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

我试过了evt.clientX/Y，evt.screenX/Y但由于我的 SVG 处于autoscale状态，我的 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;

以我的 SVG 内的鼠标坐标(xc;yc)作为旋转中心并替换所有内容。evt.screenX/Y

4

3 回答 3

141

看这段代码，它不仅展示了如何从屏幕空间变换到全局 SVG 空间，还展示了如何将点从 SVG 空间变换到元素的变换空间：http:
//phrogz.net/svg/drag_under_transformation.xhtml

简而言之：

// Find your root SVG element
var svg = document.querySelector('svg');

// Create an SVGPoint for future math
var pt = svg.createSVGPoint();

// Get point in global SVG space
function cursorPoint(evt){
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

svg.addEventListener('mousemove',function(evt){
  var loc = cursorPoint(evt);
  // Use loc.x and loc.y here
},false);

编辑：我已经根据您的需要创建了一个示例（尽管仅在全球 SVG 空间中）： http:
//phrogz.net/svg/rotate-to-point-at-cursor.svg

它在上面添加了以下方法：

function rotateElement(el,originX,originY,towardsX,towardsY){
  var angle = Math.atan2(towardsY-originY,towardsX-originX);
  var degrees = angle*180/Math.PI + 90;
  el.setAttribute(
    'transform',
    'translate('+originX+','+originY+') ' +
      'rotate('+degrees+') ' +
      'translate('+(-originX)+','+(-originY)+')'
  );
}
于 2012-04-24T13:27:36.337 回答
2

@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 并且每次当你移动鼠标时，我都会x, y从getCursor()上述函数中获得，我将在我的行中给出x, y它x2, y2，它不会翻译，也不会旋转。您必须将鼠标移动到圆圈然后缓慢移动，如果您的鼠标离开圆圈，则线将不会移动，因为我们刚刚在小圆圈右侧添加了侦听器。

于 2014-01-25T04:45:47.353 回答
2

获取正确的 svg 鼠标坐标很棘手。首先，一种常见的方法是使用事件属性的clientX 和clientY 分别用getBoundingClientRect() 和clientLeft 减去clientTop。

svg.addEventListener('click', event =>
{
    let bound = svg.getBoundingClientRect();

    let x = event.clientX - bound.left - svg.clientLeft - paddingLeft;
    let y = event.clientY - bound.top - svg.clientTop - paddingTop;
}

但是，如果 svg 的填充样式信息大于零，则坐标正在移动。所以这个信息也必须减去：

let paddingLeft = parseFloat(style['padding-left'].replace('px', ''));
let paddingTop = parseFloat(style['padding-top'].replace('px', ''));

let x = event.clientX - bound.left - svg.clientLeft - paddingLeft;
let y = event.clientY - bound.top - svg.clientTop - paddingTop;

不太好的想法是，在某些浏览器中，边框属性也会移动坐标，而在其他浏览器中则不会。我发现，如果 event 属性的 x 和 y不可用，就会发生转变。

if(event.x === undefined)
{
    x -= parseFloat(style['border-left-width'].replace('px', ''));
    y -= parseFloat(style['border-top-width'].replace('px', ''));
}

在这种转换之后，x 和 y 坐标可能会超出范围，这应该是固定的。但那不是想法。

let width = svg.width.baseVal.value;
let height = svg.height.baseVal.value;

if(x < 0 || y < 0 || x >= width || y >= height)
{
    return;
}

此解决方案可用于 click、mousemove、mousedown 等。您可以在这里进行现场演示：https ://codepen.io/martinwantke/pen/xpGpZB

于 2017-12-14T21:10:02.430 回答