Graphical editor using Javascript - javascript

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.

Related

How to create modeling tool in html5

A diagram tool in html 5 with drag and drop functionality including the connectors.
consider a drawing tool with rectangle circle and a data store getting connected through arrows on mouse clicks and then generating a XML file for the same.
I will recommend you to use SVG, which specification is accessible here; along with DOM & CSS
[EDIT]
Why not Canvas & its 2D API? Because the export to (png, ...) is not as efficient and powerful as SVG. After all, it's just a modeling tool
The OP may want to try gojs.
gojs is a sophisticated JavaScript library for drawing diagrams utilising the html canvas, available from http://www.nwoods.com/products/gojs/. It is not a 'free' product but there is a free-to-use trial version that is fully functional save for displaying a watermark on the diagram.
It abstracts from primitive drawing operations to a much higher level and offers many diagram type (org charts, flow diagrams, etc, etc) that are quick to create and live rather than simply being drawings. It uses a model-view approach to diagramming which is very productive. It supports drag and drop within diagrams and from a palette of components.
Their support is good too.
I have no relationship to the vendor, other than being a happy customer.

alternative to SVG's flowRegion

I would like to design an in-browser graphical (WYSIWYG) editor that can handle multiline text-boxes and column-like behaviour.
My first thought was to use SVG, which I can interact with it's DOM tree and manipulate it, finally exporting it's SVG code and using <flowRoot>,<flowRegion>,<flowPara> etc., then I came to understand that those features are part of SVG 1.2 specs and are not supported by browsers but only by few SVG renderers such as Inkscape, which drove me back to the drawing board.
(I modified the latest version of svg-edit to test-drive and then came to this conclusion)
At the back-end server level - I would like to be able to transform it to a PDF, which easily can be done with SVG, Postscript, PDF (duh) and maybe other formats.
HTML5's Canvas API is not an option because it's limited to raster images which will greatly reduce the content's quality.
What design approach would you recommend?

Computational Geometry Javascript

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.

2D Canvas in Browser

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

Javascript image handling library

I need to some extra functionalities to a website regarding image handling.
The user must be able to pane, zoom and rotate images on a image gallery.
Is there any free javascript library/framework that handles this actions?
Raphaël—JavaScript Library
is a good one
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.
Raphaël uses the SVG W3C
Recommendation and VML as a base for
creating graphics. This means every
graphical object you create is also a
DOM object, so you can attach
JavaScript event handlers or modify
them later. Raphaël’s goal is to
provide an adapter that will make
drawing vector art compatible
cross-browser and easy.
loupe.js has an excellent zoom functionality.
http://www.pixastic.com/ --> looks real nice, I am just curious about other opinions as this is an area I am new at.

Categories