Raphael js pdf

Parameters element object element to sync with anim object animation to sync with params optional object final attributes for the element, see also Element. Accept on of Raphael. Sets the attributes of the element. Possible parameters Please refer to the SVG specification for an explanation of these parameters.

Possible types: classic , block , open , oval , diamond , none , width: wide , narrow , midium , length: long , short , midium. Adds event handler for click for the element. Parameters handler function handler for the event Returns: object Element. Adds event handler for double click for the element. Adds event handlers for drag of the element. Parameters onmove function handler for moving onstart function handler for drag start onend function handler for drag end mcontext optional object context for moving handler scontext optional object context for drag start handler econtext optional object context for drag end handler Additionaly following drag events will be triggered: drag.

Start event and start handler will be called in specified context or in context of the element with following parameters: x number x position of the mouse y number y position of the mouse event object DOM event object Move event and move handler will be called in specified context or in context of the element with following parameters: dx number shift by x from the start point dy number shift by y from the start point x number x position of the mouse y number y position of the mouse event object DOM event object End event and end handler will be called in specified context or in context of the element with following parameters: event object DOM event object Returns: object Element.

Return bounding box for a given element Parameters isWithoutTransform boolean flag, true if you want to have bounding box before transformations. Default is false.

Parameters from number position of the start of the segment to number position of the end of the segment Returns: string pathstring for the segment. Returns length of the path in pixels. Makes element invisible. See Element. Adds event handlers for hover for the element. Inserts current object after the given one. Inserts current object before the given one. Adds event handler for mousedown for the element. Adds event handler for mousemove for the element.

Adds event handler for mouseout for the element. Adds event handler for mouseover for the element. Adds event handler for mouseup for the element. Parameters f function handler for event, first argument would be the element you are dragging over.

Usage Raphael. Stops animation of the element with ability to resume it later on. Parameters anim optional object animation object Returns: object original element. Parameters key optional string key Returns: object Element.

Adds rotation by given angle around given point to the list of transformations of the element. Parameters anim object animation object value number number of milliseconds from the beginning of the animation Returns: object original element if value is specified Note, that during animation following events are triggered: On each animation frame event anim.

Makes element visible. Gets or sets the status of animation of the element. Parameters anim optional object animation object value optional number 0 — 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position. Returns: number status or Returns: array status if anim is not specified. Stops animation of the element.

Adds event handler for touchcancel for the element. Adds event handler for touchend for the element. Adds event handler for touchmove for the element. Adds event handler for touchstart for the element. The format of transformation string is similar to the path string syntax: "t,r30, ,s2, 2 , ,r45s1. Adds translation by given amount to the list of transformations of the element. Parameters dx number horisontal shift dy number vertical shift Returns: object Element.

Removes event handler for click for the element. Removes event handler for double click for the element. Removes event handlers for hover for the element. Removes event handler for mousedown for the element. Removes event handler for mousemove for the element. Removes event handler for mouseout for the element.

Removes event handler for mouseover for the element. Removes event handler for mouseup for the element. Removes event handler for touchcancel for the element. Removes event handler for touchend for the element. Removes event handler for touchmove for the element. Removes event handler for touchstart for the element. Adds given matrix to existing one.

Parameters a number b number c number d number e number f number matrix object Matrix. Returns copy of the matrix Returns: object Matrix. Returns inverted version of the matrix Returns: object Matrix. Rotates the matrix Parameters a number x number y number. Scales the matrix Parameters x number y optional number cx optional number cy optional number. Splits matrix into primitive transformations Returns: object in format: dx number translation by x dy number translation by y scalex number scale by x scaley number scale by y shear number shear rotate number rotation in deg isSimple boolean could it be represented via simple transformations.

Return transform string that represents given matrix Returns: string transform string. Translate the matrix Parameters x number y number. Draws a circle. Draws an ellipse.

