平移和缩放后鼠标单击转换为 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的主要内容,如果未能解决你的问题,请参考以下文章