2012-10-05 42 views
5

svg fare koordinatları ile ilgili sorular burada daha önce soruldu, ama ben yaşadığım mevcut davranış oldukça şaşırıyorum ve konuların hiçbiri oldukça ele gibi görünüyor.SVG Capturing Fare Koordinatları

I yakalama koordinatları için kullanım yöntemi: svg kullanıcı alanı koordinatları halinde

var pt = svg.createSVGPoint(); // Created once for document 

function alert_coords(evt) { 
    pt.x = evt.clientX; 
    pt.y = evt.clientY; 

    // The cursor point, translated into svg coordinates 
    var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse()); 
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")"); 
} 

sorun klik dönüştürme ile koordine eder. Bir dikdörtgeni ekran boyunca sürüklemek için koordinatları kullanıyorum ve imleç svg uzayda sağa doğru ilerledikçe koordinatlar gittikçe daha da çarpıtılıyor. Bunu basit bir şekilde test etmek için global svg uzayında (100, 500), (500, 500), (1000, 500) ve (1000, 200) boyutlarında üç dikdörtgen yerleştirdim. Basit bir kayıt fonksiyonu kullanarak aldığım koordinatlar (ya da fare uyuşmazlığı için eksi 5) (98, 473), (487, 470), (969, 471), (969, 190). X veya y ekseni boyunca daha ileride görebileceğiniz gibi, fare daha doğru olur. Ben, fare koordinatlarını yakalamak için aynı yöntemi kullanarak bir keman içinde çoğaltmak için çalıştı, ama orada çoğaltamam ... Bir şey daha önemli notu, svg belge, genişliğini günlüğe kaydedildiğinde aslında ve yükseklik, görüntüleme kutusu değerlerinden biraz daha düşük değerlere ayarlanır, yani. "0 0 1400 700" görüntü değeri verilen 1380 genişlik ve 676 yükseklik. Her neyse, burada keman, tüm svg özellikleri programımdakilerle aynı.

http://jsfiddle.net/ASLma/11/

cevap

2

Sorun doğrudan tarayıcıda svg açıyordu görünüyor. Bunun yerine, embed etiketiyle bir html sayfasına yerleştirdim ve harika çalışıyor. Bunun neden fare koordinat doğruluğum açısından önemli olacağından emin değilim, ama çözüm bir çözümdür.