2

そこで、要素/セットに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();
};
4

1 に答える 1

4

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);
于 2013-03-26T13:59:40.130 に答える