平移和缩放后鼠标单击转换为 svg

Question

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

您可以找到代码示例 here。

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，它会将矩形添加到鼠标位置。如果您 pan/zoom 图片然后添加矩形，它将被移动。

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

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

提前致谢。

Answer 1

问题是，转换不在 mySvg 中。它位于 svg 内的 'g' 组元素上。据我所知，zpd 将创建一个操作组，所以你想看看那个。

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

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

在本例中，它是 g 元素（有更直接的访问方式，具体取决于您是否只想在 js、snap 或 svg.js 中工作）。

jsfiddle

从你的描述中不太清楚你希望矩形（在 svg 中，单独的或什么）去哪里以及以什么比例等，以及你是否希望它成为 zoom/panning 的一部分，或静态或其他。所以我不确定你是否需要这个。

我猜你想要 this

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

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

平移和缩放后鼠标单击转换为 svg

Mouse click transformation to svg after pan and zoom

javascript

svg

snap.svg

jquery.panzoom