This question is for a web application.
And maybe it's a stupid question but I was wondering if there is a way to
generate a polygon with 4 points, so that the user can himself drag
each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to
find anything after a few hours of search.
Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.
SVG Specs: http://www.w3.org/Graphics/SVG/
Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/
Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.
Sounds like a job for the <canvas> tag or a Flash interface.
Related
I'm working on a project where workers have to locate components on a plane. Planes are going to be scanned and put on a web app where, after that, user select where are placed.
My first idea was img map (where I work, computers still have IE, we are trying to change to Firefox or Chrome) but I'm not sure how make an area visible for user (some kind of dynamic overlay coloured area), so my second suggestion was to use a HTML 5 canvas.
Is better to work with an img map and find some solution to overlay points at least or work with canvas?
Note: where I work, they have to change to non-Windows OS, and use Firefox-based browser or Chromium, so the browser have not be seen as part of the problem.
Yes, I'd suggest to use a canvas to do that.
Quoting from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial:
<canvas> is an HTML element which can be used to draw graphics using
scripting (usually JavaScript). It can, for instance, be used to draw
graphs, make photo compositions or do simple (and not so simple)
animations. The image on the right shows some examples of <canvas>
implementations which we will see later in this tutorial.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and
later implemented in Safari and Google Chrome. Gecko 1.8-based
browsers, such as Firefox 1.5, also support this element. The <canvas>
element is part of the WhatWG Web applications 1.0 specification also
known as HTML5.
This tutorial describes how to use the <canvas> element to draw 2D
graphics, starting with the basics. The examples provided should give
you some clear ideas what you can do with canvas and will provide code
snippets that may get you started in building your own content. Before
you start
Using the element isn't very difficult but you do need a
basic understanding of HTML and JavaScript. The <canvas> element isn't
supported in some older browsers, but is supported in recent versions
of all major browsers.The default size of the canvas is 300px * 150px
(width * height). But custom sizes can be defined using CSS height and
width property. In order to draw graphics on the canvas we use a
javascript context object, which creates graphics on the fly.
So, to explain my scenario: I want to create an online "finite state machine"-webapp which is capable to visualize the automaton-concepts (deterministic, non-deterministic) and later on does some logic like minimizing and so on to help students comprehend these abstract concepts in a way of experimenting around.
So for my views, I thought about JSPlumb as the way to go (other recommendations are appreciated) - but I can't find the option to "resize" the HTML5 Canvas in JSPlumb. For lets say automatons with 100 nodes, a 640x480 canvas wouldn't be very nice, so what it should be is, starting with a canvas of 640x480, clicking and dragging on the side of the canvas, the user could extend it to its needs. Sure about that, the previously drawn elements should keep their places.
So, my question is: Is it possible to do this with jsplumb or do I need to code it myself? If I need to code it myself, any hints on where to start changing the jsplumb files would be highly appreciated.
JSPlumb is not using the canvas, as far as I know, it's using SVG or VML on old IE browser.
This problably means that you can resize the SVG object via the appropriate width & height property, but AFAIK, this is not automatic.
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?
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
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit