raphael | 易学教程

How to update the source of an Image

阅读更多关于 How to update the source of an Image

I'm using the Raphaël Javascript lib (awesome stuff for SVG rendering, by the way) and am currently trying to update the source of an image as the mouse goes over it. The thing is I can't find anything about it (it's probably not even possible, considering I've read a huge part of the Raphaël's source without finding anything related to that). Does someone knows a way to do this ? Maybe it can be done without directly using the Raphaël's API, but as the generated DOM elements doesn't have IDs I don't know how to manually change their properties. I'm actually doing CoffeeScript, but it's really

Blurring borders in SVG (Raphael.js)

阅读更多关于 Blurring borders in SVG (Raphael.js)

I'm working on a web based editor where one can drag and resize elements. I've faces a problem regarding displaying 1px borders and elements: instead of pixel-to-pixel displaying (e.g. 1px solid line) I got a blurring line. I've found that if I use coords with .5 at the end (e.g. 10.5, 124.5) and integer sizes, everything is pixel perfect. Here is the examples. The element before I've changed its coords: And after (with ".5" at the end of each and integer size): The question is how can I force Raphael.js to display everything in sharp? I'm not sure how to do this in Raphael, but a tiny bit of

Rendering SVG polygons in Raphael Javascript library

阅读更多关于 Rendering SVG polygons in Raphael Javascript library

As far as I know, there is currently no way to display SVG polygons in the Raphael Javascript library. I'm building an application that needs to read in SVGs and them display them in Raphael, however, many of these SVGs use polygons. For example, I'm reading in an SVG with a polygon in this format: <polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25... So, I'm wondering...is there a way to convert the polygon points into a path which I could draw in Raphael? I've seen a few applications using python and PHP, but so far I can't find anything that is strictly javascript. Any

pointer-events: none VML raphael solution

阅读更多关于 pointer-events: none VML raphael solution

问题 I have implemented pointer-events: none on a Raphael element using jQuery like this: var raphaelElement = Raphael.ellipse(x,y,w,h); $(raphaelElement.node).css({'pointer-events': 'none'}); This works fine but of course in IE8, Raphael uses VML instead of SVG and this solution fails. Does anyone have another solution to essentially make a Raphael element ignore events. 回答1: The only way to make this work for IE8 (and earlier) would be to actually catch the event, and in the event handler: hide

Is there some well-known algorithm which turns user's drawings into smoothed shapes?

阅读更多关于 Is there some well-known algorithm which turns user's drawings into smoothed shapes?

My requirements: A user should be able to draw something by hand. Then after he takes off his pen (or finger) an algorithm smooths and transforms it into some basic shapes. To get started I want to transform a drawing into a rectangle which resembles the original as much as possible. (Naturally this won't work if the user intentionally draws something else.) Right now I'm calculating an average x and y position, and I'm distinguishing between horizontal and vertical lines. But it's not yet a rectangle but some kind of orthogonal lines. I wondered if there is some well-known algorithm for that,

How to create gradient object with Raphael

阅读更多关于 How to create gradient object with Raphael

I was trying to use Raphael JS graphics library. I would like to use the attribute gradient which should accept an object. Documentation says to refer to SVG specs. I found the gradient object in SVG, for instance <linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="5%" stop-color="red" /> <stop offset="95%" stop-color="blue" stop-opacity="0.5" /> </linearGradient> but how can I reference that from within my javascript? circle.attr("gradient", "myFillGrad"); doesn't work :) Thanks in advance UPDATE: Rewritten for the latest Raphael API: <!DOCTYPE html PUBLIC "-/

raphaeljs drag and drop

阅读更多关于 raphaeljs drag and drop

I am using rapaeljs for my web app. I want to set dropable boundries of the object. Object can move in dropable area. Once an object come in dropable area, there should be no way out for the object. Raphael has built in drag and drop support through .drag() . Use it in the form element.drag(start, move, up); Where the 3 arguments are 3 function references to the functions you write that deal with the mousedown, movement, and mouseup events respectively. Note how this.ox and this.oy is used to store the starting positions and dx and dy is used for the movement. The following implements a drag

Raphael draw path with mouse

阅读更多关于 Raphael draw path with mouse

I'm using the raphael javascript library, and I'd like to draw a straight line using the mouse. I'd like to let the user click somewhere, place a single point of the path, and then have the line follow the mouse until they click again, at which point the line is placed permanently on the canvas. Right now the only way to do that seems to be to create a path when they click, constantly remove and redraw it when they move the mouse, and then create it once more when they click again, keeping track of the drawing mode all throughoutj. While this works, it's a bit convoluted and messy (especially

How to drag a shape along a given path

阅读更多关于 How to drag a shape along a given path

I've this simple dummy file that I'm using to do some testing. The intended result is to drag the red circle along the path. The thing is that I can't figure out how to associate both shapes. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="raphael-min.js"></script> </head> <body> <script type="text/javascript"> // Creates canvas 320 × 200 at 10, 50 var r = Raphael(10, 50, 320, 200); var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z").attr({stroke: "#ddd"}), e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}), /*var c = r.circle(100,

How to make a Raphael fill pattern move with the element? (background image position relative to the element)

阅读更多关于 How to make a Raphael fill pattern move with the element? (background image position relative to the element)

问题 How can I give a Raphael element a fill that moves as the element moves, like how the CSS background-image of a position: absolute; HTML element would keep the same position relative to its location as it moved? Here's an example demo: how can I make the background image pattern of the Raphael element (the triangular path) behave the same while dragged as the HTML element (the square div)? http://jsbin.com/oxuyeq/8/edit This question is essentially the opposite of How to make a pattern “fixed