raphael

问题 I am new to the SVG and Raphael world and am trying to create a radial dial that has a draggable needle. The drag works fine in Chrome, Safari, and Opera. In Internet Explorer the movement is very jittery and and will often return to it's initial starting position. In Firefox, it doesn't work at all :( var paper = Raphael("paper1", 250, 250); var dialCenter = 125; var dialRadius = 125; var dialCircum = 2 * Math.PI * dialRadius; var circle = paper.circle(dialCenter, dialCenter, dialRadius)

问题 I was wondering how to drag a object through a canvas and I've come up with this: JsFiddle Now the thing is: I have two different paths which I need to drag two objects on they (balls), the balls should move on both paths independently on which one I am moving. I am trying to do something like the Google Maps Elevation Service, which you can move a ball along the path and visualize on the other side the elevation that corresponds to that area of the path. (To look forward into this, go to

问题 I'm working on some plugin-like code to simplify moving Raphael paths to fixed positions. Normally, the first part of a Raphael path (which uses syntax based on SVG syntax) is an 'M' moveto command, defining the origin point of the path. Two closely related questions: Is it reasonable to assume that any arbitrary path will begin with an 'M' moveto command? (I suspect the answer is 'no' to this) Assuming 'No' to Q1. above, on encountering a Raphael path array which doesn't begin with 'M' (

问题 I have this code : el.replace(/[0-9]*\.[0-9]*/g, function(x){ return (+x).toFixed(2) }) }; It works great on an individual svg path to trim its decimal places. Now I want to be able to trim all the paths from a paper(svg).To do that I am trying to make a snap svg plugin here: Snap.plugin(function(Snap, Element, Paper, glob){ Paper.prototype.trimPthDec = function(){ this.paper.selectAll('path').forEach( function(el) { el.trim() } ) ; function trim(){ el.replace(/[0-9]*\.[0-9]*/g, function(x){

问题 Hello the answer to this question with this fiddle is perfect for what I need to do - drag something along a path. However they used Rapael - I'd like to update things and use snap.svg instead. Replacing the reference from Raphael to Snap in this answer doesn't work - does anyone have any ideas why? This is as far as I've got in this codepen - I want to have a 10 point shape - the outer points of which can move a long a path to the centre. var s = Snap("#svg"); var paths = [], points = [],

问题 I'm working on a simple game and I need some help to improve my code So here's the game: Some square show and hide randomely for a few seconds and you have to clic on them. I use RaphaelJS to draw the square and a few of JQuery ($.each() function) I work in a div, that's how I draw my squares (6 squares), x y are random numbers. var rec1 = paper.rect(x, y, 50, 50).attr({ fill: "blue",}); Can I use for() to build my squares with a different var name for each one ? I try with var = varName+i

问题 A friend of mine is having some issues while trying to attach click and double click events simultaneously to do different things each own for a certain layer. He is trying to do it with raphael.js and openlayers.js libraries with no success. We did some research and the solutions on this post: on click stopped by doubleclick aren't working completely. Is there an efficient way to do this? Thanks in advance. 回答1: Are you looking for this : var paper = Raphael('area', 300, 300); var r = paper

问题 I have tested recently in the mobile browser which has Raphael canvas where we can draw lines etc using tablet. The speed and precision lacks when using svg to draw on browser for example, the lines breaks in between when drawing even though the touch is not stopped during the move etc. So I m researching on what is used in the drawing app which are working perfectly for touch screens. And if we want to have an drawing app on mobile browser which is best canvas or svg or neither as we don't

问题 I'm trying to draw regular polygons(square and equilateral triangle) inscribed in a circle of a given centre (x,y) and a radius (r). I'm using raphael.js. Here's my function to draw a inscribed square: function draw_square(x,y,radius){ var side= radius*(Math.sqrt(2)); var x = x - (side/2); var y = y - (side/2); var square= paper.rect(x, y, side, side); } Can anyone shed some light on how I could draw an equilateral triangle(inscribed in a given circle)? 回答1: First time I've used raphael, so

问题 I have a large chart produced with Raphael, that I want to display in a printer-friendly page. With smaller charts this works beautifully even down to IE7 (min requirement). But if the chart is too long vertically it doesn't split across pages, instead the bottom is just cut off; this happens in all browsers. Any suggestions as to how I might solve this problem? Preferably without just making it smaller. Thanks 回答1: What you want to achieve is not directly possible. Raphael container element