coloring specific areas on an image [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm currently working on website allowing users to select colors from input, that will then be affected on a specific area of an image.
Here is an image example :
Result example : If the user selected red color, the 1 zone will be colored red and so on.
Is there a way to do it directly on the image with JavaScript/CSS, or I have to use canvas component? Otherwise, if there is already an existing tool allowing to achieve this?
I found this fun tool, but they are using geoJSON standard : https://www.amcharts.com/demos/selecting-multiple-areas-map/
So, must I have to generate by myself a geoJSON format to work directly on, or it's possible to work directly on an image?
If you have any ideas, I'm interested!

You could work with the image by splitting it into the areas you need, but this is not the way I would do it.
You could use an SVG and put it above the image inside the SVG you could define areas and just hide/show them when needed.
But if you find some library that automatically does things for you that might be the better solution.

An open-source library like HTML5-Paint-Bucket-Tool can help you bucket fill color into a bit map image. The downside is that you do not know which zone is colored what since it's just an image.
For vectors or SVG, state controls are easier but to display and render a map will require a lot more effort.

Related

Animation - Revelation of a text by a shape [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I've been learning how to code for some time and I come to you because I'm stuck on the construction of an animation. I've been trying to figure out how to make it for two days (image attached) but it seems that I don't have the knowledge to build this animation alone. I've been looking in css but the revelation of a text at a fixed position is not possible with a moving element, and I don't master java script frameworks.
The animation starts with the right image (this is the default state), it then goes through the left image to then let appear only the orange background and the texts.
Animation description
What I can't manage to do is the progressive revelation of the text by this orange form (the two little bars are important and I want to keep them even if it's more complicated).
I simply don't know what to search on google to find the answer, nor if I should do it with css or js or a framework.
I don't necessarily want you to give me the code already pre-made but mostly a direction to exploit.
Thank you in advance for your answers.
You’ll might want to make an SVG shape, and then use clip-path to create a mask. These two articles work their way up to something like what you’re after:
https://css-tricks.com/clipping-masking-css/
https://css-tricks.com/animating-with-clip-path/
The SVG itself could be animated, or you might animate the clip-path property which is covered more in that second link.
Hope that’s helpful!

How can I manipulate Math symbols in a web page? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I am building a web page dedicated to explaining Math and other topics. I'd like to animate the process of doing certain mathematical steps like adding numbers and solving an equation. I know I can create an animated .gif but this comes with the draw back of having to find some way of drawing the symbols in a picture or maybe exporting a LaTeX rendering, etc. I'm wondering if there is some more programmable, systematic solution.
Suppose for concreteness that I want to animate the solution to 2(x-1)=10 and then several other similar equations, and the process of dividing 123 by 45.
For some context, I have some decent but non-pro skills with HTML, CSS, JavaScript, other C-like languages, Python, and similar stuff.
What I'd do (this is broad) is take the input of each number or symbol a person types and moves them to a specific area on a canvas with JavaScript. For example, every time a person enters in a number it will move that input into a small box or something. From there you can just use the symbols to add/subtract/multiply etc. If you wanted to make this smooth so that it goes in multiple steps you could always you the setTimeout function with JavaScript so it shows each part of the equation step by step. Also an added tip would be to check on websites that have similar functions like Cymath
I will choose Canvas with HTML5 and Javascript to create the animations, the good point with Canvas is that you have full control of pixels, the cons is that you will have to deal with all the stuff to create and render every single function.

Alternative filmroll js [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Is there anyone who knows if there is a better alternative for the filmroll js library: http://straydogstudio.github.io/film_roll/ ? I use it because it's almost exactly what I'm looking for: It centers the active image in the middle of the screen and it works great with responsive designs.
The reason I'm looking for an alternative is because it contains a few bugs, which I discovered after one hour usage already:
It removes the cover from the beginning or end of the slider before it rotates. It would be better to first duplicate the image, so It won't display a white gap at the end of the slider while rotating. Anyways, I used a dirty fix by just loading the covers multiple times so it contains more images than what fits on the screen.
Every div contains a hardcoded width, which changes so now and then, because I use a bigger size for the active image. The problem is it doesn't always recover the width correctly of the parent div, so it will show white gaps between the images.
With touchSwipe enabled it is very very buggy.
I can't duplicate the slider multiple times with the same classname.
It truly is a great concept, only those bugs are quite bothering me. So before I start making adaptions, I'm just curious: Does anyone know a library which does exactly the same? Or almost the same.
You can try Iscroll as an alternative
http://cubiq.org/iscroll-5

jQuery image scrolling, selecting and lightbox-like-fx [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have a webpage in which I need to realize something that looks like the following sketch:
As you can see, there are basically two sections:
a side-block (preferably) on the right that serves as image-thumbnails scroller;
a contents-block on the left (in my draw) in which there are text parts and an image that is selected from the right side-scroller.
Side scrolling may be achieved by a browser sidebar or (very much preferably better) by apposite up/down buttons.
When clicking on a different image on the side-scroller that image get shown in place of the previous one.
Last thing, clicking the image selected shall make it show in full-size (not larger than browser window anyway) with a lightbox-like-effect.
Anyone know of a jQuery plugin that already provide all this?
Thank you very much.
Swiper (http://www.idangero.us/swiper/demos/) should help you with this, it covers most (if not all with a bit of a creative layout on your part) of the things you're looking for. It's got some very thorough documentation, for the light box behaviour you're looking for - I'd use one of the baked-in methods to create your own event handler.

JavaScript library to support interactive charts, graphs etc on canvas? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a useful library which would help me in drawing different interactive charts, graphs etc on canvas. Basically i'm designing a web paint like application and adding the functionality of these interactive charts etc. so what i want is, when user clicks the specific chart, he can then click anywhere inside the canvas and the chart appears there with the data given by user in a file(i will handle that once i know the data format and stuff). I tried a few libraries but either they don't support drawing inside canvas or they aren't offering any interactivity... what do you guys suggest me to go for?
As #Pereira said both chartjs and google chart are good solutions. I will also recommend you take a look at:
HighchartsJS (http://www.highcharts.com/)
PolychartJS (http://www.polychartjs.com/)
I hope it helps you.
Here we have someones:
http://www.chartjs.org/
https://developers.google.com/chart/
I think both are good solutions to you.
I just finished a project where we did this using the chart.js library. Clicking bars generates a new, more specific graph based on the clicked bar. I think a big part of what made this possible for us was the use of a RESTful API to manage the data. Check it out if you're interested.

Categories