raphael

Same hover function for multiple paths in Raphael

由 别来无恙 提交于 2019-12-03 03:32:15
So I've got my canvas and my paths: var paper1 = Raphael(10, 50, 960, 560); var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z"); var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z"); var mapShape3 = paper1.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73

Raphael js. Fill color along a curve

由 匿名 (未验证) 提交于 2019-12-03 03:03:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have created a circle in which I can choose two points along the circumference of of circle. I want to fill the portion between those two points. Demo If you see the demo, I want to fill the angle between two points. JS: (function (Raphael) { Raphael.colorwheel = function (x, y, size, initcolor, element) { return new ColorWheel(x, y, size, initcolor, element); }; var pi = Math.PI, doc = document, win = window, ColorWheel = function (x, y, size, initcolor, element) { size = size || 200; var w3 = 3 * size / 200, w1 = size / 200, fi = 1

AngularJS how to bind data with SVG widget

由 99封情书 提交于 2019-12-03 03:01:48
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 the CustomController. How can I access the CustomController when I initialize my widgets? <html lang=

Raphael: Gradual animation slowdown with simple infinite animation

由 匿名 (未验证) 提交于 2019-12-03 02:49:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: 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("fill", "#f00"); rect.attr("stroke", "#fff"); rect

Raphael paper zoom animation

由 匿名 (未验证) 提交于 2019-12-03 02:47:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I managed to do some hack in order to zoom raphael paper, as setviewbox wasn't working for me, here is the function I wrote: function setCTM(element, matrix) { var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")"; element.setAttribute("transform", s); } Raphael.fn.zoomAndMove = function(coordx,coordy,zoom) { var svg = document.getElementsByTagName("svg")[0]; var z = zoom; var g = document.getElementById("viewport1"); var p = svg.createSVGPoint(); p.x = coordx; p.y = coordy; p

Raphael: Gradual animation slowdown with simple infinite animation

由 Deadly 提交于 2019-12-03 02:46:25
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("fill", "#f00"); rect.attr("stroke", "#fff"); rect.animate(anim); </script> </body> </html> Initially,

Photoshop Custom Shape to SVG path string

由 妖精的绣舞 提交于 2019-12-03 02:44:30
问题 Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this: http://raphaeljs.com/icons/ 回答1: Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do: File -> Export -> Export as... and select SVG in the file settings. Original Answer: Starting from Photoshop CC 14.2, you can create

How can I check if something is a Raphael object?

由 匿名 (未验证) 提交于 2019-12-03 02:30:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: Given a JavaScript object, how can I check if it is a Raphael object (not the paper, but a circle, path, etc.)? Raphael.el represents the generic element prototype; I think I want to test x.__proto__ === Raphael.el in a cross browser way, but I am not completely sure. 回答1: To elaborate a little and add some more relevant info (it took me a little while to figure out the accepted answer, and I'm clearly not alone looking at the other answers, also, the accepted answer only works for one type of Raphael object: it solves the original question,

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

由 不想你离开。 提交于 2019-12-03 02:11:13
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 —what is the best way to add the image to the DOM? When i use the below code I get a javascript error that

Put label in the “center” of an SVG path

由 匆匆过客 提交于 2019-12-03 02:10:00
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. You could try the following approximation for doing something similar to the polygon suggestion, based on SVG DOM methods: var
订阅 raphael