raphael
JavaScript Vector Library
Raphaël—JavaScript Library vector graphics javascript library
I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know
- What the trade-offs are between the two
- Where the development momentum seems to be.
I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm primarily interested in the most elegant way to create, animate, and manipulate individual items on an SVG canvas.
Source: (StackOverflow)
I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document.
Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width of the box which will itself force the line breaks (I can't find any evidence of this being possible) OR ensure that a '\n' line break is inserted after a certain amount of characters.
So (1) is this the best option? And (2) how would I do this?
Source: (StackOverflow)
I have seen several threads that adress this question but nothing that really solves my problem. I have a SVG file with a map and differrent regions ( http://www.mediafire.com/?5pmyevdwbyrb51f ). I want do do something like this: http://raphaeljs.com/australia.html.
But the question is how I can convert the file so that is works in the script? How do I get those coordinates? I have tried several converters and such but I must suck at this 'cause I cant get it to work. Maybe someone can help out?
Source: (StackOverflow)
How can I reorder Raphael or their underlying SVG elements after creation.
Better yet, do something like layers exist in SVG?
Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If that is not an option, popping elements to the front would be ok, and pushing it to the back would be better in this particular case.
Thanks,
Source: (StackOverflow)
I want to make an svg element (path, rect, or circle) be able to be draggable and give it resize handles.
But unlike HTML DOM, not all elements have an upper left hand corner x,y coordinate and a width and height for a box surrounding the content. This makes it inconvenient to make a generic resize or drag procedure.
Is it a good idea to have each path or circle be drawn inside its own svg object to give me a box to play with?
How is draggable/resizable typically implemented in SVG?
Source: (StackOverflow)
I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of the number and center it accordingly?
Here is my test page:
http://jesserosenfield.com/fluid/test.html
and my code:
function drawcircle(div, text) {
var paper = Raphael(div, 26, 26); //<<
var circle = paper.circle(13, 13, 10.5);
circle.attr("stroke", "#f1f1f1");
circle.attr("stroke-width", 2);
var text = paper.text(12, 13, text); //<<
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text.attr("fill", "#f1f1f1");
}
window.onload = function () {
drawcircle("c1", "1");
drawcircle("c2", "2");
drawcircle("c3", "3");
};
Thanks very much!
Source: (StackOverflow)
I started using Raphael.js a few days ago and I'm really enjoying it. The only thing I haven't been able to figure out is how to get the "paper" or svg/vml tag to fill the browser window like an swf. See this example.
Note the way the above example resizes with the browser window
I was able to get the "paper" to resize with the browser window, but no luck getting all the vector graphics to adjust their size. Any feedback would be greatly appreciated.
EDIT
I tried a bunch of different routes with this. viewBox worked great but its SVG only. I just figured out how to do it using Raphael sets and a little code on the window.onresize event. I'll post my findings later tonight or tomorrow. I'd still really like to see other solutions to the question if there are any.
Source: (StackOverflow)
I'm creating a small tool to illustrate the benefits of polarizing lenses. Basically a user will drag the lenses (a Raphael.js path) over a dazzling scene (the CSS background of the container DIV) and "see through" the lenses. Here is the js code:
var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");
path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );
var move = function(dx,dy){
this.translate( dx-this.ox, dy-this.oy );
this.ox = dx;
this.oy = dy;
},
start = function(){
this.ox = 0;
this.oy = 0;
},
end = function(){
};
path_f.drag(move,start,end);
The #playmask div has this CSS (just the "un-polarized" background image and the size):
#playmask{
height:540px;
width:720px;
background: url(img/unpolarized.jpg);
}
What I'm stuck with is:
- Chrome/Firefox, as always, play nice: the lenses shape shows up, and the fill image looks "fixed" while dragging the lenses around (see the first pic);
- IE versions 7,8,9 work, but (surprise!) they don't behave the same way: the fill image is "glued" to the lens shape (see second attached pic).
What I'm asking here is: can I make IE9/8/7 behave in a similar manner, that is, keeping the fill image fixed while dragging the lenses? If so, how?
Firefox screenshot:
IE9 screenshot:
Edit Using Modernizr to detect browser features, I noticed that this strange behavior seems related to the "no-smil" feature of IE.
I found out a bizarre behavior of IE9... the background does not "stick", but if I drag the mask around, select some text and press the right mousebutton, it refreshes the "polarized" background to the correct position!!
Edit 2 (21 May 2012) No solution yet :( but to be more precise, it does not relate in any way to the "no-smil" feature; and, the correct way to reproduce the bug on IE9 is drag the glass around, select some text in the rest of the page, and roll over the accelerator icon that pops up (the blue one with an arrow in it). The glasses bg magically "refreshes" at the correct position.
Important Edit 3 (28 August 2012)
You can find it all packed in this jsfiddle ( http://jsfiddle.net/q4rXm/17/ )
Source: (StackOverflow)
I'm trying to position text within the SVG canvas, by supplying x, y coordinates
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
but does not position the text like all other objects...
x, y coordinates specify the center of the object! Not the "left and top most" pixel!
I would like to "left align" the text along a line, same as standard HTML.
Help would be very much appreciated.
Source: (StackOverflow)
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.
Source: (StackOverflow)
I'm trying to create a webpage which using a lot of Raphael objects like lines, rectangles, circle. I'm using different colors for each of the event on these objects like onmouseover one color, onmouseout another etc.. So since I have a lot of styling I was wondering if I can specify a css class to these objects. I tried using the following code on IE, but I could not see the styling effect
rectObj.attr('class','mediumBold');
mediumBold is one the defined css class.
I'm fairly new to this. Any pointer will be helpful.
Thanks.
Source: (StackOverflow)
I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational.
The problem I've run into is creating tooltips. So far, I've found three ways to do this:
- The first way is to use
.attr({title: "blah"{) on an object. This works, but it's not supported by Raphael officially, and the content I want to put in the tooltip might be somewhat long, which is a problem when people's OS times out the tooltip before people have finished reading it.
- The second way I've found is the function here. It works OK for having a Raphael object popup when there is a mouseover, but, near as I can tell, getting a normal-looking tooltip to pop up isn't possible.
- Using the jquery Tooltip plugin. This just doesn't seem to work. I can't get Raphael to add the title attribute to an object AND get this to select that title. Not sure why.
So, what I'd like to know is, what's an easy and reliable way to add tooltips to Raphael objects such that they popup when people mouseover the object, and disappear when they mouseout (but not before)?
Source: (StackOverflow)
I want to use Raphael.js in my blog. I want import it from another source as I can't host it on blogger. Do we have any site like Google code which hosts Raphael.js?
Couldn't find it on Google code.
Source: (StackOverflow)
Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those values. But then the content gets very jumpy and hectic as I resize the window or container because the scrollbars (which I want if it gets too small) flash in and out of existence.
Is this the proper way to bind Raphael's canvas to the full size of a container? I'd also like to provide the option to make the Raphael canvas "full screen" taking up the entire browser window.
Source: (StackOverflow)