jquery - 用鼠标单击并按住绘制形状

Question

有没有办法像这样使用 Raphael 绘制形状(矩形)？

http://devfiles.myopera.com/articles/649/example3.html

我尝试了下面的代码，但它没有成功，因为矩形形状仅在 ((onmouseup)) 事件之后出现

与上面的鼠标单击并按住所需的示例不同，在该示例中，形状从一个点开始，形状的大小随后随着用户移动鼠标而变化，直到用户释放鼠标，形状变得永久

$("#div1").mousedown(function(e) {

    var offset = $("#div1").offset();
    mouseDownX = e.pageX - offset.left;
    mouseDownY = e.pageY - offset.top;

});

$("#div1").mouseup(function(e) {
    var offset = $("#div1").offset();
    var upX = e.pageX - offset.left;
    var upY = e.pageY - offset.top;

    var width = upX - mouseDownX;
    var height = upY - mouseDownY;

    DrawRectangle(mouseDownX, mouseDownY, width, height);

});

function DrawRectangle(x, y, w, h) {

    var element = paper.rect(x, y, w, h);
    element.attr({
        fill : "gray",
        opacity : .5,
        stroke : "#F00"
    });
    $(element.node).attr('id', 'rct' + x + y);

    element.drag(move, start, up);
    element.click(function(e) {

        elemClicked = $(element.node).attr('id');

    });

}

完整的例子可以在这个 fiddle 中找到 http://jsfiddle.net/XMyHz/26/

Answer 1

这是一个使用 Raphael 重新创建您链接到的绘图示例的示例: http://jsfiddle.net/4Kdhz/1/

正如@Neil提到的，当你移动鼠标时，你需要改变形状的尺寸，所以基本流程是这样的:

onmousedown:

1. 在起点绘制一个 0 x 0 形状。
2. 向执行绘图函数 doDraw() 的 onmousemove 添加事件监听器。

onmouseup:

1. 删除形状。
2. 清除onmousemove监听器。

doDraw():

1. 使用 onmousedown 坐标获取起点。
2. 计算形状的 x、y、宽度和高度属性并绘制它。

请注意，对于 Raphael，矩形的宽度或高度不能为负，因此更改起始坐标并将宽度和高度乘以 -1。