raphael | 易学教程

AngularJS how to bind data with SVG widget

阅读更多关于 AngularJS how to bind data with SVG widget

问题 I know that this is usually not the way to use AngularJS but I was wondering if what I want to achieve is doable with AngularJS. If this is not the recommended way could you please provide hints on how to achieve this? Please consider that I am new in the web programming area. So in my project I draw using SVG & RaphaelJS several widgets on a canvas that is placed within the "holder" div. I am trying to bind this widgets to data using AngularJS, basically each widget is linked to an object in

Creating a linear transparent gradient to a div

阅读更多关于 Creating a linear transparent gradient to a div

I'd like to create a linear transparent gradient to a div. Is there any way to do that with jquery? Or should I use some other library like raphaeljs? I'd like to achieve an effect like the following: Why not keep it light and browser compatible. div { backgroud-image: url('images/gradient.png'); background-repeat: repeat-x; background-position: top right; } Christian Tellnes You can do it with CSS3: E.g. div { opacity: 0.5; background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background:

Raphael: Gradual animation slowdown with simple infinite animation

阅读更多关于 Raphael: Gradual animation slowdown with simple infinite animation

问题 This question is similar in spirit to this other question, asked two years ago: Why does Raphael's framerate slow down on this code? I'm using Raphael 2.1.0 in Chromium 25 in the following way: <html> <head> <title>Drawfun</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <script src="raphael.js"></script> <script> var paper = Raphael(10, 50, 320, 200); var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity); var rect = paper.rect(50, 40, 10, 20); rect.attr(

How can I add an <image> element to the SVG DOM

阅读更多关于 How can I add an element to the SVG DOM

问题 I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael. I want to allow the user to save a merged rasterised version of this when they are done (i will be doing something else with SVG version myself) When the user clicks save I want to add that background image to the generated SVG DOM as an element and then use canvg to write the SVG to a canvas element. Finally I use the toDataUrl() method to turn that into a jpg. I can't get the middle bit to work

Put label in the “center” of an SVG path

阅读更多关于 Put label in the “center” of an SVG path

问题 I'm trying to draw a label on a polygon of an svg file. The problem I'm facing is to find out roughly the center of this polygon to place the label, as the path's coordinates are in svg format and need to be parsed. Is there an easier way to determine the center of an svg polygon (maybe someone can point out a javascript library or a snippet)? I'm using Raphael javascript library to manipulate the svg, but it doesn't seem to go beyond the standard svg functionality. 回答1: You could try the

How to add and remove glow for Raphael element?

阅读更多关于 How to add and remove glow for Raphael element?

I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out how to add the glow, but I am having trouble removing it. Here is what my script looks like: $(document).ready(function() { var paper = Raphael(0,0,360,360); var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); myCircle.hover(function() { myCircle.glow().attr('stroke','#FFF'); }, function() { // removing the glow from the circle?? }); }); So the part that works is adding the glow to the circle when I hover over

Raphael JS: how to find path of an SVG image?

阅读更多关于 Raphael JS: how to find path of an SVG image?

问题 Using GIMP I have obtained path of each continent in http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg but now I am not able to figure out how to convert this SVG file into something like (picked from https://github.com/thomaspeklak/raphaeljs-worldmap): Can you please guide me how I can convert the SVG path to Raphael Path ? africa.push(W.path("M13728 10231 c-34 -19 -84 -21 -109 -5 -6 4 -15 1 -19 -5 -5 -9 -14 -9 -35 1 -22 10 -29 10 -33 0 -2 -6 -11 -12 -21 -12 -9 0 -23 -6 -29

How to save an svg generated by raphael

阅读更多关于 How to save an svg generated by raphael

问题 Is there a way to save the SVG generated by raphael as an svg file. Note it only need to work in chrome. 回答1: As stef commented, the BlobBuilder API is deprecated. Instead, use the Blob API. Building on Andreas' answer, here is how I quickly got it to work: svgString = r.toSVG(); a = document.createElement('a'); a.download = 'mySvg.svg'; a.type = 'image/svg+xml'; blob = new Blob([svgString], {"type": "image/svg+xml"}); a.href = (window.URL || webkitURL).createObjectURL(blob); a.click(); 回答2:

Apply Hover event in Raphael on a set of paths

阅读更多关于 Apply Hover event in Raphael on a set of paths

When I put a hover event on a raphael set, the efect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, not the fill of the whole set at the same time. For example, in this map, when you pass through canada with the mouse, the mainland changes its color, but all the ice islands stays on the same color. This is my code. drawSets: function(){ for (country in this.setsArr){ var setset= R.set(); var zone = this.setsArr[country]; for (group in zone){ var path = R.path(this.setsArr[country][group].path); setset.push( path ); } var attri = this

How to use eve() in Raphael?

阅读更多关于 How to use eve() in Raphael?

Can some one give me a simple example of Raphael eve() ? I don't quite understand the parameters and how to call events. I was searching around for a bit but seem like not so many people have used it. Simple example of the event functionality in Raphaël : We define the function that will fire the event function bar() { var a, b; a = 1; b = 2; eve("run-foo", "self", a, b); } The event listener function function foo(arg1, arg2, arg3) { // if the event is fired from bar() : // this == "self" // arg1 == a == 1 // arg2 == b == 2 // arg3 == undefined/null } eve.on("run-foo", foo); http://jsperf.com