I'm writing an app that lets users generate images with Raphael.JS. One of the secondary features I want is to generate a PNG of the Raphael canvas. Here's the general pipeline in my head: User inputs parameters We generate JS with Raphael calls We generate a JS wrapper that does the above and calls .innerHTML on the containing div, ...
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...
I have created a #logo DIV that consists of a smaller #circle DIV & h1. The #circle acts as the DIV/canvas that my Raphael.js object, a circle, is rendered in. My goal was to make it so when a user hovers over the #logo DIV the Raphael.js circle and h1 will get animated but I ran into some problems. For some reason my Raphael.js circle...
I cannot get Raphaël working in a UIWebView. I load a simple HTML-Webpage with this content: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <script src="js/lib/raphael-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> alert("" + Raphael)...
How may I change the text in a RaphaelJS-created text node? First, I am creating a new element with a text string with Raphael, and at some later point I would like to change this text. It's easier for me if I do not have to reinitialize the element as there will be a whole host of attributes attached that will be a pain to recreate. Is ...
I'm having a lot of trouble getting a simple text link to work in IE8 using Raphael. I want text that behaves like a normal link. I've included some code below that I have been playing with. Got the cursor to change to a hand by using the hover function and document.body.cursor The click function only works when clicking on actual tex...
I have a page where I am using Raphael.js to actually allow user to move a dot around the canvas which has a background image. What I am trying to do is to capture the end image of the canvas where I'll be able to see where the user placed the dot after the user clicks on a 'confirm position' button. I've thought of two methods, however ...
Hi all, I'm trying to write something to simplify experimentation with SVG path, but i have a problem where it doesn't actually update the screen when i can verify that the svg code is updated. Basically the work flow is as follows: I type something into the input box (A path string), and click draw, it will clear the canvas, then draw ...
As a fun project, I am going to make a simple flowchart app to learn some new html features, but I am unsure whether this is more appropriate for canvas or SVG (and which lib to use). I believe that SVG is more appropriate here since everything is basically shapes connected to lines (sounds like vector graphics to me), but if you think ...
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 ide...
I have created an image map with Raphael. I want the div containing the Raphael canvas to fade out using JQuery when one of the paths in the image map (path10 in the example below) is clicked. The code below does not work, but am I on the right track? <script type="text/javascript" charset="utf-8"> window.onload = function () { ...
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 ...
Hi All, I'm in a position to get a value from JavaScript, which uses Raphaeljs and send it to a Servlet/JSP page for Display & DB related work. Kindly assist me for that. ...
I would like to put a shadow around any given text, or make the text more anti-aliased looking. For example lets say I'm running a simple text such as: var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour") .attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"}) The text is somewhat chunky looking at...
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...
I am building an application using Raphaël. I have done my work on vectors, now what I want is this - that I want to zoom the vectors. I have implemented this code on it, but when I zoom out the element its coordinates also changes with it, which I don't want. Please help me out. Thanks in advance. Here is my code: var raphael=Rap...
I am using fancybox for my lightbox needs. I have a need to open a link from a raphael element (in this demo a circle). Normally you would create a link and style it like so: <a id="test" href="ajax.html">Click Me</a></li> <script type="text/javascript"> $(document).ready(function() { $('#test').fancybox({ 'width' ...
In a library I am using I have the task of moving an element to the front of the dom when it is hovered over. (I make it bigger so I need to see it, then shrink it back when mouse out). The library I am using has neat solution which uses appendChildren on the active element to move it to the end its parent so further towards the end of ...
Know of any examples of using raphaeljs extensively to make ui elements for a web app. Form containers/windows, tabbed controls, etc. Any suggestions when doing so(like caching the generated svg/rvml for reuse?)? ...
I am starting to learn RaphaelJS, but it does seem to be a steep learning curve as I am not very versed in javascript. But it seems like such a good library that I am willing to put the time in to learning it. What I would like to know is: How can one use an existing vector image in RaphaelJS (If I download a "vector" image can I tel...