2

有没有办法像这样使用拉斐尔绘制形状（矩形）？

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/

4

1 回答 1

5

这是一个使用 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、width 和 height 属性并绘制它。

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

于 2012-11-12T07:11:46.587 回答