I want to draw geometrical figure in the <textarea> of HTML pages, but I'm facing difficulty in how to do that. Could anyone please tell me?
You can use the HTML5 <canvas> element and its javascript API to draw geometric figures in an HTML document. There are many examples and tutorials of its usage, but here is one I found this morning: Mozilla Canvas Tutorial
You can’t draw in HTML <textarea> elements. You can only put text in them. So the nearest you can get to drawing in them is ASCII art.
Related
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/
The problem I have about using the map & area tag is that I havent been able to find out a solution to having "holes" in the area, for example imagine a lake on map, you dont want that area to be clickable.
Example code:
http://jsfiddle.net/WbKqS/
In this example I have placed 3 lakes on the map but I dont want the lakes to have the hovereffect/being clickable, is this possible? Maybe with another technique?
HTML areas don't support having holes or multiple sets of coords, so you'll need to go with a workaround.
How about a solution based on the approach illustrated below?
I don't think this is a good idea to develope this using area map. I would use Raphael instead. a map example with Raphael
You could position other 'hidden' (div) elements over the lakes, preventing the hover effect from being triggered. Disadvantage is shape of the elements (square). Using canvas could be a solution for that, but not all browsers support it.
I wish it worked that way, but it does not as of right now. Try using SVG format instead. That's Scalable Vector Graphics technology. SVGs support holes and multiple shapes or islands if you will.
Hope this helps, it helped me in Firefox.
If that method fails, I'll look into using <canvas> tag.
I was wondering, without using images, how can I show a diagram in an html page? From a 3rd party, I am getting data with coordinates, labels, etc. I need to convert this into something graphic. I suppose SVG is doable but IE has problems with SVG in IE < 9... or so I read. What about canvas? Problems?
Any other options out there?
And, to make things more complicated, at some point, users should also be able to manipulate the diagram. That is, move 'objects' within the diagram around to make it look 'better.'
Thanks
both SVG and canvas are options, but you will probably want to just use a diamgram javascript library without having to write the SVG or canvas code yourself, like raphael, http://raphaeljs.com/
I'd suggest checking out a few of the existing js libraries for drawing graphs. I've listed a bunch of them here.
These libraries have already solved the crossbrowser issues for you, and are usually compatible with all browsers down to IE6.
Is it possible to create a html element inside a Canvas, draw it and than make it, for example rotate using CSS3?
And if it is, does it follow the Canvas settings (for example, lighting of some sort)?
Just a thing that popped into mind, might make an application i'm working on a lot lighter.
No. Any content inside canvas element is only displayed when canvas isn't supported.
I think we can only use css3 operator in canvas and not inside canvas, in some element like img or div:
I think it's possible Look at:
http://christianheilmann.com/2011/09/05/animating-with-canvas-and-creating-css3-animations-with-javascript/
Here is a link for a great Blender 2.6 output plugin that exports a CSS3 HTML page for viewing in your browser. I'm looking to also utilize Jmpress for presentation. http://sokra.github.com/jmpress.js/#/home
I'm using the Blender script now and it works very well (no crashing or freezing). The HTML produced displays fine, now I'm connecting Jmpress to get a final product.
I have created a simple html-based web-page consisting of a form and some text, plus a canvas. I would like to print the page including the canvas on a piece of paper, the problem is - the canvas will not show in the print-out. Is it something I have missed in how to handle the canvas?
I am currently using Opera, any knowledge whether other browsers handle this better?
what you need to do in this case is, have a special print view, where the canvas gets replaced by an image file, which then can be printed out easily.
have a look here: Capture HTML Canvas as gif/jpg/png/pdf?
You need to use the .toDataURL() method to convert the canvas to an image, which you could place on top of the canvas itself for example, prior to printing. Maybe make a print button on the page, which does that stuff, then prints etc...