我如何在拉斐爾的紙張座標中得到一個事件

我想在拉斐爾的紙張座標中得到一個鼠標事件的座標。即使在我使用setViewBox的時候，我也希望這些是準確的。我如何在拉斐爾的紙張座標中得到一個事件

下面創建一個10×10的綠色框，然後在放大的方式 - 與套盒的視圖的起源中心。

var paper = Raphael(10, 50, 320, 200); 

var rect = paper.rect(0, 0, 10, 10); 
rect.attr('fill', 'green'); 

rect.mousedown(function (event, a, b) { 
    $('#here').text([a, b]); 
    console.log(event); 
}); 

paper.setViewBox(5, 5, 10, 10);

我希望收到點擊座標，以反映它們在框中的位置。即。它們應該在（[5-10]，[5-10]）範圍內。

注意：很久以後，我已經遷移到D3.js--這通常讓我更加快樂。

來源

2013-03-06 kwerle

編輯：使用的clientX/Y簡化鼠標事件 - 刪除需要獲取元素偏移量

這是我想出的。基本上，通過使用鼠標事件的紙張客戶端矩陣和客戶端X/Y來更正鼠標相對於紙張的位置。然後比較校正位置到客戶端矩形的寬度/高度，然後因素的結果由原來的紙尺寸：

var paper = Raphael(10, 50, 320, 200); 

var rect = paper.rect(0, 0, 10, 10); 
rect.attr('fill', 'green'); 

rect.mousedown(function (event, a, b) { 
    // get bounding rect of the paper 
    var bnds = event.target.getBoundingClientRect(); 

    // adjust mouse x/y 
    var mx = event.clientX - bnds.left; 
    var my = event.clientY - bnds.top; 

    // divide x/y by the bounding w/h to get location %s and apply factor by actual paper w/h 
    var fx = mx/bnds.width * rect.attrs.width 
    var fy = my/bnds.height * rect.attrs.height 

    // cleanup output 
    fx = Number(fx).toPrecision(3); 
    fy = Number(fy).toPrecision(3); 

    $('#here').text('x: ' + fx + ', y: ' + fy); 
}); 

paper.setViewBox(5, 5, 10, 10);

更新的小提琴鏈接是在這裏：鼠標按下FUNC的http://jsfiddle.net/CEnBN/3/

更緊湊的版本：

rect.mousedown(function (event, a, b) { 
    var bnds = event.target.getBoundingClientRect(); 
    var fx = (event.clientX - bnds.left)/bnds.width * rect.attrs.width 
    var fy = (event.clientY - bnds.top)/bnds.height * rect.attrs.height 

    $('#here').text('x: ' + fx + ', y: ' + fy); 
});

來源

2013-03-12 12:55:06 gthmb

就是這樣。我希望它更清潔 - 不是你的錯。 – kwerle 2013-03-15 03:52:55

您需要抵消的結果，是這樣的：

var posx, posy; 

var paper = Raphael("canvas", 320, 200); 

var rect = paper.rect(0, 0, 10, 10); 
rect.attr('fill', 'green'); 

rect.mousedown(function (e, a, b) { 
    posx = e.pageX - $(document).scrollLeft() - $('#canvas').offset().left; 
    posy = e.pageY - $(document).scrollTop() - $('#canvas').offset().top; 
    $('#here').text([posx, posy]); 
    console.log(e); 
}); 

paper.setViewBox(5, 5, 10, 10);

我添加了Raphaeljs目標的元素，看看this update to your jsfiddle

來源

2013-03-07 04:01:02 Neil

這是一個很小的改善，我想 - 但它肯定不考慮縮放或滾動。 – kwerle 2013-03-07 19:24:33

gthmb的答案非常好，但缺少一個細節 - 矩形在紙上的位置。如果矩形位於位置（0,0），此版本僅適用。也支持它被翻譯的情況下，矩形的位置添加到結果：

function mouseEvent_handler(e) { 
    var bnds = event.target.getBoundingClientRect(); 
    var bbox = this.getBBox(); 
    var fx = (event.clientX - bnds.left)/bnds.width * rect.attrs.width + bbox.x; 
    var fy = (event.clientY - bnds.top)/bnds.height * rect.attrs.height + bbox.y; 

    $('#here').text('x: ' + fx + ', y: ' + fy); 
}

這裏小提琴的修改版本：http://jsfiddle.net/zJu8b/1/

來源

2014-02-12 11:00:20

我如何在拉斐爾的紙張座標中得到一個事件

回答

相關問題