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

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

    });

}

这个小提琴的完整示例 http://jsfiddle.net/XMyHz/26/

Answer 1

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

正如@Neil所提到的,你需要在移动鼠标时改变形状的尺寸,所以基本流程如下:

onmousedown:

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

onmouseup:

1. 删除形状.
2. 清除onmousemove听众.

doDraw():

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

请注意,对于Raphael,矩形不能具有负宽度或高度,因此更改起始坐标并将宽度和高度乘以-1.