raphael

问题 So I've got my canvas and my paths: var paper1 = Raphael(10, 50, 960, 560); var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z"); var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z"); var

问题 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.

问题 I'm implementing a drag and drop system with Raphael.js. For this, i'm storing the original x and y position on mousedown, and if there is a collision on mouseup, I want to reset the position to the original one. Here's the bit of code that does the resetting ("this" refers to the raphael object here): var transformString = "t" + this.original_x + "," + this.original_y; this.attr("transform", transformString); What's weird is that after setting the attribute, the transform string changes by a

问题 I'm trying to get element by drag and drop another element. I have for example 2 circles: c1 and c2. What i want to do is : if i drop c2 above c1 hence they are overlapped(not entirely necessary), i can get circle c1 (ex:id, title... etc). http://jsfiddle.net/Tomen/LYjnV/1/ Is there a way to do it? 回答1: I'm not sure if you want the moving element that collides, or the static one that is collided with - so I'll give both. (it sounds like you want the static one, but it is this one which

问题 I have the following piece of code in javascript that basically hide or show a Raphaeljs set when I click on it. It works perfectly well under Google Chrome, FireFox and Safari, but not at all under Internet Explorer. var paper = Raphael(document.getElementById('ADiv'), 450, 490); var group = paper.set(); var toxicRect = paper.rect(0, 0, 120, 60, 10 ); toxicRect.attr({"stroke-width": 1, "stroke" : "#3083BE", "fill" : "#D1DFE9"}); group.push( toxicRect ); var toxicRectText = paper.text(60, 25,

问题 I want to display the pie chart with an animation that will make it grow from a "small point" to full size pie chart , something like this growing pie or this Highcharts Demo Gallery - Pie , but I want to apply it to a pie made with gRaphael , Here's my jsfiddle example... raphael pie chart with legend Thanks ahead, 回答1: In order to achieve that kind of animation you have to access the sectors and... animate them :) You can do this using your_pie.each() pie.each(function(){ //scale each

问题 I need to place a button tag inside a SVG canvas, is there a way? (I'm using raphael JS) I know I can 'draw' a button inside the svg canvas and code the onclick event but I want to preserve the native look and feel of the browser buttons. Thank you. 回答1: It is possible to use HTML buttons within SVG, using the SVG foreignObject element: http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement There is an example included in the spec of how to use it. Unfortunately, I'm not sure how you could

问题 Has anyone used .animateWith() in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find. I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here, and the lines in question are: var ticktock = Raphael.animation({ "50%": { transform:"R20 " + x + "," + y,

问题 Has anyone used .animateWith() in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find. I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here, and the lines in question are: var ticktock = Raphael.animation({ "50%": { transform:"R20 " + x + "," + y,

问题 I have an SVG file that I would like to display via Raphael (each svg file is a node in a tree I'm trying to draw, the actual connections of the tree will be made by raphael). I tried something like: var vector_image = paper.image("test.svg", 50,50,50,50); but no dice, seems only "real" image files like png or jpeg are accepted? I find this very strange as Raphael itself uses Scalable Vector Graphics. Is there anyway (short of parsing the SVG files into javascript snippets and pasting them