拉斐尔 - 用鼠标绘制形状

Question

使用鼠标绘制矩形或圆形的最佳方法是什么？

我刚开始看raphael,似乎我应该使用,拖？还是mousedown和mouseup？

不确定.

Answer 1

我会在你的画布/纸上使用mousedown和mouseup事件.在鼠标按下时,您应该存储mousedown的x和y位置,然后在mouseup上使用当前鼠标位置来计算宽度和高度.

这是一个例子,请记住我正在使用JQuery来计算鼠标位置(如果这不适合你,那么你应该找到另一种方法来获得鼠标偏移)

//global variables
var mouseDownX = 0;
var mouseDownY = 0;

//register events on document load
paper.mousedown(OnMouseDown);
paper.mouseup(OnMouseUp);

function OnMouseDown(e){
   var offset = $("#Canvas").offset();//This is JQuery function
   mouseDownX = e.pageX - offset.left;
   mouseDownY = e.pageY - offset.top;
}

function OnMouseUp(e){
   var offset = $("#Canvas").offset();//This is JQuery function
   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: "#FFF",
            stroke: "#F00"
        });
}

希望有所帮助

Answer 2

这是小提琴的更新版本(在另一篇文章中提到),适用于Raphael 2+(没有纸质事件).

这个小提琴显示了拖动鼠标时如何动态绘制矩形.

var mouseDownX = 0;
var mouseDownY = 0;
var elemClicked;
var rect;

$(document).ready(function() {
    var paper = Raphael("d1", 300, 200);

    // start, move, and up are the drag functions
    start = function() {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({
            opacity: 1
        });
        if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
            fill: "#000"
        });
    }, move = function(dx, dy) {

        // move will be called with dx and dy
        if (this.attr("y") > 200 || this.attr("x") > 300) this.attr({
            x: this.ox + dx,
            y: this.oy + dy
        });
        else {
            nowX = Math.min(300, this.ox + dx);
            nowY = Math.min(200, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);
            this.attr({
                x: nowX,
                y: nowY
            });
            if (this.attr("fill") != "#000") this.attr({
                fill: "#000"
            });
        }

    }, up = function() {
        // restoring state
        this.attr({
            opacity: .5
        });
        if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
            fill: "#AEAEAE"
        });
    };

    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);
        console.log(element.attr('x'));

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

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

        });

        return element;

    }

    $("#bind").click(function(e) {
        $('#d1').unbind('mousedown');
        $('#d1').unbind('mousemove');
        $('#d1').unbind('mouseup');

        $("#d1").mousedown(function(e) {
            // Prevent text edit cursor while dragging in webkit browsers
            e.originalEvent.preventDefault();

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

            rect = DrawRectangle(mouseDownX, mouseDownY, 0, 0);

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

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

                rect.attr( { "width": width > 0 ? width : 0,
                             "height": height > 0 ? height : 0 } );

            });

        });

        $("#d1").mouseup(function(e) {
            $('#d1').unbind('mousemove');

            var BBox = rect.getBBox();

            if ( BBox.width == 0 && BBox.height == 0 ) rect.remove();

        });

    });

    $("#unbind").click(function(e) {
        $('#d1').unbind('mouseup');
        $('#d1').unbind('mousemove');
        $('#d1').unbind('mousedown');
    });

    $("#clr").click(function(e) {
        $('#d1').find('rect').each(function(i, obj) {
            $(this).remove();
        });
    });

    $("#del").click(function(e) {
        $('#' + elemClicked).remove();
    });

});

​