Fabric.js / canvas infinite background grid like miro - javascript

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!

Related

Canvas implementation of Circle Packing is jittery when zooming

I'm trying to learn canvas (to improve a visualization I made a few weeks ago in D3.js which is very slow due to many DOM elements: http://nbremer.github.io/occupations/). I managed to make a canvas based circle packing in which you can zoom, but it's rather jittery while zooming: http://bl.ocks.org/nbremer/667e4df76848e72f250b
Does anybody have any suggestions on how I can improve this? I tried d3.timer and am now using requestAnimationFrame, but that doesn't seem to make a difference. (Once I manage to get this working, I still want to add the small bar charts that are packed in each white circle as in the original example)
Thank you!

Javascript stretch image according to a map?

I'm trying to figure out if it is possible to stretch in image in Javascript so different parts of the image expand more quickly than others. I was thinking along the lines of an black/white map where black does not stretch at all, white stretches the most and the shades of grey in between stretch proportionately. Is this at all possible? I;m hoping to make a picture look as if its losing or gaining weight.
Thanks!
You could use the HTML5 canvas feature along Java-script to do image manipulation.
Altogh it will be processor intensive, mainly if you want to do animation, you can do it.
Some tutorial for the canvas element of HTML5 with Java-script, probably you are interested more on the drawImage(image,x,y) method.
http://www.w3schools.com/html/html5_canvas.asp
And references
http://www.w3schools.com/tags/ref_canvas.asp
You could then get draw the parts you want scaled, but giving it near non noticeable artifacts effects like you want is really difficult.

Zooming using slider

I am a beginner with jQuery and looking to build a short plugin for my requirement. I am looking to build a light and short timeline like plugin which has to look something like the following:
The green bar below has two small rectangles which can be moved left and right towards or away from each other to zoom in / zoom out the content of the timeline above (orange bar). I tried to find similar plugin which I could use as a reference to write to zoom in/zoom out using the slider.
I found some timeline plugins such as Timeglider etc. which have the zoom functionality implemented in a different way and not similar to the above figure (where I could use two rectangles to zoom in/zoom out and zoom timeline in orange bar).
I wanted to ask for suggestions about where I could find a similar plugin that I could use as a reference to see how zooming using slider is implemented. Or if there's no such already plugin, I would appreciate some help on how to go about the zooming functionaility for the plugin.
Do you know, that there is the slider plugin for jQuery UI (link). It will be just question of styling it, connecting to slide event and changing zoom level on the go.
I would expand my answer, but I lack some more information about your HTML layout, Would like to see some code of yours in jsfiddle.net.

What Javascript graphing package will let me plot points against a user-selected coordinate system?

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/

Smooth animation in javascript

Is there a way to draw smooth animation in javascript?
In directx I'm using the vertical synchronisation. Can I achieve this in a html canvas?
When drawing on a Canvas, I don't think there would be a vertical synchronization issue.
You should be more precise, and ask a more specific question about your problem (if any).

Categories