raphael

Drag, drop and shape rotation with Raphael JS

由 ＊爱你＆永不变心＊ 提交于 2019-11-28 05:35:27
I'm using RaphaelJS 2.0 to create several shapes in a div. Each shape needs to be able to be dragged and dropped within the bounds of the div, independently. Upon double clicking a shape, that shape needs to rotate 90 degrees. It may then be dragged and dropped and rotated again. I've loaded some code onto fiddler: http://jsfiddle.net/QRZMS/ . It's basically this: window.onload = function () { var angle = 0; var R = Raphael("paper", "100%", "100%"), shape1 = R.rect(100, 100, 100, 50).attr({ fill: "red", stroke: "none" }), shape2 = R.rect(200, 200, 100, 50).attr({ fill: "green", stroke: "none"

Raphael JS : how to move/animate a path object?

由 拟墨画扇 提交于 2019-11-28 05:32:57
Somehow this doesn't work... var paper = Raphael("test", 500, 500); var testpath = paper.path('M100 100L190 190'); var a = paper.rect(0,0,10,10); a.attr('fill', 'silver'); a.mousedown( function() { testpath.animate({x: 400}, 1000); }); I can move rects this way but not paths, why is that, and how do I move a path object then?! TimDog With the latest version of Raphael, you can do this: var _transformedPath = Raphael.transformPath('M100 100L190 190', 'T400,0'); testpath.animate({path: _transformedPath}, 1000); This saves you from the trouble of having to clone a temp object. Rudu It seems a

how to use attr's stroke-dasharray,stroke-linecap,stroke-linejoin in raphaeljs

由 风流意气都作罢 提交于 2019-11-28 05:29:58
Can anyone give me an example of these attributes in action: stroke-dasharray, stroke-linecap, stroke-linejoin i tried using them, but i don't quite understand the sentext structure for their values. stroke-linecap Legal Values: butt | round | square | inherit Example stroke-linejoin Legal Values: miter | round | bevel | inherit Example stroke-dasharray Legal Values: comma- or space-delimited list of lengths or percentages, e.g. "100 20 0 20" Example (using above values) Phrogz's answer is great for plain SVG, but this question is also tagged Raphael , where things are similar, but slightly

Convert Raphael SVG to image (png etc) client side [duplicate]

由 本小妞迷上赌 提交于 2019-11-28 05:29:18
Possible Duplicate: Convert SVG to image (JPEG, PNG, etc.) in the browser I have a small project where users construct a diagram using Raphael and then export the composed diagram to an image to save. Problem is it has to run offline. http://www.nihilogic.dk/labs/canvas2image/ will not work as it requires a canvas, not the Raphael generated SVG. Is there a way (javascript) that I can export an image from the SVG? mitch Yes, that duplicate question was a big help. canvg combined with canvas2image sorted me out. So I created the SVG using Raphael. Then on a button click, saved the inner HTML of

Programmatically creating an SVG image element with javascript

由 守給你的承諾、 提交于 2019-11-28 04:57:01
Like my title says, I'm trying to programmatically creating an SVG image element in a HTML page using javascript. For some reason my basic javascript code isn't working, however if I use the raphaeljs library it works fine. So there's obviously a problem with my js - I just can't seem to figure out what it is. (note: the target browser is FF4+) Here is the basic page with an html version of what I'm trying to achieve up the top: <html> <head> <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:/

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

由 倾然丶 夕夏残阳落幕 提交于 2019-11-28 04:16:54
问题 I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful. For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set. When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately. Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I

Raphael JS: how to change the color of certain letters within a text-element?

由 时光怂恿深爱的人放手 提交于 2019-11-28 03:52:23
问题 I have the following code: var set = paper.set(); var text = paper.text(0, 0, 'bla1 bla2' ).attr({ fill: 'blue'}); set.push(text); How can I change the color of the 'bla2' to green now? I've already tried to split the string into two text-elements and assign the coordinates of the 'bla1'+ width of the 'bla1' to the second one. It didn't work since I coundn't find out the width of 'bla1'. The second problem with this solution is that I might want to change the font-size of 'bla1 bla2' which

Attach text on path in Raphaël?

由 余生长醉 提交于 2019-11-27 21:35:59
Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it. There are 2 ways to do this. The easier way is to make use of the Raphael .print() method. This can turn text into paths. Each character gets its own path. Then you can iterate over each character and move and rotate it appropriately using .translate() and .angle() . The harder way is to implement text on path for

raphael.js - custom attributes

由 我怕爱的太早我们不能终老 提交于 2019-11-27 20:29:35
Is it possible to define a custom attribute for a raphael element? e.g. r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f', 'my_custom_attribute':'a value'}); Reason I need this is I want to do some quite complex animation on a whole set of elements and I want somewhere to store the original y coordinate for each one. user568458 Is the custom attribute you want: A simple store for arbitrary data, to be recorded and retrieved? An attribute where a custom action needs to be taken when it is changed (like the attributes controlled with Raphael's .attr() and .animate() )? Something you want

How to achieve 'donut holes' with paths in Raphael

由 ε祈祈猫儿з 提交于 2019-11-27 20:14:28
I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent). According to the W3 path spec : Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects. Can somebody please give a very simple example of how to perform this with a vector path in Raphael ? Thanks very much. This turns out to be quite straightforward if you know the trick. For example this doesn't work : paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" + " M 75 75 L 75 125 L 125
订阅 raphael