How to apply distort function to fabricjs canvas? - javascript

So I want to apply a distort function like fisheyejs in fabric
fisheyejs )
Or bulge/pinch like glfx.js
But those library can't be used with fabric. So is there any other library can work with fabricjs and has that function ?
Or the only way is create a custom filter for it ?
I'm stuck at this task for a week but can't find solution. So please help me. Thank you so much

Related

Measure element while drawing using javascript

I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.
How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).
So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.
Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?
Thanks for help in advance.
The ol-ext/Overlay/Tooltips can do it for you.
See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html

Creating charts using d3.js and canvas together

I have been using D3.js library to create some basic graphs. I'm trying to create a bar graph with HTML5 canvas but finding it hard to create.I found some resources and this chart but I'm unable to understand how it's done.Can you guys suggest some resources/tutorials/books/blogs of D3.js with canvas so I can have a better idea how it's done.
Thanks!
My first thoughts reading this are that there may be a bit of a mismatch. There's no reason you shouldn't be able to use D3.js and canvas together, but I think you'll find it much easier working with SVG instead of canvas with D3, plus you get all sorts of benefits in terms of animation, CSS manipulation, and accessiblity.
If you do want to stick to canvas then use Chart.js instead of D3, it's designed to work with canvas and presents a much more gentle learning curve, being a more out-of-the-box solution.

Javascript Geometry Draw

I have to draw geometry shapes like the sample image attached here.
I check the three.js, pepper.js but, I am confused that which one is the best library for this type of work. Please help me to decide the library.
Most processing libraries will do the job. Have a look at p5.js, it is fairly simple to get started with.
https://p5js.org/
I use the GD library to complete these complex diagrams. Drawio helps me a lot to create the diagrams and get the coordinates of X and Y axis.

Paint on an object using Three.js

I want to paint on an objects surface using the mouse.
Here's an example of what I want to do:
http://www.cartelle.nl/deathpaint/
Does anyone know of any basic example of how to do this?
I guess you paint on a canvas and then that is applied on to the 3D object in some way.
Anyone knows how this is done?
Finally I found this, chameleon.js
https://tomtung.github.io/chameleon.js/
Seems to do exactly what I wanted.

Create an interactive map using JavaScript/jQuery

I would like to implement a little map "like" Google Maps. Its a fictive one (Game Map). I should have the ability to zoom and move around. Also i would like to be able to put some markes on it and do a very basic routing.
My question is now purly conceptual. How would you realize this?
Map as background that scales and moves. Then an overlay like a Canvas object to draw over it? Somene has experience with this? I don't really know if this is the right approach.
Thank You.
Have you ever used a program called Impact?
its really useful when building games in HTML5
http://impactjs.com/
I don't fully get what you want but with jVectorMap ou can create you own vector(!) maps with markers and custom colors.
So I think it will help you.

Categories

Resources