jquery - 单击它时绘制元素的边界框 RaphaelJS

Question

所以我尝试对元素/集合使用 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();
};

Answer 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);