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

Posted

技术标签:

【中文标题】平移和缩放后鼠标单击转换为 svg【英文标题】:Mouse click transformation to svg after pan and zoom 【发布时间】:2016-02-28 10:04:33 【问题描述】:

我正在使用 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,它会将矩形添加到鼠标位置。如果您平移/缩放图像,然后添加矩形,它将被移动。

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

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

提前致谢。

【问题讨论】:

【参考方案1】:

问题是,转换不在 mySvg 中。它在 svg 内的“g”组元素上。据我所知,Zpd 会创建一个组进行操作,所以你想看看。

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

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

在这种情况下,它是 g 元素(有更直接的方法来访问它,具体取决于您是只想在 js、snap 或 svg.js 中工作)。

jsfiddle

从您的描述中不太清楚您希望矩形(在 svg 内,单独或什么)去哪里以及以什么比例等,如果您希望它成为缩放/平移的一部分,或者静态或任何。所以我不确定你是否需要这个。

我猜你想要this这样的东西

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

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

【讨论】:

这正是我想要的。新创建的点成为组的一部分,并在缩放和平移时跟随组转换。谢谢 没问题,实际上已经做得很好了,有时矩阵的东西有点难以理解。 其实我的朋友成功修复了这样的平移jsfiddle.net/L2kpd6yt/64。我们错过了您在 svg 对象上提到的属性。 它有点晚了,但它现在仍然有效。你救了我的一天兄弟。你太棒了)谢谢你)

以上是关于平移和缩放后鼠标单击转换为 svg的主要内容,如果未能解决你的问题,请参考以下文章

从鼠标位置缩放和翻译图像

【缩放】实现svg以鼠标为焦点缩放

缩放和平移画布后鼠标坐标不匹配

D3平移和缩放后的点击坐标(D3 click coordinates after pan and zoom)

谷歌图表平移缩放按钮

鼠标悬停时的 SVG 地图工具提示,可单击