进行了重大编辑,以更优雅的方式关联元素。
Sets http://raphaeljs.com/reference.html#set适合对 Raphael 对象进行分组,但集合不会创建自己的元素,因此您无法拖放集合,因为当您单击画布时,您可以选择形状或文本,但永远不会选择集合(因为没有设置元素)。
这是一个简单的 jsFiddle,显示集合的属性。 http://jsfiddle.net/v2ahW/请注意,集合没有x
or y
特性。
来自拉斐尔文档 http://raphaeljs.com/reference.html:
[A set c]创建类似数组的对象来同时保存和操作几个元素。警告:它不会在页面中为自己创建任何元素。
简单的解决方法是使文本和形状都可单独拖动。然后将关联的文本与形状一起移动...以及关联的形状与文本一起移动。
像这样关联对象很简单......创建一个属性。在这种情况下,每个形状和每个文本都有一个称为.pair
这是对关联元素的引用。
其操作方法如下:
var i, ii, tempS, tempT
shapes = [ ... ],
texts = [ ... ];
for (i = 0, ii = shapes.length; i < ii; i++) {
tempS = shapes[i].attr( ... );
tempT = texts[i].attr( ...);
// Make all the shapes and texts dragable
shapes[i].drag(move, dragger, up);
texts[i].drag(move, dragger, up);
// Associate the elements
tempS.pair = tempT;
tempT.pair = tempS;
}
然后在拖放代码中,这是move()
, dragger()
, and up()
您必须确保处理单击的元素及其关联元素的函数。
例如,这里是相关部分move()
功能。注意text
可以用同样的方式处理rectangle
(通过改变属性x
and y
), 所以false
下面每个 Javascript 条件运算符中的条件都处理以下两种情况rectangle
并为text
move = function (dx, dy) {
// Move main element
var att = this.type == "ellipse" ?
{cx: this.ox + dx, cy: this.oy + dy} :
{x: this.ox + dx, y: this.oy + dy};
this.attr(att);
// Move paired element
att = this.pair.type == "ellipse" ?
{cx: this.pair.ox + dx, cy: this.pair.oy + dy} :
{x: this.pair.ox + dx, y: this.pair.oy + dy};
this.pair.attr(att);
...
}
下面是完整的工作代码:
可拖动文本和形状的 jsFiddle 工作示例 http://jsfiddle.net/CHUrB/
Raphael.fn.connection = function (obj1, obj2, line, bg) {
if (obj1.line && obj1.from && obj1.to) {
line = obj1;
obj1 = line.from;
obj2 = line.to;
}
var bb1 = obj1.getBBox(),
bb2 = obj2.getBBox(),
p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
{x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
{x: bb1.x - 1, y: bb1.y + bb1.height / 2},
{x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
{x: bb2.x + bb2.width / 2, y: bb2.y - 1},
{x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
{x: bb2.x - 1, y: bb2.y + bb2.height / 2},
{x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
d = {}, dis = [];
for (var i = 0; i < 4; i++) {
for (var j = 4; j < 8; j++) {
var dx = Math.abs(p[i].x - p[j].x),
dy = Math.abs(p[i].y - p[j].y);
if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
dis.push(dx + dy);
d[dis[dis.length - 1]] = [i, j];
}
}
}
if (dis.length == 0) {
var res = [0, 4];
} else {
res = d[Math.min.apply(Math, dis)];
}
var x1 = p[res[0]].x,
y1 = p[res[0]].y,
x4 = p[res[1]].x,
y4 = p[res[1]].y;
dx = Math.max(Math.abs(x1 - x4) / 2, 10);
dy = Math.max(Math.abs(y1 - y4) / 2, 10);
var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
if (line && line.line) {
line.bg && line.bg.attr({path: path});
line.line.attr({path: path});
} else {
var color = typeof line == "string" ? line : "#000";
return {
bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
line: this.path(path).attr({stroke: color, fill: "none"}),
from: obj1,
to: obj2
};
}
};
var el;
window.onload = function () {
var color, i, ii, tempS, tempT,
dragger = function () {
// Original coords for main element
this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x");
this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y");
if (this.type != "text") this.animate({"fill-opacity": .2}, 500);
// Original coords for pair element
this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x");
this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y");
if (this.pair.type != "text") this.pair.animate({"fill-opacity": .2}, 500);
},
move = function (dx, dy) {
// Move main element
var att = this.type == "ellipse" ? {cx: this.ox + dx, cy: this.oy + dy} :
{x: this.ox + dx, y: this.oy + dy};
this.attr(att);
// Move paired element
att = this.pair.type == "ellipse" ? {cx: this.pair.ox + dx, cy: this.pair.oy + dy} :
{x: this.pair.ox + dx, y: this.pair.oy + dy};
this.pair.attr(att);
// Move connections
for (i = connections.length; i--;) {
r.connection(connections[i]);
}
r.safari();
},
up = function () {
// Fade original element on mouse up
if (this.type != "text") this.animate({"fill-opacity": 0}, 500);
// Fade paired element on mouse up
if (this.pair.type != "text") this.pair.animate({"fill-opacity": 0}, 500);
},
r = Raphael("holder", 640, 480),
connections = [],
shapes = [ r.ellipse(190, 100, 30, 20),
r.rect(290, 80, 60, 40, 10),
r.rect(290, 180, 60, 40, 2),
r.ellipse(450, 100, 20, 20)
],
texts = [ r.text(190, 100, "One"),
r.text(320, 100, "Two"),
r.text(320, 200, "Three"),
r.text(450, 100, "Four")
];
for (i = 0, ii = shapes.length; i < ii; i++) {
color = Raphael.getColor();
tempS = shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
tempT = texts[i].attr({fill: color, stroke: "none", "font-size": 15, cursor: "move"});
shapes[i].drag(move, dragger, up);
texts[i].drag(move, dragger, up);
// Associate the elements
tempS.pair = tempT;
tempT.pair = tempS;
}
connections.push(r.connection(shapes[0], shapes[1], "#fff"));
connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff|5"));
connections.push(r.connection(shapes[1], shapes[3], "#000", "#fff"));
};
为了完整起见,这里是代码链接到 jsFiddle 用于显示集合的属性 http://jsfiddle.net/v2ahW/:
window.onload = function () {
var paper = Raphael("canvas", 320, 200),
st = paper.set(),
propArr = [];
st.push(
paper.circle(10, 10, 5),
paper.circle(30, 10, 5)
);
st.attr({fill: "red"});
for(var prop in st) {
if (st.hasOwnProperty(prop)) {
// handle prop as required
propArr.push(prop + " : " + st[prop]);
}
}
alert(propArr.join("\n"));
};
// Output:
// 0 : Raphael's object
// 1 : Raphael's object
// items : Raphael's object,Raphael's object
// length : 2
// type : set