I'm looking for a framework or library to use the browser as a 2D "drawing" tool.
Acctually drawing is not the right word. It should be a adding, removing and moving around of 2D objects and images on a canvas. The objects should be graphically connectable. So - kind a visio in a browser
I guess it's a bit to much for a javascript library like dojo or prototype but what about a flash framework like flex or openlaszolo?
Thanks!
Most modern browsers now support the <canvas> tag in HTML5, which does pretty much what you're asking for. You can draw directly onto it using Javascript. Also in most modern browsers is support for the SVG graphic format, which again can be manipulated via Javascript to do some very funky effects. The difference between canvas and SVG is that canvas is for bitmap graphics and SVG is vectors. But both are good for 2D drawing.
If you need a library or framework on top of that, you could try something like Raphael, which is a good JS library for drawing vector graphics. It even supports older versions of Explorer, which is a bonus. (if SVG isn't available it falls back to VML).
iLog Exlixir offers some graphing components which would probably help.
OpenLaszlo can definitely do this. Here is a link to an OpenLaszlo application that is an online alternative to Visio:
http://www.gliffy.com/
I also have personally developed and maintained an OpenLaszlo video editing application over the past 6 years that allows you to drag images and videos to different positions and layers similar to what you describe, you can try it here if you want:
http://www.sarolta.tv/web/sarolta-tools/template-editor.html
Related
I want to make an online card-making application. It should basically allow users to place available images into the template of the card, write text on it and decorate it - basic card customization. What javascript graphics library would be useful for this project ? Finally I would like to have a high resolution/vector image as the output which can be printed easily.
Raphael is great for SVG, etc. http://raphaeljs.com
To have a high resolution/vector image, you have to work with SVG (Scalable Vector Graphics), so far the web browser only support this. There are two ways you can do these.
Looking up for canvas libraries. I prefer Raphael as it supports SVG and animations as well.
With HTML5 and its Canvas features also you can create such system.
I´m thinking on coding a couple of examples for my Computational Geometry class (2D), I want to use html5 and javascript.
Can anyone recommend a javascript library or does html5 has everything I need to start?
I will be mostly working with points and lines, but it would be nice to have something that draws a Cartesian plane as a reference and maybe some data structures ready to use.
JSXGraph
Specifically focuses on dynamic geometry and functions visualization. Comes from the academia. Authors – a German university.
Uses SVG (with fallback to Canvas and VML for IE). Works on iOS and Android.
The API is a very abstracted SVG API. It operates on figures and groups of figures, tangents, hyperbolae &c.
Has nice documentation.
SVG is not considered part of HTML5, but it's worth looking at. It's flexible, ubiquitous and, I think, vector graphics is a better option for geometry than bitmaps (Canvas).
I think either raphael should be useful:
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
http://raphaeljs.com/
or processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
http://processingjs.org/
Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.
I can recommend EaselJS because I used it many times to quickly create dynamic drawings, such as triangles, circles, arcs etc. I was even writing a simple draw-with-text tool for students, called Geodrafter.
However, if you want to add e. g. sliders and have a dynamic environment (easily dragging points, for instance), then JSXGraph is a better choice since they provide a variety of components for this. The gallery in their wiki give some good ideas.
And as said above: JSXGraph is based on vector graphics, which will always produce exact graphics. EaselJS is based on canvas and can lead to blurry lines.
I'm starting a new project converting physics simulations(created in Adobe Director)
to a more current platform namely html5 canvas or SVG. I would like to avoid Flash for a few reasons. I'm looking for recommendations and reasons why either canvas or SVG would fit this project best. I have read that SVG is better for interactivity which in this case is important but that it is not the best with animation. Canvas is better at animations but it struggles with interaction so I have heard. Does anyone have experience with the interaction side of canvas, is it really that difficult? Please advise. Thanks
See this question for discussion of canvas frameworks and libraries:
What is the current state of the art in HTML canvas JavaScript libraries and frameworks?
A few of the canvas libraries listed replicate SVG in terms of object interaction to a fairly high standard. fabric.js looks particularly nice and is currently being actively developed.
Interactivity in canvas doesn't have to be all that difficult (there are quite a few js libraries out there to help you). And animation in svg is quite possible to do, see e.g svg-wow.org. Remember that you can mix and match svg and canvas as you see fit in order to use the strengths of each of these technolgies, as demonstrated here.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know
What the trade-offs are between the two
Where the development momentum seems to be.
I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm primarily interested in the most elegant way to create, animate, and manipulate individual items on an SVG canvas.
I've recently used both Raphael and jQuery SVG - and here are my thoughts:
Raphael
Pros: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.
Cons: is a layer over the actual SVG markup, makes it difficult to do more complex things with SVG - such as grouping (it supports Sets, but not groups). Doesn't do great w/ editing of already existing elements.
jQuery SVG
Pros: a jquery plugin, if you're already using jQuery. Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily
Cons: architecture not as extensible as Raphael. Some things could be better documented (like configure of SVG element). Doesn't do great w/ editing of already existing elements. Relies on SVG semantics for animation - which is not that great.
SnapSVG as a pure SVG version of Raphael
SnapSVG is the successor of Raphael. It is supported only in the SVG enabled browsers and supports almost all the features of SVG.
Conclusion
If you're doing something quick and easy, Raphael is an easy choice. If you're going to do something more complex, I chose to use jQuery SVG because I can manipulate the actual markup significantly easier than with Raphael. And if you want a non-jQuery solution then SnapSVG is a good option.
For posterity, I'd like to note that I ended up choosing Raphael, because of the clean API and "free" IE support, and also because the active development looks promising (event support was just added in 0.7, for instance). However, I'll leave the question unanswered, and I'd still be interested to hear about others' experiences using Javascript + SVG libraries.
I'm a huge fan of Raphael and the development momentum seems to be going strong (version 0.85 was released late last week). Another big plus is that its developer, Dmitry Baranovskiy, is currently working on a Raphael charting plugin, g.raphael, which looks like its shaping up to be pretty slick (there are a few samples of the output from the early versions on Flickr).
However, just to throw another possible contender into the SVG library mix, Google's SVG Web looks very promising indeed (even though I'm not a big fan of Flash, which it uses to render in non-SVG compliant browsers). Probably one to watch, especially with the upcoming SVG Open conference.
Raphael is definitely easier to set up and get going, but note that there are ways of expressing things in SVG that are not possible in Raphael. As noted above there are no "groups". This implies that you can't implement layers of Coordinate Transfomations. Instead there is only one coordinate transform available.
If your design depends on nested coordinate transforms, Raphael is not for you.
Oh Raphael has moved on significantly since June.
There is a new charting library that can work with it and these are very eye catching.
Raphael also supports full SVG path syntax and is incorporating really advanced path methods. Come see 1.2.8+ at my site (Shameless plug) and then bounce over to the Dmitry's site from there.
http://www.irunmywebsite.com/raphael/raphaelsource.html
I think it is not totally unrelated but did you consider canvas? something like Process JS can make it simpler.
You should also take a look at svgweb. It uses flash to render svg in IE, and optionally on other browsers (in the cases where it supports more than the browser itself does).
http://code.google.com/p/svgweb/
I will throw my vote behind Raphael - the cross-browser support, clean API and consistent updates (so far) make it a joy to use. It plays very nicely with jQuery too. Processing is cool, but more useful as a demo for bleeding-edge stuff at the moment.
As a Javascript beginner, I found Rapahel samples not so easy, I recommend http://cancerbero.mbarreneche.com/raphaeltut, which is a real Step by step tutorial.
For those who don't care about IE6/IE7, the same guy who wrote Raphael built an svg engine specifically for modern browsers: Snap.svg .. they have a really nice site with good docs: http://snapsvg.io
snap.svg couldn't be easier to use right out of the box and can manipulate/update existing SVGs or generate new ones. You can read this stuff on the snap.io about page but here's a quick run down:
Cons
To make use of snap's features you must forgo on support for older browsers. Raphael supports browsers like IE6/IE7, snap features are only supported by IE9 and up, Safari, Chrome, Firefox, and Opera.
Pros
Implements the full features of SVG like masking, clipping, patterns, full gradients, groups, and more.
Ability to work with existing SVGs: content does not have to be generated with Snap for it to work with Snap, allowing you to create the content with any common design tools.
Full animation support using a straightforward, easy-to-implement JavaScript API
Works with strings of SVGs (for example, SVG files loaded via Ajax) without having to actually render them first, similar to a resource container or sprite sheet.
check it out if you're interested: http://snapsvg.io
Since it's not mentioned here yet:
You should also take a look at Dojox.drawing, which also provides good SVG drawing capabilities. It has a pretty impressive set of features. I'm just starting a project with it, but it seems to me that it's far superior (at least in terms of features) to Raphael and JQuerySVG.
This presentation convinced me to use it instead of Raphael/JQuerySVG:
http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Reference:
http://dojotoolkit.org/reference-guide/dojox/index.html
Reference on Dojocampus:
http://docs.dojocampus.org/dojox/drawing
Download Dojo (including Dojox):
http://dojotoolkit.org/download/
Another svg javascript library you might want to look at is d3.js. http://d3js.org/
I prefer using RaphaelJS because it has great cross-browser abilities. However, some SVG & VML effects can't be achieved with RaphaelJS (complex gradients...).
Google has also developped a library of its own to enable SVG support in IE:
http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
If you don't need VML and IE8 support then use Canvas (PaperJS for example). Look at latest IE10 demos for Windows 7. They have amazing animations in Canvas. SVG is not capable to do anything close to them.
Overall Canvas is available at all mobile browsers. SVG is not working at early versions of Android 2.0- 2.3 (as I know)
Yes, Canvas is not scalable, but it so fast that you can redraw the whole canvas faster then browser capable to scroll view port.
From my perspective Microsoft's optimizations provides means to use Canvas as regular GDI engine and implement graphics applications like we do them for Windows now.
I'm considering developing a website similar to stackoverflow, but the answers may also consist of drawings (schematics, in this case). I want to have an area in the answer form where they can make this schematic without requiring special plugins, etc.
Are we to the point where SVG has or should have critical mass soon (1-2 years) such that designing a website where script-run SVG as a primary feature is reasonable (ie, requiring Firefox or another SVG/AJAX compliant browser)?
What are some good resources for learning cross platform SVG scripting (likely in javascript)?
-Adam Davis
Raphael looks like an interesting take on the problem of cross-browser vector graphics.
Unfortunately, I don't have an answer, but I do have three pointers to projects that you could look at.
The first is the Lively Kernel by Dan Ingalls (yes, the Dan Ingalls) at Sun Labs. It is an implementation of a Smalltalk Virtual World in JavaScript on top of SVG. More precisely, it is an implementation of the Morphic GUI framework from Squeak Smalltalk in JavaScript using SVG and a port of (parts of) Squeak Smalltalk in JavaScript.
Or, if you're not a Smalltalker and the above doesn't make sense to you: it's an Operating System, written in JavaScript with the JavaScript interpreter as the CPU, SVG as the graphics card and the browser as the computer.
This is about as extreme as it gets, when it comes to JavaScript and SVG. And it only fully works in Safari 3 and partly in Firefox 3, although there is an experimental port to Internet Explorer as well.
The second project is John Resig's Processing.js port of the Processing visualization language to JavaScript. It uses the <canvas> element instead of SVG precisely because of the problems that you mentioned. This one however, only works in Firefox 3.
The third one is Real-Time 3D in JavaScript by Useless Pickles. It uses only JavaScript, DOM and CSS and no SVG or <canvas> or Flash or whatever. And it is portable to almost any browser, including Internet Explorer 7 and up. Doing 2D should be even easier than this.
Between those three projects you should be able to find some inspiration and also to find some people who tried to push the envelope with JavaScript and SVG or JavaScript and Graphics and can tell you what works and what doesn't.
Conclusion: doing cross-browser SVG or cross-browser <canvas> is nigh impossible, but with a little bit of craziness, cross-browser graphics without SVG or <canvas> is possible.
SVGWeb is a script that adds near-native SVG capabilities to IE using flash. All the other major browsers support SVG.
http://code.google.com/p/svgweb/
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I've done largish front ends using XULRunner and SVG, but nothing on the web which had to cater for IE.
2/ The two I referred to most often were the SVG pages on mozilla.org and this SVG DOM reference . All of my SVG links are here on delicious
There's one existing editor at http://www.bpel4chor.org/editor/; also if all you want is schematics where all arcs are on a grid, you can do that quite well using divs and images without SVG. Or you could just go the lo-fi route
As #jwmittag mentioned <canvas> is an option.
It works in Saffari and Firefox 3, Opera 9, and people are developing support for IE.
You could easily capture mouse clicks associated with the current tool and properties.
Redrawing the canvas on every page display.
I just finished a project using <canvas> and it's a simple and very powerful API to work with, especially if you have ever done any OpenGL or Cairo work.
Good Luck, sounds like a cool project.