raphael

问题 I have a circle which I move it around, how can I make for the glow effect to follow that circle. circle = paper.circle(x, y, 5); glowSet = circle.glow({ 'fill': true, 'color': '#bbb' }); // ... // I animate the circle later on using circle.animate({ cx: coordX, cy: coordY }); I've tried with animate on the entire set glowSet.animate({ x: coordX, y: coordY }); I've tried to apply to each item using forEach over the set glowSet.forEach(function(item) { item.animate({ x: coordX, y: coordY }); }

问题 Check this Code window.onload = function(){ var paper = Raphael(0,0,1000,1000); var path1 = "M67,100 C67,180 200,180 200,100 C190,095 177,095 167,100 C157,105 143,105 133,100 C123,095 110,095 100,100 C90,105 77,105 67,100z"; var path2 = "M67,100 C67,180 200,180 200,100 C190,105 177,105 167,100 C157,095 143,095 133,100 C123,105 110,105 100,100 C90,095 77,095 67,100z"; var bowl = paper.path(path1).attr({"fill":"black"}); var anim = Raphael.animation({ "50%" : {path:path2}, "100%" : {path:path1}

问题 Very new to using Raphael.js I'm looking at the tutorials and I am able to create a circle. But how would I scale the circle to double the size over two seconds. 回答1: Assuming your circle is created like: var circle = paper.circle(50, 40, 10); You can scale it up over two seconds like: circle.animate({ transform: 's2' }, 2000, 'easeIn'); You could also just double its radius if it is fixed. 来源： https://stackoverflow.com/questions/9866684/raphael-js-scale-an-element-over-time

问题 Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row. $(document).ready(function(){ $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 10, 200); R.text(5, 100, $(div).find('span').text()) .rotate(-90, true); $(div).find('span').hide(); }); });

问题 Using the following code, and inspired by this question, I managed to have vertical column headers in an HTML table, compatible with Internet Explorer. Now the last detail I need to set is the header vertical alignement : I'd like to have my headers fixed to the bottom of their row. $(document).ready(function(){ $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 10, 200); R.text(5, 100, $(div).find('span').text()) .rotate(-90, true); $(div).find('span').hide(); }); });

问题 Background : I'm using Raphael to create an animated border effect for a series of <li> s with child <a> elements. The concept is that before hover, a block <li> element will have 4 90-degree corner borders (see fig. 1). Then on hover, each corner border will extend one of its arms to meet the next, creating a full border around the element (see fig.2). Progress : I've achieved the corner borders effect (the look before hover) using a Raphael canvas positioned absolutely beneath the child <a>

问题 I'm drawing a curve from point A to point B. I know coordinates of points. How can I draw this curve. I have used example from Raphael site http://raphaeljs.com/curver.html, but I didn't understand how I should insert my own values to that function. 回答1: Raphael is not computing a function for the curve, it directly uses SVG paths. Full spec is here http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands . In the example the path is defined here; path2 = [["M", x, y], ["L", ax, ay], ["M",

问题 I was wondering if it's possible to change the attributes of a substring of the text object in Raphael. For example, I want to bold the word wizard in the following string "The magical wizard ruled the world!" in a raphael text object. I have looked at using the Raphael.print() method and I need some of the attributes from text for other portions of the code. 回答1: Fonts are set at the element level, much like in regular html. In order to apply a separate font or style to a specific word, you

问题 I'm using Raphael 2.1.0. When I animate the opacity of a transparent PNG under IE8, the transparency animates well. ie: 'from' an opacity of 0.0 'to' an opacity of 1.0. After the opacity animation has ended, I want to set/restore the image's position/opacity to a pre-animation state, but the alpha channel of the image becomes opaque. Where there was once a transparent background there is now a white square. With an SVG renderer - Chrome and Firefox - things are fine. I've tried chaining the

问题 i am trying to add more connecting points to shapes in graffle example, so far i have computed the connecting points available to the rectangle shape as my app will have only rectangles for now and added them to the array p. the main thing i can't understand is how to modify the connection main loop to use the connecting points which are closer and are not already used. the objects are moveable so i guess i would have to change the loop to get the direction of the objects and the closest free