如何在拖动矩形时重置Raphael画布大小

时间:2015-06-11 18:41:16

标签: javascript canvas raphael

Raphael中的拖动功能是object.drag(移动,开始,向上)

我的想法是检测对象在开始函数中的位置,如果对象的宽度或高度大于当前画布的大小,则重置画布大小,如增加100的高度或宽度。

var R = Raphael("canvas",500,500);

function rectangle(){
  var ox = 0; 
  var oy = 0;
  var rect = R.rect(100,100,10,20).attr({
fill: "white",
stroke: "black"
});

var start = function () {

    this.ox = this.attr("x");
    this.oy = this.attr("y");        

    this.box.ow = this.box.attr("width");
    this.box.oh = this.box.attr("height"); 

    },

    move = function (dx, dy) {

    this.attr({x: this.ox + dx, y: this.oy + dy});
    this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});

    if (this.attr("x") > R.width){
      R.width = R.width + 100;
    }

    if (this.attr("y") > R.height){
      R.height = R.height + 100;
    }

   R.setSize(R.width,R.height);

    },
    up = function () {
      ox = 0;
      oy = 0;

    };
 rect.drag(move, start, up);

  }
  window.onload = rectangle();

Rectangle是可拖动的,但是,画布的大小不会更新为矩形的位置。那我的代码出了什么问题?有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

如果您有一个矩形,x和y坐标通常被认为位于左上角。如果您在画布中拖动矩形,则无法在画布外部使用x和/或y。

而不是检查

if (this.attr("x") > R.width){
      R.width = R.width + 100;
}

if (this.attr("y") > R.height){
  R.height = R.height + 100;
}

尝试检查(R.width-rect.width)之类的内容,无论矩形的值是多少。也为你的R.height和矩形的高度做同样的事情。

含义:

if (this.attr("x") > R.width-rectangleWidth){
      R.width = R.width + 100;
}

if (this.attr("y") > R.height-rectangleHeight){
  R.height = R.height + 100;
}