Edit Question - KnowledgeHub

Title Body

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")

Tags (comma-separated) Cancel