Raphael - 用鼠标绘制形状 [英] Raphael - Drawing shapes with mouse

问题描述

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

What would be the best way to draw a rectangle or circle for that matter using your mouse ?

我刚开始看 raphael，看来我应该使用，拖动?还是 mousedown 和 mouseup ?

I just started looking at raphael and it seems I should use, drag? Or mousedown and mouseup ?

不确定.

推荐答案

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

I would use mousedown and mouseup events on your canvas/paper. On mouse down you should store the x and y positions of the mousedown, then on mouseup you should use the current mouse positions to calculate width and height.

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

Here is an example, bear in mind thought that I am using JQuery to calculate the mouse positions (if this is not available for you, then you should find another way to get the mouse offsets)

//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"
        });
}

希望有帮助

这篇关于Raphael - 用鼠标绘制形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！