I found an answer to zooming and panning images efficiently in GWT, but does anyone know how to implement a HTML canvas zoom and pan with links in GWT?
i think this might help you. meanwhile im gonna try this as well since i also looking for it :P
https://code.google.com/p/gwt-examples/wiki/gwt_hmtl5#Image_Scale_/_Resize
Related
hey guys I need guidance to recreate a wonder full effect which I saw in a website
Fifty-five.com . After the pre-load is over you will see the company's logo in a canvas.
I have have been successful in creating the particle in a canvas but what math goes into linking the particles to create a mesh like structure on mouse over the canvas ?
I have found this http://cssdeck.com/labs/html5-canvas-particles-web-matrix Maybe you can add some mouse interactivity. Please show here the final result.
NOTE: I am not expert in this thing.
Have a look at particles.js:
http://vincentgarreau.com/particles.js/
https://github.com/VincentGarreau/particles.js/
Their home page has a similar effect to that used on the Fifty-five.com site you mention.
You can enable "line_linked" to link the particles.
I hope this helps.
I need your help for an university project.
I want to achieve the same result that you can see on this page.
I need to build a div with a panoramic image inside, that the user can navigate with the mouse controls and when an artwork is hovered/clicked, some informations about it pop out.
I have searched the web and there are a lot of plugins that should work well, but they don't give me the chance to implement the hover/click event to show the informations I want.
Some tutorials/suggestions about my problem? Do you think that this method could be a solution?
Thank you all!
Here it is, the solution I've been looking for!
http://www.openstudio.fr/jQuery-virtual-tour,67.html?lang=fr
Hope it helps anybody who has encountered the same problem!
I need a component based on an HTML5 <canvas> which will behave very much like Google maps.
NOTE - to clarify, I am not looking for a maps component, but a generic image zooming/annotating component that behaves like Google maps!
It needs to do the following:
draw an image
draw some shapes over the image at certain coordinates
have smooth pinch-zoom on the image, ideally zooming in on the spot at the centre of the pinch on the screen
have the image be draggable when zoomed-in so you can change the area of the image the viewport is looking at
redraw the shapes at the same coordinates over the zoomed portion of the image, so they remain the same size no matter the level of zoom
I thought about how I would achieve this, and decided I'd probably do something like the following:
use a library like jGestures or Hammer.js or Sencha Touch to detect pinch and drag gestures
use the context.drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh) function to implement image zoom and positioning based on the drag and pinch events
keep a track of the zoom level and viewport position so the shapes can be redrawn at the correct coordinates on the image every time it is dragged/zoomed
perhaps use a loop with setTimeout() to make the zooming/dragging smoothly animated rather than all-at-once
However I quickly realised this would be pretty complex to write from scratch, even using a library to handle the touch gestures.
I started Googling for an open-source implementation of such a component, but the few I found didn't have the full feature-set, seem well-supported or have good reviews.
I find it hard to believe that a good open-source implementation of a component like this isn't out there. This is such a common requirement in mobile web apps, and there are already several SO questions around how to implement something similar - though most of these are from a while ago so maybe something exists now that didn't then?
Can anyone point me in the right direction?
I have heard good things about: http://www.openlayers.org/ and have seen the results of it being used (Intranet project, nothing public - sorry). However, I have not used it myself.
I want to make a panorama viewer in HTML5, I have managed to place images in my canvas so that they form the 360 degree image and used a jQuery plugin to make the effect of scrolling sideways. Now to my "problem", I want to make it more spherical feeling by stretching the edges of the image in the canvas when I rotate my image. Like Google does in it's street view, to get a better feel for the depth in the image.
Is the stretching effect something that is possible in HTML5 canvas with or without an JavaScript plugin (feels like someone could have made such a plugin or had the same problem besides Google).
Hope I'm not being to fuzzy...
What I believe you are asking is how to perform a 3D projection on an HTML5 canvas. Your best approach would be to use wegGL. Take a look at this example.
And a beautiful example.
You can also try checking out the software Pano2VR by Gnome Software. The trial version has an unlimited trial time, it just puts stamps on your panoramas. But it's pretty easy to customize.
I am making some kind of floor plan that shows the position of participants of a meeting.
For this I am using Raphael.js.
I am looking to find a way to zoom & pan trough that floorplan but I am not finding anything. Can anyone point me in the right direction?
Without changing any of your code that defines the rest of the functionality go to
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=paper.setviewbox
Also use the raphael link to the documentation which always points to the latest....
There are some powerful new features in Raphael 2 that are not currently widely used.
Whats nice about this is that its just an add on!