如何组合 Raphael javascript 库中的对象？
抱歉问了一个很长的问题，但是就这样吧。我试图在这里修改演示周围的拖动形状：
http://raphaeljs.com/graffle.html
该演示运行良好。我想要做的是将文字放入形状内，并将形状和文本作为复合单个对象移动。
这是创建对象的代码：
window.onload = function () {
var dragger = function () {
this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
this.animate({"fill-opacity": .2}, 500);
},
move = function (dx, dy) {
var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
this.attr(att);
for (var i = connections.length; i--;) {
r.connection(connections[i]);
}
r.safari();
},
up = function () {
this.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)
];
for (var i = 0, ii = shapes.length; i < ii; i++) {
var color = Raphael.getColor();
shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
shapes[i].drag(move, dragger, up);
}
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"));
};
我尝试了这样的操作：
myWords = [ r.text(190, 100, "Hello"),
r.text(480,100, "Good Bye")
];
并在其他地方进行了调整，以便它可以工作，但它只是移动文本和形状，但形状和文本永远不会被视为一个整体。我可以将文本与形状分开移动，反之亦然。我需要它们成为一个对象。所以他们一起移动。我怎样才能做到这一点？感谢您的帮助。
编辑：
我尝试了这个：
st.push(r.text (190, 100, "node1"), r.ellipse(190, 100, 30, 20)),
st.push(r.text (290, 80, "Center"), r.rect(290, 80, 60, 40, 10)),
st.push(r.text (290, 180, "node2"), r.rect(290, 180, 60, 40, 2)),
st.push(r.text (450, 100, "node3"), r.ellipse(450, 100, 20, 20))
但是当我移动形状时，文本和形状没有保持在一起。文字只是静止不动。
编辑：我无法在 http://raphaeljs.com/graffle.html 获取股票演示来使用铬合金。 IE 可以用。
Sorry for a long question but here goes. I am trying to modify the drag shapes around demo here:
http://raphaeljs.com/graffle.html
The demo works fine. What I want to do is put words inside the shapes and move the shape and text around as a composite single object.
Here is the code for creating the objects:
window.onload = function () {
var dragger = function () {
this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
this.animate({"fill-opacity": .2}, 500);
},
move = function (dx, dy) {
var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
this.attr(att);
for (var i = connections.length; i--;) {
r.connection(connections[i]);
}
r.safari();
},
up = function () {
this.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)
];
for (var i = 0, ii = shapes.length; i < ii; i++) {
var color = Raphael.getColor();
shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
shapes[i].drag(move, dragger, up);
}
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"));
};
I tried something like this:
myWords = [ r.text(190, 100, "Hello"),
r.text(480,100, "Good Bye")
];
and made adjustments elsewhere so that it would work, but then it just moves text and shapes but the shape and text are never seen as a whole. I can move the text separate from the shape and vice versa. I need them to be one object. so they move together. How can I do that? Thank you for any help.
EDIT:
I tried this:
st.push(r.text (190, 100, "node1"), r.ellipse(190, 100, 30, 20)),
st.push(r.text (290, 80, "Center"), r.rect(290, 80, 60, 40, 10)),
st.push(r.text (290, 180, "node2"), r.rect(290, 180, 60, 40, 2)),
st.push(r.text (450, 100, "node3"), r.ellipse(450, 100, 20, 20))
But the text and shape did not stay together when I moved the shape. The text just stayed still.
EDIT: I cannot get the stock demo at http://raphaeljs.com/graffle.html to work with Chrome. IE it works.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
进行了重大编辑，以更优雅的方式关联元素。
集合 适合对 Raphael 对象进行分组，但集合不会创建自己的元素，因此您无法拖放集合，因为当您单击画布时，您可以选择形状或文本，但决不会选择集合（因为有没有设置元素）。
这是一个简单的 jsFiddle，显示集合的属性。 请注意，集合没有
x或y属性。来自 Raphael 文档：
简单的解决方法是使文本和形状都可以单独拖动。然后将关联的文本与形状一起移动...以及关联的形状与文本一起移动。
像这样关联对象很简单......创建一个属性。在这种情况下，每个形状和每个文本都有一个名为
.pair的属性，它是对关联元素的引用。其实现方式如下：
然后在拖放代码中，即
move()、dragger()和up()您必须确保处理单击的元素及其关联元素的函数。例如，这里是 move() 函数的相关部分。请注意，
text可以按照与rectangle相同的方式处理（通过更改属性x和y），因此下面每个 Javascript 条件运算符中的false条件可以处理rectangle和text的情况下面是完整的工作代码：
可拖动文本和形状的工作 jsFiddle 示例
为了完整起见，这里是 < 的代码a href="http://jsfiddle.net/v2ahW/">链接到 jsFiddle 用于显示集合的属性：
Did major edit to associate elements in a more elegant way.
Sets are good for grouping Raphael objects, but sets do not create their own elements, so you cannot drag and drop a set, since when you click on the canvas you either select the shape or the text, but never the set (since there is no set element).
Here is a simple jsFiddle showing the properties of a set. Note that a set has no
xoryproperties.From the Raphael documentation:
The simple work around is to make both the text and shape separately draggable. Then move the associated text along with the shape... and the associated shape along with the text.
Associating objects like this is simple... create a property. In this case each shape and each text has a property called
.pairwhich is a reference to the associated element.Here's how it's done:
And then in the drag and drop code, which is the
move(),dragger(), andup()functions you have to make sure to deal with both the clicked on element and its associated element.For example here is the pertinent part of the
move()function. Note thattextcan be dealt with in the same way asrectangle(by changing attributesxandy), so thefalsecondition in each of the Javascript conditional operators below handles both the case forrectangleand fortextAnd below is the full working code:
Working jsFiddle example of draggable text and shapes
For completeness here is the code for the linked to jsFiddle for showing the properties of a set:
或者，尝试 Raphael 的这个“组”插件，它可以让您创建合适的 SVG 组元素。
https://github.com/rhyolight/Raphael-Plugins/blob /master/raphael.group.js
Or, try this "group" plugin for Raphael which lets you create a proper SVG group element.
https://github.com/rhyolight/Raphael-Plugins/blob/master/raphael.group.js
是的，这就是
set对象的用途：其他答案：
好的，我看到您已尝试使用 set，但使用方式错误。一组创建一组事物。就像您要在 Adobe Illustrator、Inkscape、Microsoft Word 或 Open Office 中对形状和文本进行分组一样。如果我理解正确，你想要的是这样的：
你还必须修改拖动器和移动函数，因为形状不再是“矩形”类型，而是“集合”类型：
所有集合都有
x< /code> 和y属性。Yes, that's what the
setobject is for:Additional answer:
OK, I see that you've tried using set but you are using it wrong. A set creates a group of things. Just like if you were to group shapes and text in Adobe Illustrator or Inkscape or Microsoft Word or Open Office. If I understand you correctly what you want is this:
You'll also have to modify your dragger and move functions since the shapes are no longer of type 'rect' but are of type 'set':
All sets have
xandyattributes.仅更改配对对象的属性以及拖动主对象时正在更改的属性不是更容易吗？
像这样的东西：
Wouldn't it be easier just to change the attributes of the paired object along with the attributes which are changing when the main object is dragged?
Something like this: