Question

有没有办法像Raphael一样使用Raphael绘制形状（Rectangle）？

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 ：

在起点处绘制一个0 x 0的形状。
向执行绘图功能onmousemove的{{1}}添加事件监听器。

<强> doDraw() ：

删除形状。
清除onmouseup听众。

<强> onmousemove ：

使用doDraw()坐标获取起点。
计算x，y，宽度＆amp;形状的高度属性并绘制它。

请注意，使用Raphael时，矩形不能具有负宽度或高度，因此更改起始坐标并将宽度和高度乘以-1。

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

1 个答案: