Stack Overflow
Stack Overflow

Questions tagged [raphael]

Raphaël is a cross platform JavaScript library for outputting vector graphics in both standards compliant SVG (for Firefox, Chrome, Internet Explorer 9+ ...) and VML for older versions of Internet Explorer.

Raphaël is a JavaScript library that provides cross platform creation and manipulation of vector based graphics in either SVG or VML format. It supports, among other browsers, Firefox 3.0+, Chrome 5.0+, Safari 3.0+, and Internet Explorer 6.0+.

In addition to providing functions for the programmatic creation of vector graphics, Raphaël also provides a rich set of functions for adding interactivity to objects, transitioning state of an object (e.g. slowly changing color, rotation, etc), and complex animations of objects.

Documentation

Related tags

2976 questions
16
votes
2 answers

Draw a Connection Line in RaphaelJS

How would I go about drawing a connection line in Raphael where the mousedown initiates the starting point of the line, the mousemove moves the end point without moving the start point and the mouseup leaves it as it is?
Louis
  • 4,172
  • 4
  • 45
  • 62
16
votes
4 answers

how to use attr's stroke-dasharray,stroke-linecap,stroke-linejoin in raphaeljs

Can anyone give me an example of these attributes in action: stroke-dasharray, stroke-linecap, stroke-linejoin i tried using them, but i don't quite understand the sentext structure for their values.
zero
  • 2,999
  • 9
  • 42
  • 67
15
votes
4 answers

Draw good-looking Bezier Curve through random points

I'm using javascript with RaphaelJS to draw a smooth line through random points with output to SVG. The line goes strictly horizontally, without returning back in axis X. Currently, I'm using cubic Bezier curves to draw the line from one point to…
Nameless
  • 2,306
  • 4
  • 23
  • 28
15
votes
3 answers

Get cursor coordinates in raphael

How to get mouse cursor coordinates in raphaeljs library? I'm trying something like: rect.mousemove(function (event) { thisGrid.Popup.Show(event.layerX, event.layerY, ["clientX:", event.clientX, " clientY:", event.clientY, "\n", "layerX:",…
Neir0
  • 12,849
  • 28
  • 83
  • 139
15
votes
2 answers

How to create gradient object with Raphael

I was trying to use Raphael JS graphics library. I would like to use the attribute gradient which should accept an object. Documentation says to refer to SVG specs. I found the gradient object in SVG, for instance
tarella
  • 153
  • 1
  • 1
  • 4
15
votes
1 answer

More elegant way to resize a sector path using Raphaël JS and SVG?

I am using Raphaël for the first time with little svg experience and I need someone who is really knowledgeable with these two to help me. I have created a pie chart with dynamic sectors. The sectors can be resized by dragging on the round buttons.…
T. Junghans
  • 11,385
  • 7
  • 52
  • 75
15
votes
2 answers

Ideas for rendering HTML *within* Raphael (SVG/VML) shapes

I'm working on an application that uses Raphael to draw primitive shapes (rectangles, ellipses, triangles etc) and lines but allows the user to move/resize these objects as well. One of the main requirements is that the face of shapes can have…
TheCloudlessSky
  • 18,608
  • 15
  • 75
  • 116
14
votes
2 answers

Is there some well-known algorithm which turns user's drawings into smoothed shapes?

My requirements: A user should be able to draw something by hand. Then after he takes off his pen (or finger) an algorithm smooths and transforms it into some basic shapes. To get started I want to transform a drawing into a rectangle which…
Christian Strempfer
  • 7,291
  • 6
  • 50
  • 75
14
votes
3 answers

Right mouse click detection on SVG shape in JavaScript not working

I need some help with my script in which I would like to detect RMB click. INFO: finally I want to display my own right-click menu on a dedicated SVG shape, which is displayed with a use of Raphael js lib, I found out that there are many different…
Borys
  • 141
  • 1
  • 1
  • 3
14
votes
3 answers

Put label in the "center" of an SVG path

I'm trying to draw a label on a polygon of an svg file. The problem I'm facing is to find out roughly the center of this polygon to place the label, as the path's coordinates are in svg format and need to be parsed. Is there an easier way to…
sol
  • 141
  • 1
  • 1
  • 3
14
votes
3 answers

Best javascript library to create and interactive flow chart

I would like to create an interactive 'problem solving' type flow chart that is made up out div elements. I would like to do something very similar to what the new york times have done in this…
Dale Woods
  • 784
  • 1
  • 13
  • 31
14
votes
4 answers

Raphael.js - image with it's original width and height size?

Hi RaphaelJS users =) , I have maybe a dumb-ish question, but I can't seem to find the answer, the thing is, I'm trying to load/create an image with Raphael, that's fine, like this: var image_1 = paper.image('/img/img1.jpg', 0, 0, 100, 100); But as…
Edward
  • 615
  • 1
  • 5
  • 12
13
votes
2 answers

How to drag a shape along a given path

I've this simple dummy file that I'm using to do some testing. The intended result is to drag the red circle along the path. The thing is that I can't figure out how to associate both shapes.
Guillermo
  • 1,493
  • 3
  • 16
  • 35
13
votes
7 answers

Onclick event for rect using Raphaeljs

I am trying to draw a simple Rectangle with some text on it. Since a shape cannot have text on it, I am creating a set with the same coordinates for the text and the rect objects. I need to change something on onclick event. Hence, I have used the…
kavita
  • 739
  • 2
  • 6
  • 7
13
votes
6 answers

Raphael JS : how to move/animate a path object?

Somehow this doesn't work... var paper = Raphael("test", 500, 500); var testpath = paper.path('M100 100L190 190'); var a = paper.rect(0,0,10,10); a.attr('fill', 'silver'); a.mousedown( function() { testpath.animate({x: 400}, 1000); }); I can…
Dylan
  • 9,129
  • 20
  • 96
  • 153
1 2 3
…
99 100