0

我想在 Raphael 的纸坐标中获取鼠标事件的坐标。即使我使用了 setViewBox，我也希望这些是准确的。

请参阅http://jsfiddle.net/CEnBN/

下面创建一个 10x10 的绿色框，然后放大 - 该框的中心位于视图的原点。

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);

我想收到反映他们在框中位置的点击坐标。IE。它们的范围应为 ([5-10], [5-10])。

注意：很久以后，我已经迁移到 D3.js - 这通常让我更快乐。

4

3 回答 3

1

已编辑：通过使用鼠标事件的 clientX/Y 进行简化-删除需要获取元素偏移量

这是我想出的。基本上，通过使用纸张的客户端矩形和鼠标事件的 clientX/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);

更新的小提琴链接在这里：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-12T12:55:06.883 回答
0

您需要抵消结果，如下所示：

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 添加了一个元素来定位，看看这个更新到你的 jsfiddle

于 2013-03-07T04:01:02.627 回答
0

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-12T11:00:20.920 回答