单击它时绘制元素的边界框 RaphaelJS答案

【问题标题】：Drawing the Bounding Box for an element when you click it RaphaelJS单击它时绘制元素的边界框 RaphaelJS
【发布时间】：2013-03-16 03:37:25
【问题描述】：

所以我尝试对元素/集合使用 getBBox() 方法，并使用 x、y、width 和 height 属性来定义一个矩形。但是该元素附加了一个拖动事件，每次触发拖动事件时，它都会绘制一个新的边界框。

我尝试在我的拖动功能之后使用 element.remove 来删除该元素，但我似乎遇到了一个元素未定义错误。

foo.click(function(){
    console.log(foo.getBBox());
    var herpaderp = drawBBox(foo.getBBox());
    console.log(herpaderp);
    dragsymbolsoncanvas(foo,herpaderp);
});
function dragsymbolsoncavas(foo,herpaderp){
    function dragger(){
        this.dx = this.dy = 0;
    };
    function mover(s){
        return function(dx, dy){
            if(this.data("candrag")=="true"){
                (s||this).translate(dx-this.dx,dy-this.dy);
                this.dx = dx;
                this.dy = dy;
            }
        }
    };
    foo.drag(mover(foo), dragger);
    herpaderp.remove();
};

【问题讨论】：

标签： jquery raphael

【解决方案1】：

JSFiddle 示例： http://jsfiddle.net/hu8dd/

var Paper = Raphael("test",500,500);
var foo = Paper.circle(100,100,50).attr({fill: "#aa5555"});

var onstart = function(){
            if(this.rect == undefined){
               var coords = this.getBBox();
               this.rect = Paper.rect(coords.x, coords.y, coords.width, coords.height)
                                .attr({fill: "none", stroke: "#aaaaaa", "stroke-width": 1});
            }else{
               this.rect.show();
            }

        };
        var onmove = function(dx,dy){
                    this.transform(this.trans+'T'+(dx)+','+(dy));
                    this.rect.transform(this.rtrans+'T'+(dx)+','+(dy));

        };
        var onend = function(){
            this.rect.hide();
            this.trans = this.transform();
            this.rtrans = this.rect.transform();
        }

        foo.drag(onmove, onstart, onend);

【讨论】：