codequest
asked on
Drawing Shapes in HTML5
I am currently creating an asp.net webpage diagram using images for rectangles, rounded rectangles and arrows.
Does HTML5 / CSS3 offer ways to display such graphics without resorting to images?
Any guidance on this would be appreciated.
Thanks!
Does HTML5 / CSS3 offer ways to display such graphics without resorting to images?
Any guidance on this would be appreciated.
Thanks!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Scott Fell
Do you want to supply a simple graphic image of what you are trying to achieve?
ASKER
Sample attached. Text would overlay the graphics. The arrowheads might need to be larger.
diagram-sample.png
diagram-sample.png
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the inputs. The target is a dynamically drawn diagram. It has a very specific layout that it has to follow, so the Jquery flowchart programs would probably not work. Those are Very interesting though. It could be also that CSS is not a solution because ie8 does not support rounded border radius, although by app release date it may be feasible to say Ie8 is not supported. At any rate these are very good and eye-opening suggestions.
I guess one more requirement that i'm not sure how would work in CSS is that the diagrams need to be scalable, with a zoom slider, not just through browser Pinch and zoom. Any suggestions on that would be appreciated. Thanks!
I guess one more requirement that i'm not sure how would work in CSS is that the diagrams need to be scalable, with a zoom slider, not just through browser Pinch and zoom. Any suggestions on that would be appreciated. Thanks!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for the inputs. These have been very educational, and I'm getting the sense I can accomplish what I want without using images.
There are two more requirements that I did not spell out (sort of buried them under the phrase "dynamically drawn".)
1) the elements of the diagram may be re-positioned on the fly.
2) the elements of the diagram may change size in relation to the other parts.
The raw information about size and position of all the diagram parts will be recalculated on the servers after any user action, sent to the browser via JSON and then translated into DOM. It seems like I should be able to make the necessary CSS generation part of the translation from JSON into DOM.
Confirmation on that would be appreciated. The rest I'm confident I can figure out from the examples that have already been provided.
There are two more requirements that I did not spell out (sort of buried them under the phrase "dynamically drawn".)
1) the elements of the diagram may be re-positioned on the fly.
2) the elements of the diagram may change size in relation to the other parts.
The raw information about size and position of all the diagram parts will be recalculated on the servers after any user action, sent to the browser via JSON and then translated into DOM. It seems like I should be able to make the necessary CSS generation part of the translation from JSON into DOM.
Confirmation on that would be appreciated. The rest I'm confident I can figure out from the examples that have already been provided.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Very helpful comments, all. Thanks!