raphael

问题 I would like to make a mouse event that triggers when the mouse is near a Raphael element. (So I guess I would need to know the x,y position of the mouse. Any ideas on how this might be possible? Thank you! 回答1: You could, as you suggest in the question, track the mouse position and compare it with the position of the element. But that's doing things the hard way. Far easier would be to exploit the mouseover or mouseenter events. Obviously mouseenter and mouseover are only triggered when the

问题 I'm in the process of creating a little 'infographic' using raphael js. The infographic will render a number of circles with some text inside. The number of circles isn't know and will depend on the data it gets fed. I thought that I would organise the raphael objects into sets, one for each circle and then move those sets into one 'container' set but I am having trouble accessing them programatically using something like: console.log(ss[0].circle); Here is a snippet of the code im using to

问题 I'm using RaphaelJS for visually representing some data. The underlying technology is SVG so obviously things don't always work that well in IE, but the library does a relatively ok job of still rendering something useful, although it often tends to look pretty poor. In any case, I can't seem to get around this basic issue. Text is rendered fine in Chrome or FireFox, but everything renders as bold and italic in IE8. To see my issue in action, go to the RaphaelJS playground and use the

问题 I am building a custom chart with Raphael.js which includes arcs and percentages. The text label of an arc needs to move with the arc. I have achieved this by using the onAnimation callback and getting the point of the outer arc and position the text label accordingly: var paper = Raphael("paper", 200, 200); var centerX = paper.width / 2; var centerY = paper.height / 2; // This is a dummy percentage; in real app this corresponds to actual value var percentage = 0; paper.customAttributes.arc =

问题 i'm using the excellent raphaeljs library and after having created a path with var c = paper.path("M10 10L90 90 ..... z"); i would like to get the position of the click event on the path relative to the canvas. I tried: c.click(function (event) { alert(event.pageX); })); but that gives me a value which is not relative to raphael's canvas. Any idea? thx 回答1: Something like var x = Math.floor((event.pageX-$("#paper").offset().left)); Obviously this is using jQuerys $ to get the paper element..

问题 What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome. What I have done (and did not work) is to set the font family using css and/or as a raphael attribute. The code is the following: HTML <div id='share-facebook'></div> CSS #share-facebook { font-family: FontAwesome; } Javascript var canvas = Raphael('share-facebook', 100, 100); var facebookWrapper =

问题 I am using linegraph of graphael. I have this line to produce my graph var lines = r.linechart(30, 30, 600, 440,[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71]],[[0.03091,0.00461,0.0068,0.00144,0.00544,0.00035,0.00871,0.03117,0.02259,0.02623,0.01967,0.01967,0.00788,0.02217,0.0137,0.01237,0.01764,0.0131,0.00942,0.0076,0.01463,0.02882,0

问题 I am looking at this example. How this can be done using Raphael for below example ? Raphael("canvas", function () { var win = Raphael._g.win, doc = win.document, hasTouch = "createTouch" in doc, M = "M", L = "L", d = "d", COMMA = ",", // constant for waiting doodle stop INTERRUPT_TIMEOUT_MS = hasTouch ? 100 : 1, // offset for better visual accuracy CURSOR_OFFSET = hasTouch ? 0 : -10, paper = this, path = "", // hold doodle path commands // this element draws the doodle doodle = paper.path

问题 I want to make an interface that looks like this So here is what the user can do 1- Connect people to each other 2- See some information about each person (the balloon) 3- Move these objects around without them loosing their connections Then I want to save these connection information using ajax, so that I can see who is connected to who, I also need to redraw these diagrams next time the user sees the page. It seems like jsPlumb, paperjs, and raphael can all do this and a lot more, my

问题 I am using Raphael JS for creating linearGradient in SVG tag. While checking SVG using inspect element i see this: I ve written small piece of code for illustration: <svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"> <defs> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"></path> <marker id="raphael-marker-endblock5520" markerHeight="5" markerWidth="5" orient="auto" refX="2.5" refY="2.5">