关于javascript：平移和缩放后，将鼠标单击转换为svg


Mouse click transformation to svg after pan and zoom

我正在使用snap.svg snap.svg.zpd库。如果使用snap.svg和jQuery panzoom库组合，也会遇到相同的问题。

您可以在此处找到代码示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var mySvg = $("#plan")[0];
var snap = Snap("#plan");
//create an image
var imagePlan = snap.image("http://upload.wikimedia.org/wikipedia/commons/4/42/Cathedral_schematic_plan_fr_vectorial.svg", 10, 10, 900, 500);

var group = snap.group(imagePlan);

snap.zpd();

var pt = mySvg.createSVGPoint(); // create the point;

imagePlan.click(function(evt)
        {
    console.log(evt);
            pt.x = evt.x;
            pt.y = evt.y;

            console.log(mySvg.getScreenCTM().inverse());
            //When click, create a rect
            var transformed =   pt.matrixTransform(mySvg.getScreenCTM().inverse());
            var rect1 = snap.rect(transformed.x, transformed.y, 40, 40);

            group.add(rect1);

        });

问题是...如果单击初始svg，它将在鼠标位置添加矩形。如果平移/缩放图像，然后添加矩形，它将被剪切。

看来方法mySvg.getScreenCTM()。inverse()中存在问题。返回的矩阵总是相同的，平移和缩放不会更改它。它始终使用来自初始呈现的svg的矩阵。但是，如果我检查svg元素，则可以看到pann / zoom更改变换矩阵直接在元素上(下图)。

enter image description here

有谁知道如何解决这个问题。我的要求是能够在任何缩放比例或平移上下文上将svg外部的元素拖放到svg中，因此我需要从鼠标单击点转换为svg偏移坐标。如果您知道可以执行此操作的任何其他方法或任何其他库组合，那么对我来说没关系。

提前致谢。

问题是，转换不在mySvg中。 它在svg内的'g'组元素上。 据我所知，Zpd将创建一个要对其进行操作的组，因此您需要研究一下。

要突出显示这一点，请看一看

1
console.log(mySvg.firstElementChild.getScreenCTM().inverse());

在这种情况下，它是g元素(有更直接的访问方式，取决于您是要使用js，snap还是svg.js。)

jsfiddle

从您的描述中还不清楚，您想让rect(在svg，sepag或whatt之内)到达何处以及以什么比例缩放，以及是否希望它成为缩放/平移，静态或其他功能的一部分。 所以我不确定你是否需要这个。

我猜你想要这样的东西

1
2
3
var tpt = pt.matrixTransform( mySvg.firstElementChild.getScreenCTM().inverse()  )

var rect1 = snap.rect(tpt.x, tpt.y, 40, 40);

相关讨论