當你點擊它的時候繪製一個元素的邊界框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);