[英]Mouse click transformation to svg after pan and zoom
我使用snap.svg和snap.svg.zpd庫。 如果我使用snap.svg和jQuery panzoom庫組合我也有同樣的問題。
你可以在這里找到代碼示例。
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()中。 返回的矩陣始終是相同的,平移和縮放不會改變它。 它始終使用initialy渲染的svg中的矩陣。 但是,如果我檢查svg元素,我可以直接在元素上看到pann / zoom變換矩陣(下圖)。
有誰知道如何解決這個問題。 我的要求是能夠在任何縮放比例或平移上下文中將svg外的元素拖放到svg中,因此我需要從鼠標單擊點轉換為svg偏移坐標。 如果您知道任何其他方法或任何其他庫組合可以做到這一點,它對我來說沒問題。
提前致謝。
問題是,轉換不在mySvg中。 它位於svg內部的'g'組元素上。 據我所知,Zpd將創建一個操作組,所以你想看看它。
要高亮一點,請看一下
console.log(mySvg.firstElementChild.getScreenCTM().inverse());
在這種情況下,它是g元素(有更多直接的訪問方式,取決於你是想在js中工作,還是snap,或svg.js)。
從你的描述中你不太清楚你想要矩形(在svg內,分開或什么)以及在什么尺度等等,如果你想讓它成為縮放/平移,靜態或其他的一部分。 所以我不確定你是否需要這個。
我猜你想要的東西,像這樣
var tpt = pt.matrixTransform( mySvg.firstElementChild.getScreenCTM().inverse() )
var rect1 = snap.rect(tpt.x, tpt.y, 40, 40);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.