There are a number of libraries that provide drawing on a canvas such as:
Leaflet.Canvas-Markers
leaflet-canvas-layer
Leaflet.Canvas-Flowmap-Layer
gLayers.Leaflet
react-leaflet-canvas-layer
However, I know leaflet canvas rendering has come along way and wondering if these libraries are somewhat redundant now.
Does Leaflet internal canvas rendered basically has the same functionally of these other library's?
Or in other words can everything done in these other library's be done within leaflet canvas renderer?
Does Leaflet internal canvas rendered basically has the same functionally of these other library's?
No.
Leaflet's L.Canvas provides support for rendering lines, polygons and circles. The plugins you listed provide support for drawing other stuff (e.g. bezier curves, arcs, per-tile canvases).
Related
I am looking for the 2D canvas library like Konva.js that I can use above OpenLayers 5.x.
I need to draw shapes with font inside that are interactive - can be dragged over the map to the appropriate location and rotated.
On the image below there is how it looks like with Konva.js over the image background.
Can you advise proper libs or techniques so the same can be implemented over the OpenLayers map?
I'm working on a WebGL application that works similarly to video compositing programs like After Effects.
The application takes textures and stacks them like layers. This can be as simple as drawing one texture on top of the other or using common blend modes like the screen to combine several layers.
Each layer can be individually scaled/rotated/translated via an API call, and altogether the application forms a basic compositing software.
Now my question, doing all this in a single WebGL canvas is a lot to keep track of.
// Start webgl rant
The application won't know how many layers there are ahead of time, and so textures coordinate planes and shaders will need to be made dynamically.
Blending the layers together would require writing out the math for each type of blend mode. Transforming vertex coordinates requires matrix math and just doing things in WebGL, in general, requires lots of code being a low-level API.
// End webgl rant
However, this could be easily solved by making a new canvas element for each layer. Each WebGL canvas will have a texture drawn onto it, and then I can scale/move/blend the layers using simple CSS code.
At the surface, it seems like the performance hit won't be that bad, because even if I did combine everything into a single context each layer would still need its own texture and coordinate system. So the number of textures and coordinates stays the same, just spread across multiple contexts.
However deep inside I know somehow this is horribly wrong, and my computer's going to catch fire if I even try. I just can't figure out why.
With a goal of being able to support, ~4 layers at a time would using multiple canvases be a valid option? Besides worrying about browsers having a max number of active WebGL context's are there any other limitations to be aware of?
how can I save a dom as svg file using html2canvas ?
For downlading as png , I've done something like below :
html2canvas(document.querySelector('#demo')).then(function(canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
How can I achieve similar result to save it as svg file ?
You don't.
The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.
If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.
I am wondering if anyone has heard of some javascript which can take a simple SVG path that took maybe 30 seconds to create in illustrator or something and convert it into something that looks 3d. There is an extrude function in illustrator which does this. It is also called polling in sketchUp.
I am using Raphael.js now, but am open to other suggestions. A simple solution would be to make a copy of the path and move it a couple pixels down and to the right and give it a darker color behind the original path, but I am looking for something that might have a little more shading.
Thanks!
There is always a possibility to use three.js for extruding the path for use in webGL in browser:
http://alteredqualia.com/three/examples/webgl_text.html#D81F0A21010#23a
(More samples here:http://stemkoski.github.io/Three.js/)
It uses js-fonts and parses the path commands on them, extrudes the paths and renders the scene. In the same way it should be possible to take an SVG path and extrude it. Raphael has Raphael.parsePathString() which gives you the path segments as an array of individual segments. If you first convert the path commands to cubic curves using Raphael.path2curve() and Raphael._pathToabsolute(), you have only only one segment type so you can use three.js:s BEZIER_CURVE_TO command. If you have transformations applied on the path (which is usually the case in Illustrator export) you can flatten them using function from here: https://stackoverflow.com/a/13102801/1691517.
One possible starting point is here (click the fiddle of the answer):
Extruding multiple polygons with multiple holes and texturing the combined shape
Three.js supports few path commands, but have not tested all of them (
http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html, see below).
THREE.PathActions = {
MOVE_TO: 'moveTo',
LINE_TO: 'lineTo',
QUADRATIC_CURVE_TO: 'quadraticCurveTo', // Bezier quadratic curve
BEZIER_CURVE_TO: 'bezierCurveTo', // Bezier cubic curve
CSPLINE_THRU: 'splineThru', // Catmull-rom spline
ARC: 'arc' // Circle
};
I have used a custom rather complex function to polygonize SVG path, so was no need to rely to other commands than moveto and lineto.
The downside is of course rather low support level for webGL, 31-53%: http://caniuse.com/webgl
Other more cross-browser solution is this SVG3d library if lesser quality and slowness is not an issue:
http://debeissat.nicolas.free.fr/svg3d.php
https://code.google.com/p/svg3d/
I think this resource could be helpful to you, he uses d3 to generate 2D visualization and then uses d3-threeD to extrude.
Sounds like you want to use svg filters. Webplatform.org has a pretty good tutorial about that. Scroll down a bit and you'll find some lighting filters that looks like 3d.
Raphaël doesn't support filters though, so either you'll need to extend it, or just use svg directly.
We've been working with several libraries like GoogleMaps, OpenLayers, ModestMaps... Even we've written a cartographic visor (Java Applet) that dealed with WMS servers several years ago. Of course this visor is currently useless.
Now we want to develop one FULL HTML5 visor because we're having lots of trouble dealing with the most common frameworks (performance, licensing,design ...). We build advanced and technical maps applications for GIS expert.
We want to draw vectors inside a canvas element. We don't want to draw a canvas object over the base map (like we can do with GoogleMaps ...) , we've been dealing with that and it's not the best way, we need a base object as a canvas HTML5 object in which draw directly.
The question is: Is there a free library that renders on a canvas object which we can extend?
If I understand your question correctly, you want a maps API that will draw the map using html5 canvas. It looks like https://github.com/dfacts/Slippy-Map-On-Canvas/ uses the Open Street Maps API to get map tiles and then draws them on the canvas. Is this what you're looking for?
I think this could be the answer: http://leafletjs.com/. This library does everything that we want, it draws vectors on canvas or SVG, draws tiles maps, good integration with geojson and more...It is far and away the best choice.
Certanly this library doesn't use a unique canvas object, but it's even better.