Executes given function for each element on the paper If callback function returns false it will stop loop running. Parameters callback function function to run thisArg object context object for the callback Returns: object Paper object. Returns you element by its internal ID. Returns you topmost element under given point. Parameters family string font family name or any word from it weight optional string font weight style optional string font style stretch optional string font stretch Returns: object the font object Usage paper.

Embeds an image into the surface. Creates a path element by given path data string. Parameters pathString optional string path string in SVG format. Parameters x number x position of the text y number y position of the text text string text to print font object font object, see Paper.

Draws a rectangle. Usage paper. Parameters x number new x position, default is 0 y number new y position, default is 0 w number new width of the canvas h number new height of the canvas fit boolean true if you want graphics to fit into new boundary box.

Draws a text string. Parameters container HTMLElement string DOM element or its ID which is going to be a parent for drawing surface width number height number callback optional function callback function which is going to be executed in the context of newly created paper or x number y number width number height number callback optional function callback function which is going to be executed in the context of newly created paper or all array first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height].

In this case method returns undefined. Returns angle between two or three points Parameters x1 number x coord of first point y1 number y coord of first point x2 number x coord of second point y2 number y coord of second point x3 optional number x coord of third point y3 optional number y coord of third point Returns: number angle in degrees.

Parses the color string and returns object with all values for the given color. Parameters clr string color string in one of the supported formats see Raphael. Transform angle to degrees Parameters deg number angle in radians Returns: number angle in degrees. Utility method Find dot coordinates on the given cubic bezier curve at the given t. Parameters p1x number x of the first point of the curve p1y number y of the first point of the curve c1x number x of the first anchor of the curve c1y number y of the first anchor of the curve c2x number x of the second anchor of the curve c2y number y of the second anchor of the curve p2x number x of the second point of the curve p2y number y of the second point of the curve t number position on the curve Return subpath of a given path from given length to given length.

Parameters path string SVG path string from number position of the start of the segment to number position of the end of the segment Returns: string pathstring for the segment. You have a clean, blank surface with which to work. You can see that not only did we define the circle, but we also defined the XY location on the paper itself. However, as Raphael is a javascript library, we have the ability to be a lot more flexible and can create shapes that could be painstaking if done manually using SVG in the XML format.

By bringing in some of your basic mathematical skills, you can create shapes that would have taken a long time to create, using other methods. With a few few quick calculations using the power of Javascript, you can generate an image that looks like this:. You can begin to see the possibilities.

Your simple circle is suddenly no longer just a plain image on the page. You should get a result that looks like this:. The results you get start to take a genuine artistic flair, and suddenly your SVG images start to come alive. You can draw pretty much any shape that comes to mind, ranging from other basic geometric shapes, to straight lines, to curving arcs and patterns.

After going over some of the demonstrations above, I can already sense the excitement you are feeling as you become familiar with what Raphael can do. While there are a few other libraries that can do similar things as Raphael, such as D3, Raphael is distinct for a few reasons. D3 is certainly a very powerful tool and will do much of what Raphael does. Most of what you can do in Raphael you can also do in D3. Many will argue that D3 is far more powerful, and indeed it can handle more complex graphics, particularly for business purposes.

Sure D3 is powerful. So is a heavy duty spray gun. That does not mean that it is right for all artistic purposes. Sometimes you only need a simple brush. Raphael also has a few advantages that D3 does not. Raphael has a much lower learning curve. From an artistic point-of view, you may not wish to spend months getting used to your tools, when all you really want do is to start painting.

There is a nice demo here. You can save as an image using canvg and canvas2image libraries. Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Asked 10 years, 8 months ago. Active 6 years, 11 months ago. Viewed 5k times. Farhat Farhat 1, 2 2 gold badges 11 11 silver badges 18 18 bronze badges. In response to the first comment. I am targeting all standards-compliant browsers.

Would prefer a free solution ideally and no Flash. Server-side solutions are fine.