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
1
vote
1 answer

Raphael pie chart - draw paths anticlockwise

I'm trying to take the demo pie from the Raphael.js (http://raphaeljs.com/pie.html) and draw it clockwise - currently it's being drawn anticlockwise which doesn't make an awful lot of sense. This jsfiddle is the code from the…
Storsey
  • 301
  • 1
  • 3
  • 14
1
vote
1 answer

How can I add 3D to my raphael.js application? Can I combine raphael.js with webgl?

I have coded a 2D visualization using raphael.js but now I need to add some 3D features to this visualization. Is there a way I can use 3D libraries in my rapahel application?
hAlE
  • 1,283
  • 3
  • 13
  • 19
1
vote
0 answers

Raphael js problems with mouse events in Safari

Working with Raphael library, I've got a lot of problems with mouse events in Safari (it just doesn't work on mouse events). I read it's common, and maybe there is a solution for this (from the documentation): Paper.safari() There is an…
ateciufit15
  • 81
  • 1
  • 3
1
vote
1 answer

How to create smooth circular arcing animation?

see jsfiddle Here's my code: var paper = Raphael("holder"); function sector(cx, cy, r, startAngle, endAngle) { var x1 = cx + r * Math.cos(-startAngle), y1 = cy + r * Math.sin(-startAngle), x2 = cx + r * Math.cos(-endAngle), …
mpen
  • 272,448
  • 266
  • 850
  • 1,236
1
vote
2 answers

Getting the size of text without using the boundingBox function in Raphael javascript library

I am trying to create some buttons with text in javascript using the Rahpael library. I would like to know the size of the styled text, before drawing to avoid that so I can create proper background (the button). Also I would like to avoid drawing…
karlitos
  • 1,604
  • 3
  • 27
  • 59
1
vote
1 answer

Reset RaphaelJS transforms

I have a paper with some elements that the user can drag around and resize. Is there a way to reset these elements info so that subsequent transforms start from that? If I use transform('T') then changes in position or size are from the beginning…
cyberwombat
  • 38,105
  • 35
  • 175
  • 251
1
vote
1 answer

RaphaelJS Toggle Transformation

Is there any way to toggle the transformations you do in RaphaelJS? As of right now the below code works to make the circle bigger when clicked. What I need is to toggle the transformation so I can click again, and then the circle shrnks and moves…
Elijah Murray
  • 2,132
  • 5
  • 30
  • 43
1
vote
1 answer

JavaScript Dynamic Diagram

Quick question, I'm pretty new to JavaScript, and I will undoubtedly learn a lot from this project. So I propose a question (which could well be a silly one), my question is: I am planning to build a web application that dynamically generates shapes…
Nathan Smith
  • 8,271
  • 3
  • 27
  • 44
1
vote
1 answer

Raphael JS transform scaling - rounded rectangle

I have a rounded rectangle element but whenever I try to scale it using transform it disappears of the page - but I don't understand why (it works fine if I remove the corner radius variable - so it is a standard rectangle) var shape=paper.rect(200,…
Jason
  • 143
  • 1
  • 17
1
vote
1 answer

Raphael Moving Sets

I make a candlestick using two rectangles and making a set. Then I make 100 candlesticks and make that a set. When I try to move all 100 candlesticks, they either all move to one coordinate, or all move correctly, but the sticks all move to the edge…
Ben Gannaway
  • 1,053
  • 1
  • 14
  • 28
1
vote
1 answer

raphael multiple transformations on element

I'm trying to draw machinery from the bird's eye perspective. Therefore, I draw rectangles. Theese rectangles may have angles (e.g. 90°, 270°). So i apply rotation transformation onto them. This way i can draw the whole plant. Now if I apply scaling…
Olli El
  • 23
  • 5
1
vote
1 answer

Most responsive method for interactive image on webapp

I am looking to build a web app that will have an interface based on interactive images. Each image will have anywhere from 10-200 clickable/touchable/highlightable regions with irregular shapes (think map-like). I can see several ways of doing…
Indigenuity
  • 9,332
  • 6
  • 39
  • 68
1
vote
2 answers

How to I scale the Raphael map in Rob Flaherty's US map example?

I'm trying to implement this awesome map, but I can't figure out how to scale it. Changing the size of the container div or the height/width values just crops the underlying map. I think I need paper.scaleAll(.5) in here somewhere, but can't…
Acyra
  • 15,864
  • 15
  • 46
  • 53
1
vote
4 answers

Morris.js issue in Rails

I am following Railscast #223 to try to get some simple line graphs into my Rails 3.2.9 site using Morris.js and Raphael. I've downloaded the raphael and morris javascript files and added them to the vendor/assets/javascripts folder, then added the…
tom_servo
  • 308
  • 1
  • 15
1
vote
2 answers

raphael newbie: popup background is jumping

I tried the following code - var fin = function () { // this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this); this.flag = r.popup(this.bar.x, 280, this.bar.y || "0").insertBefore(this); }; var fout =…
Atara
  • 3,523
  • 6
  • 37
  • 56
1 2 3
…
99 100