RaphaelJS：mouseup 和 mousedown 调用同一个函数？

Question

我正在学习 Raphael，我想知道如何从 mousedown 和 mouse up 这两个事件调用相同的函数，以便在每次单击时绘制两个点。

您可以在此处测试代码：jsfiddle

var w = window.innerWidth;
var h = window.innerHeight;

var paper = Raphael(0, 0, w, h);

var canvas = paper.rect(0, 0, w, h,12);
canvas.attr('fill', 'lightgrey');

canvas.mouseup(function (event, a, b) {
    // get bounding rect of the paper
    var bnds = event.target.getBoundingClientRect();
    var targetBox = this.getBBox();

    // 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 * canvas.attrs.width + targetBox.x;
    var fy = my/bnds.height * canvas.attrs.height + targetBox.y;

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

    paper.circle(fx, fy, 1).attr("fill","black", "stroke-width",0);
});

我是 RaphaelJS 的新手，我从来不需要使用 javascript 从两个鼠标事件调用一个函数。所以，我很困惑。任何帮助将不胜感激。

Answer 1

您可以只创建一个新函数，它接收事件参数，如下所示...

canvas.mouseup( eventDraw );
canvas.mousedown( eventDraw );

function eventDraw( event ) {
    //... do stuff
};

jsfiddle

RaphaelJS：mouseup 和 mousedown 调用同一个函数？

RaphaelJS: mouseup and mousedown calling the same function?

mouseevent

raphael

mousedown

mouseup