Click here to Skip to main content
14,422,668 members
Rate this:
Please Sign up or sign in to vote.
I tried searching the google and all the questions related to this problem but i failed.

In my case I have a two canvasses joined together using the z-index. The first one is the images forming into circle and the second one is the rotating image which is the canvas itself.

Now my problem is that how can I trigger the images to respond to the rotating images when it is pointed in front of it. It is possible? Can someone who have any experience or perhaps knowledge on how to solve this issue.

Kindly see my code here:
Edit fiddle - JSFiddle[^]

What I have tried:

I do not have any knowledge on how to attain this problem.
Updated 15-Jun-17 6:03am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

You're going to do a little bit of maths.

First, work out what angle your bottle will finish at, from 0° to 360°.
var clamped = deg % 360;
if (clamped < 0) { clamped += 360; }

Then, work out which of your images that equates to. You have 10 images spaced equally around the circle, so a simple solution is to divide the angle by 36 and floor the result to get an integer.
var index = Math.floor(clamped / 36);
Math.floor() - JavaScript | MDN[^]

Because of the way you've arranged your images, index 0 equates to the number 6; index 5 equates to the number 1; index 9 equates to the number 5. (You don't need to worry about index 10, because the angle will always be between 0 and 359, so the index is always between 0 and 9.)
var number = (index < 5) ? index + 6 : index - 4;

You now have the number that your spinning graphic will end up pointing to. What you do with it is up to you.

NB: There will be some odd-looking cases where the bottle is pointing between two numbers, and the code picks one of them. You might want to work out a way to put a "buffer" between the numbers that doesn't class as either of them.

Updated fiddle[^]
rhemielco 16-Jun-17 3:08am
thank you very much for your great help to solve my problem. it really works on me very well. You are a great help for us beginners.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100