My goal is to create a curved arrow like this one, on an html5 canvas:
I have found several resources on how to draw lines but none of them seem to work. I also found a related stackoverflow post.
Also, is it possible to animate it on hover in order to expand the arrow, using an elastic effect maybe?
Raphael and canvas both have some limitations when it comes to drawing lines in a pen-on-paper style. I've found the best way to simulate such a thing is to iteratively transform a 1-pixel path into a target path, as in this fiddle: http://jsfiddle.net/zPRha/31/ With a little work, you could calculate the angle between the last two points along the path and transform/rotate an arrow path to match the line as it is drawn. It's not an ideal solution, but it would work.
Raphael's built in hover support makes zooming/unzooming extremely easy. My understand is that such handling would be rather more obtuse using canvas natively, though I'm sure some canvas libraries have automated away this concern.
Here is an updated fiddle with optional support for an arrow: http://jsfiddle.net/kevindivdbyzero/JPqXF/
I think you should use SVG with CSS3 transitions to do this kind of stuff.
Related
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I have to place on a web page a cylinder that looks like this:
it is composed by small images that overlaps to draw the curves on the surface. Every one of them is places on the page with a different img tag enveloped in an anchor with its own href. The z-index property of the img is used to make them overlap in the right way.
The cylinder has to be composed because it is dynamically created, as you can see from the image, its faces can have different colors.
What i need to do is to make all the faces clickable and each one has to point to a different URL.
My problem is, of course, that the cylinder has curves. And i have to be sure that the clicks points to the correct URL especially near the curves, it hasn't to be precise at pixel level, but at least acceptable.
I've tried to use a map with a single area for each of the images that composes the cylinder, but of course it didn't work, as i saw from the specifications, in such cases only the first declared map in the DOM works.
I'm thinking about to solve this via Javascript, but i think it wouldn't be an easy job, so i would be happy if someone can give me some advice on what should i try.
Oh, i cannot use HTML5 features to solve this.
Neat application of older technology to solve a challenging puzzle.
I can think of two ways forward for you. One is to put a transparent (rectangular) image on top of the cylinder and create an HTML image map, using the shape="poly" attribute. For resources, search for the HTML elements map and area for reference, especially the shape attribute. There should be many good tutorials online. Nowadays this technique isn't used that much any more, but it was really popular in the late 90s.
Another way is to use event delegation in javascript, attaching an event listener to the primary container. On each of your image "pixels" apply a CSS class for the appropriate portion of the cylinder it is in. In your event handler, you can do something differently depending on the class of the clicked on image, and you can do this without the massive overhead of attaching an event on each individual "pixel". In JQuery this would be something like:
$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }
assuming you put class="green" on your green pixels and class="red" on your red pixels. (You can do this by quadrant or other technique; color is just an example).
Your best luck SVG ! https://developer.mozilla.org/en-US/docs/SVG/Tutorial
It is almost impossible with html dom elements to do this, you will have to bend it with CSS compatible all browsers.
There is also Canvas but you will have a hard time dealing with the clicks.
Only problem with SVG is that it's not supported in < IE8, and hardly in IE8. But bending a DOM element is also not available < IE9.
EDIT:
I saw that you can't use HTML5, so your only chance is generating the whole image in GD2 for example and trying to map the points. But what is the reason you can't use HTML5 ?
You might also try doing it using javascript / canvas via getImageData() function. This canvas function will rgba values of the given point. Using the alpha value you can check if mouse is over or clicking on the correct area or if it is a transparent area and nothing should happen.
I also made jquery plugin exactly for this purpose. Maybe it might help. http://www.cw-internetdienste.de/pixelselection/
I'm new in drawing with HTML5 canvas, now, I've done the following demo:
https://dl.dropbox.com/u/4423757/demo2Canvas.html
so here are my questions:
How can I make disappear the red lines in the silver shadow?
Should use SVG in this case?
Thanks!
You should not use SVG because it is much harder to make animations and SVG is not even efficient for that.
About the main problem, I couldn't solve it but I think that it is caused due to the fact that the shadows are being drawn in exactly the same place has the "155%" are. So to solve this, assuming I'm correct, the shadows need to be thicker.
I am trying to create a similar effect as seen here:
http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/
However, I can't seem to get this to work on my page and I would like to apply this effect in a div that contains an image. Is this possible or does everything have to happen on the canvas?
When I try to recreate the effect described in the tutorial I get lots of errors such as variables not being defined etc.
You could re-create this using Canvas, or using CSS transformations and shadows, or a mixture of the two. As for the undefined variables, I can't help as you've not posted your code.
A clean approach would be to do everything within the canvas, using JavaScript. You can draw both the foreground grass, and background mountains to the canvas. However if you want to partly use a <div>, you can overlay the div on top of the canvas using CSS position:fixed or position:absolute, also using CSS z-index to set their order.
I recommend the following link, scroll down for the image drawing:
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
I don't know how else I can help, as the tutorial that you've provided explains everything quite well. But if you've got any further queries, feel free to comment, or update your question.
You can use the proton particle engine easily achieve the effect you want, Its API is very simple.http://a-jie.github.io/Proton/
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.