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是可拖动的,但是,画布的大小不会更新为矩形的位置。那我的代码出了什么问题?有人可以帮忙吗?
答案 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;
}