So I recently found out that an HTML5 canvas has maximum dimensions. This makes sense for memory and efficiency reasons. What would be the smoothest way to scale a context within a canvas element in phone gap. For example, how would I create an infinite pannable and zoomable canvas, similar to google maps?
You can use javascript to handle multi-touch gestures. There are plenty of libraries that make this easier to do. Sencha touch, or Hammer.js being examples of this. Then you would have to scale down your content on your canvas accordingly.
As for something specific to canvas, it will be a little heavier, but I would suggest something like: KineticJS
Related
Cheers community,
finally, I got my first question here on StackOverflow and it's all about "infinite grid" with fabric.js - if you have any feedback on my question pls hit me up!
The Project:
I try to develop a little drawing tool with fabric.js and wondering how I can implement an infinite background grid like miro has.
My requirements or personal goals to this project/question:
Zooming in and out - resize the grid like miro
Panning also affects the background grid like miro
Dynamic Canvas size -> if I resize the browser, the grid is also fitted canvas with /height
Found a lot of useful links but without zooming, panning, resizing or with a bad performance. If you have any "best practice" hints, links or ideas pls share with me :-)
Thx for your time and help!
I work on a little project where i have to create plane with mouse detection.
For moment i just make some test on a cube from a simple exemple found on the web.
The detection is good and accurate but the container has to be scaled when mouse wheel in order to make zoom.
(i also have to make a zoom on some images, the purpose is to superimpose images with some 3D forms in order to create an accurate detection on my images, these images are scaled with css transform so i guess the simple way is to do the same with the canvas container)
The problem come after scalling this canvas container (using css transform), the raycasting doesnt remain exact and i dont really know how to fix it, i tried to change some value but in a random way.
I guess there is something to do with the scale factor applied on the container but i dont understand which variable i have to modify.
I will try to scale the canvas using three.js directly and following the scale that i apply on my images but i dont know if that would be easier.
Here is my test : http://pixelreseller.com/src_pixelreseller/projets/three-test/
You can see code by the code source but if you prefer that i copy/paste code here, let me know.
I've been tasked with fixing an issue in my company's web application that involves SVG graphs generated using the D3 library. The issue is at hand is that the graphs display fine initially; however, when viewed using an iPad or other iOS device and the user zooms in on the graphs, they quickly become aliased/"fuzzy" - I'd like to prevent this loss of quality, if possible.
You can see examples of the issue here: normal graph, zoomed graph
I've never worked with SVG or D3 before, and I'm not sure if they provide any options for handling this sort of thing; if they do, I haven't been able to find them in any of the documentation I've read.
I a feeling this may be the product of the iOS zooming method and they may not be anything I can do about it besides attempting to catch the zoom event and trigger the re-rending of the graph at the desired magnification level, although I'm not sure if that's possible.
If anyone has some suggestions on how I could go about fixing this, I'd greatly appreciate the advice.
The default zoom behavior on iOS uses a fixed-resolution texture while zooming; this is known as hardware-accelerated zooming. Thus, if you take a small part of the page and zoom in using two fingers, the graphics may appear temporarily pixelated while zooming. This is true of any page, so many iOS users are likely accustomed to it.
The nice thing about SVG, being a vector graphics format, is that as soon as you release your fingers the browser will re-render the SVG at the new resolution.
If you want to maintain crisp resolution while zooming, you need to disable native hardware-accelerated zooming, and instead re-render the graph in response to touch events. You can use d3.behavior.zoom to add panning and zooming interaction to a visualization. However, note that depending on the complexity of the visualization, this may be slower than hardware-accelerated zooming.
Here's an example that combines d3.behavior.zoom with d3.geo.path to demonstrate the technique: http://bl.ocks.org/2374239.
I'm using javascript and THREE.js 3d engine,
and I want to do a fog effect,
here's an example http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html
but it only support WebGL,
so is there any way to simulate fog effect, or a blur effect with javascript and canvas?
thanks alot.
Three.js is WebGL. The example you're looking at is created by the same person who made three.js.
Three.js supports fog already with scene.fog.
https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog
below is for people that searched for fog/blur in Canvas looking for 2D
There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.
Fog is something different, though. There isn't a universal definition and it really depends on what you're looking for. One way would be to set the globalAlpha of the canvas to something like 0.3 and then draw perlin noise on the locations that you want "fog" to appear. Note that the color gradient of the noise that you most likely want is transparent to dark gray.
My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/