raphael-min.js當中,rect圖物件原始碼，加上註解！！
raphael-min.js
/**
*環節物件rect圖
*
*@paramp
*@paramm
*@returns{a.rect}
*/
a.rect= function(p, m) {
var u = this,
g = "rect" + a.util.nextId(),
E = b.extend(true, {},a.config.rect,p),//深度合併rect資料，儲存為E
C = m, // Raphael物件
t, e, n, f,
//畫出四種物件並隱藏，分別代表外矩形邊框t,左邊圖示e，右上方文字n,左下方文字f
x, v;
t = C.rect(E.attr.x, E.attr.y, E.attr.width, E.attr.height,E.attr.r).hide().attr(E.attr);
e = C.image(a.config.basePath+ E.img.src, E.attr.x + E.img.width / 2, E.attr.y + (E.attr.height -E.img.height) / 2, E.img.width, E.img.height).hide();
n = C.text(E.attr.x + E.img.width + (E.attr.width -E.img.width) / 2, E.attr.y + a.config.lineHeight/ 2, E.name.text).hide().attr(E.name);
f = C.text(E.attr.x + E.img.width + (E.attr.width -E.img.width) / 2, E.attr.y + (E.attr.height - a
//定義上面四種物件事件，分別是移動時（最後呼叫），拖動時，放開時事件
t.drag(function(r, o) {
A(r, o)
}, function() {
z()
}, function() {
l()
});
e.drag(function(r, o) {
A(r, o)
}, function() {
z()
}, function() {
l()
});
n.drag(function(r, o) {
A(r, o)
}, function
z()
}, function() {
l()
});
f.drag(function(r, o) {
A(r, o)
}, function() {
z()
}, function() {
l()
});
//拖動事件具體實現，移動方法
var A = function(F, r) {
if (!a.config.editable){
return
}
var o = (x + F);
var G = (v + r);
//重新定位x,y座標
q.x = o - E.margin;
q.y = G - E.margin;
B()//顯示函式，後面詳解
};
var z = function() {
//記錄剛拖動時，x,y座標
x = t.attr("x");
v = t.attr("y");
//拖動時，半透明化
t.attr({
opacity : 0.5
});
e.attr({
opacity : 0.5
});
f.attr({
opacity : 0.5
})
};
var l = function() {
//放開拖動時，不透明
t.attr({
opacity : 1
});
e.attr({
opacity : 1
});
f.attr({
opacity : 1
})
};
var s, i = {},
h = 5,
//q記錄當前環節節點的x,y,width,height
q = {
x : E.attr.x - E.margin,
y : E.attr.y - E.margin,
width : E.attr.width + E.margin * 2,
height : E.attr.height + E.margin * 2
};
//下面畫被點選時，周邊出現的線條，先隱藏著
s = C.path("M0 0L11").hide();
//分別畫上，左上，左，左下，下，右下，右，右上等八個解的小黑矩形，並新增拖動事件，剛拖動時呼叫k()記錄_bx,_by，即當前物件的座標，移動時呼叫D()去對當前rect進行拉伸變形處理。
i.t = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "s-resize"
}).hide().drag(function(r, o) {
D(r, o, "t")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "t")
}, function() {
});
i.lt = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "nw-resize"
}).hide().drag(function(r, o) {
D(r, o, "lt")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "lt")
}, function() {
});
i.l = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "w-resize"
}).hide().drag(function(r, o) {
D(r, o, "l")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "l")
}, function() {
});
i.lb = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "sw-resize"
}).hide().drag(function(r, o) {
D(r, o, "lb")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "lb")
}, function() {
});
i.b = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "s-resize"
}).hide().drag(function(r, o) {
D(r, o, "b")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "b")
}, function() {
});
i.rb = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "se-resize"
}).hide().drag(function(r, o) {
D(r, o, "rb")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "rb")
}, function() {
});
i.r = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "w-resize"
}).hide().drag(function(r, o) {
D(r, o, "r")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "r")
}, function() {
});
i.rt = C.rect(0, 0, h, h).attr({
fill : "#000",
stroke : "#fff",
cursor : "ne-resize"
}).hide().drag(function(r, o) {
D(r, o, "rt")
}, function() {
k(this.attr("x") + h / 2, this.attr("y") + h / 2, "rt")
}, function() {
});
//對當前RECT進行拉伸變形處理，F，r分別表示變形後，x,y座標的增量，根據傳入的第三個引數方向，對當前物件q的屬性進行修改，最後呼叫B（）顯示
var D = function(F, r, G) {
if (!a.config.editable){//你懂的
return
}
var o = _bx + F, H = _by + r;
switch (G) {
case"t" :
q.height += q.y - H;
q.y = H;
break;
case"lt" :
q.width += q.x - o;
q.height += q.y - H;
q.x = o;
q.y = H;
break;
case"l" :
q.width += q.x - o;
q.x = o;
break;
case"lb" :
q.height = H - q.y;
q.width += q.x - o;
q.x = o;
break;
case"b" :
q.height = H - q.y;
break;
case"rb" :
q.height = H - q.y;
q.width = o - q.x;
break;
case"r" :
q.width = o - q.x;
break;
case"rt" :
q.width = o - q.x;
q.height += q.y - H;
q.y = H;
break
}
B()
};
var k = function(r, o, F) {
_bx = r;
_by = o
};
//對RECT四個元素新增點選事件
b([t.node, f.node, n.node, e.node]).bind("click", function() {
if (!a.config.editable){
return
}
w();//顯示變形的黑色邊框
var o = b(C).data("mod");//我不懂，但我想我應該得懂，獲取當前工具箱上面的方式“選擇”，“轉換”這兩個方式的其中一種方式
switch (o) {
case"pointer" :
break;
case"path" :
var r = b(C).data("currNode");
//所點選的節點不為空、不是之前的節點，並且所選節點是ID是RECT+ID的節點，剛觸放新增path事件
if (r && r.getId() != g
&& r.getId().substring(0, 4) == "rect") {
b(C).trigger("addpath", [r, u])
}
break
}
//呼叫環境點選事件，顯示屬性框
b(C).trigger("click", u);
b(C).data("currNode", u);
returnfalse
});
var j = function(o, r) {
if (!a.config.editable){
return
}
if (r.getId() == g) {
b(C).trigger("showprops", [E.props, r])
} else {
d()
}
};
//顯示屬性框 事件
b(C).bind("click", j);
var c = function(o, F, r) {
if (r.getId() == g) {
f.attr({
text : F
})
}
};
//定義修改RECT物件中四大元素（t e n f）裡邊的f元素文字標籤的內容。
b(C).bind("textchange", c);
//下面的神馬方法，待解釋 path zzw
function y() {
return"M" + q.x + " " + q.y + "L" + q.x + " " + (q.y + q.height)
+ "L" + (q.x + q.width) + " " + (q.y + q.height) + "L"
+ (q.x +q.width) + " " + q.y + "L" + q.x + " " + q.y
}
//顯示拉伸框
function w() {
s.show();
for (var o in i) {
i[o].show()
}
}
//隱藏拉伸框
function d() {
s.hide();
for (var o in i) {
i[o].hide()
}
}
//顯示當前RECT物件
function B() {
//設定當前RECT的準確x,y,width,height
var F = q.x + E.margin, r = q.y + E.margin, G = q.width -E.margin
* 2, o = q.height - E.margin * 2;
t.attr({
x : F,
y : r,
width : G,
height : o
});
//根據所建立的環節RECT節點的型別，是包含文字圖片，還是隻包含圖片，還是隻包含文字，對四大元素（t e n f）當中的區域性元素進行顯示
switch (E.showType) {
case"image" :
e.attr({
x : F + (G - E.img.width) / 2,
y : r + (o - E.img.height) / 2
}).show();
break;
case"text" :
t.show();
f.attr({
x : F + G / 2,
y : r + o / 2
}).show();
break;
case"image&text" :
t.show();
n.attr({
x : F + E.img.width + (G - E.img.width) /2,
y : r + a.config.lineHeight / 2
}).show();
f.attr({
x : F + E.img.width + (G - E.img.width) / 2,
y : r + (o - a.config.lineHeight) / 2
+ a.config.lineHeight
}).show();
e.attr({
x : F + E.img.width / 2,
y : r + (o - E.img.height) / 2
}).show();
break
}
//重新修改當前RECT環節節點的隱藏的拉伸框的x,y座標值。
i.t.attr({
x : q.x + q.width / 2 - h / 2,
y : q.y - h / 2
});
i.lt.attr({
x : q.x - h / 2,
y : q.y - h / 2
});
i.l.attr({
x : q.x - h / 2,
y : q.y - h / 2 + q.height / 2
});
i.lb.attr({
x : q.x - h / 2,
y : q.y - h / 2 + q.height
});
i.b.attr({
x : q.x - h / 2 + q.width / 2,
y : q.y - h / 2 + q.height
});
i.rb.attr({
x : q.x - h / 2 + q.width,
y : q.y - h / 2 + q.height
});
i.r.attr({
x : q.x - h / 2 + q.width,
y : q.y - h / 2 + q.height / 2
});
i.rt.attr({
x : q.x - h / 2 + q.width,
y : q.y - h / 2
});
s.attr({
path : y()
});
b(C).trigger("rectresize", u)
}
//對當前環節RECT節點進行JSON的封裝，相當於JAVA OBJECT類的toString()方法
this.toJson = function() { // 儲存時，對rect（環節）進行組裝json，
var r = "{type:'" + E.type + "',text:{text:'" + f.attr("text")
+ "'}, attr:{x:" + Math.round(t.attr("x")) + ", y:"
+ Math.round(t.attr("y")) + ", width:"
+ Math.round(t.attr("width")) + ", height:"
+ Math.round(t.attr("height")) + "}, props:{";// 屬性
for (var o in E.props) {
r += o + ":{value:'" + E.props[o].value + "'},"
}
if (r.substring(r.length - 1, r.length) == ",") {
r = r.substring(0, r.length - 1)
}
r += "}}";
return r
};
//深度合併傳入O的屬性，同時對當前RECT的f元素設定文字值，最後顯示
this.restore = function(o) {
var r = o;
E = b.extend(true, E, o);
f.attr({
text : r.text.text
});
B()
};
//獲取當前RECT節點的邊框屬性x,y,width,height
this.getBBox = function() {
return q
};
//獲取當前RECT節點的ID，格式為rect+N,N由a.util.getID()閉包函式生成唯一的ID.
this.getId = function() {
return g
};
//清除處理，移除四大元素和線條，以及八個變形節點
this.remove = function() {
t.remove();
f.remove();
n.remove();
e.remove();
s.remove();
for (var o in i) {
i[o].remove()
}
};
//返回當前RECT節點的文字內容
this.text = function() {
return f.attr("text")
};
//設定當前RECT節點的外邊框元素的屬性，並顯示
this.attr = function(o) {
if (o) {
t.attr(o)
}
};
B()
};