raphael

问题 How do you determine if a point is inside a closed SVG path with javascript? Why does the following code not work as expected? var paper = Raphael(0, 0, 600, 600); var p = paper.path("M82.725,37.884l0.777,1.555l-20.391,9.569l-17.714,7.453L27.508,68.212v3.111l-6.997,19.442l16.329,20.996 l7.864,21.019l0.477,13.026l5.658,10.284l4.666,3.886l-2.333,2.336l7.002,0.777v6.219l3.886,10.888l8.555,0.778l-8.555,4.363 l-10.11-2.03l1.016,24.043l2.873,11.73l0.777-2.333l4.667,16.329l3.111-0.778L56.047,350.44l

问题 I'm trying to accomplish some animation with sets in Raphael, but even though an opacity animation worked, I cannot succeed in moving a set (or even a circle) around the canvas. I found on the Web that moving a set should be done with setting translation, not x, y positions (as they may be different for each element in the set, and just x and y may not be enough for moving some elements), but it doesn't work for me. Nothing is moving, even though the animation callbacks are executed in time,

问题 UPDATED QUESTION I've updated this to be a little more succinct..: In this fiddle: http://jsfiddle.net/pX2Xb/4/ I have some raphael code that draws 3000 circles to a page. It then attempts to animate all circles at once (changes fill colour) over 10 seconds, which results in a clunky visual animation. Change the number of circles to 20 to see a much smoother animation for comparison. My questions are (a) is it possible for me to make the update to the 3000 elements smoother and (b) if so,

问题 I have a set that only contains a rectangle. var hoverTrigger = this.paper.set(); var outline = this.paper.rect(); outline.attr({ ... hoverTrigger.push(outline) this.sprite.push(hoverTrigger); Upon hover, the rectangle is supposed to expand, and some links are added to it, and upon mouse off, the links disappear and the rectangle becomes small again. hoverTrigger.hover(function () { var link = this.paper.text(); hoverTrigger.push(link); outline.animate({ ... }, function() { link.remove();

问题 I'm using the Raphaël Javascript lib (awesome stuff for SVG rendering, by the way) and am currently trying to update the source of an image as the mouse goes over it. The thing is I can't find anything about it (it's probably not even possible, considering I've read a huge part of the Raphaël's source without finding anything related to that). Does someone knows a way to do this ? Maybe it can be done without directly using the Raphaël's API, but as the generated DOM elements doesn't have IDs

问题 I'm working on a web based editor where one can drag and resize elements. I've faces a problem regarding displaying 1px borders and elements: instead of pixel-to-pixel displaying (e.g. 1px solid line) I got a blurring line. I've found that if I use coords with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything is pixel perfect. Here is the examples. The element before I've changed its coords: And after (with ".5" at the end of each and integer size): The question is how can I

问题 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 <linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="5%" stop-color="red" /> <stop offset="95%" stop-color="blue" stop-opacity="0.5" /> </linearGradient> but how can I reference that from within my javascript? circle.attr("gradient", "myFillGrad");

问题 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 resembles the original as much as possible. (Naturally this won't work if the user intentionally draws something else.) Right now I'm calculating an average x and y position, and I'm distinguishing between horizontal and vertical lines. But it's not yet a

问题 I'm trying to position text within the SVG canvas, by supplying x, y coordinates var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"); but does not position the text like all other objects... x, y coordinates specify the center of the object! Not the "left and top most" pixel! I would like to "left align" the text along a line, same as standard HTML. Help would be very much appreciated. 回答1: Text-anchor property for text method is set to 'middle' by default. If you want to left align it then

问题 I'm trying to use Raphael JS, but jQuery selectors don't seem to work with Raphael JS in IE8. In Chrome and Firefox this works: var paper = ScaleRaphael("test", 500, 500); var c = paper.circle(50, 50, 40); c.node.setAttribute('class','bluecircle'); $('.bluecircle').attr({fill: 'blue'}); But in Internet Explorer (IE8, which uses VML instead of SVG) nothing is shown. Basically what I'm trying to do is to give each object a class, so I can use Jquery selectors to manipulate all objects at once