javascript – 将浏览器单击事件`x`和`y`坐标转换为缩放的Snap svg元素上的坐标

我需要在用户点击的位置向snap渲染的svg添加一段文本.

因为SVG使用100％宽度缩放并使用viewBox属性,所以我需要将浏览器的click事件提供的x和y坐标转换为缩放svg上的x和y坐标.

我设法通过使用这段代码来完成这项工作：

var $canvas = $('svg#myscaledsvg');
var snap = new Snap($canvas[0]);

snap.mousedown(function(event) {
    var offset = $canvas.offset();
    var matrix = snap.transform().diffMatrix.invert();

    var x = matrix.x(event.pageX - offset.left, event.pageY - offset.top);
    var y = matrix.y(event.pageX - offset.left, event.pageY - offset.top)

    // below function call actually renders the text element to the given x and y coords       
    addSomeText(x, y);
});

现在,我理解为什么我需要减去偏移量.我不明白的是snap.transform().diffMatrix.invert()实际上是什么.

有人可以告诉我为什么这样有效吗？我从快照文档中得不到多少,整体看起来相当稀疏.

解决方法:

我在这种情况下猜测,你可以将diffMatrix交换为globalMatrix,它仍然可以工作吗？

Snap存储3个矩阵以响应transform()方法. localMatrix,diffMatrix和globalMatrix.

localMatrix是元素本身存在的变换

globalMatrix是viewPort到正在应用的元素的矩阵

diffMatrix是它们之间的区别.

对于globalMatrix,当它传递给这个本机方法时,可能值得查看getCTM.
对于localMatrix,请查看元素本身的任何变换(可能没有svg元素本身,因为它不支持变换).

因此,当您查看浏览器时,视图可能会被放大,平移等,有一个viewBox.需要将鼠标的坐标从此坐标空间转换为元素所在的坐标.这就是globalMatrix的反转,从鼠标转换.所以我假设diffMatrix和globalMatrix(getCTM)在这种情况下可能意味着相同(因为它是一个没有应用变换的svg元素).

如果这不是真的有意义,可能值得做一些额外的svg坐标空间教程,因为它可能非常有用.

Edit: I'm adding a bit more info to try and help below...

jsfiddle我已经完成了,有一个使用与OP相似的代码的例子.

jsfiddle 2类似但反应灵敏,在控制台日志中查看矩阵刻度会有所不同

SVG基本上按4缩放,因此放大了以下内容……

    height="800" width="800" viewBox="0 0 200 200"

要么

    height="100%" width="100%" viewBox="0 0 200 200"

在25,25处有一个圆圈,点击小提琴中的圆圈.

用户/浏览器事件空间中的鼠标事件将围绕大约100,100(有一些偏移需要考虑,因此可能108,108左右取决于).

因此,如果比例为4,我们需要将该100,100转换为该比例,否则它将出现在屏幕外.

如果我们将在svg上显示的所有内容都将被缩放4,我们只需要使用值的1/4来显示正确的坐标,这可能是一种有用的简单方式来查看它.

我们怎么做？我们反转比例(或任何变换).我们真正想要的是0.25的比例,将100,100转换为25,25,因此它出现在屏幕上的正确位置,因为所有内容都被放大(因为所有内容都会被svg参数缩放4).

是的,localMatrix对svg元素本身并没有多大意义(但它也不是问题).如果它是一个对它或其他元素进行转换的组,那将是有意义的.

还值得注意的是Snap将参数x,y传递给mousedown func,所以你可以使用它,而不是event.pageX / pageY.

标签：javascript,snap-svg
来源： https://codeday.me/bug/20190706/1399175.html