如何在旋转停止时警告指向的图像？ [英] How to alert the pointed image when rotation stops on it?

问题描述

我尝试搜索谷歌以及与此问题相关的所有问题，但我失败了。



在我的情况下，我使用z-连接在一起的两个画布指数。第一个是形成圆形的图像，第二个是旋转图像，它是画布本身。



现在我的问题是如何触发图像当旋转图像指向它前面时响应旋转图像。有可能的？对于如何解决这个问题有任何经验或知识的人。



请在此处查看我的代码：

编辑小提琴 - JSFiddle [ ^ ]



我尝试过：



我对如何解决这个问题一无所知。

解决方案

你要做一些数学运算。



首先，确定你的瓶子在0°到360°之间的角度。

 var clamped = deg％ 360; 
 if（clamped< 0）{clamped + = 360; } 

然后，计算出哪些图像相当于。你有10个图像在圆周周围均匀分布，所以一个简单的解决方案是将角度除以36并将结果置于底部以得到一个整数。

 var index = Math.floor （clamped / 36）; 

Math.floor（） - JavaScript | MDN [ ^ ]



由于您排列图像的方式，索引0等于数字6; index 5等于数字1; index 9等于数字5. （您无需担心索引10，因为角度始终介于0到359之间，因此索引始终介于0和9之间。）

 var number =（index< 5）？ index + 6：index  -  4; 

您现在拥有旋转图形最终指向的数字。你用它做什么取决于你。



注意：会有一些奇怪的情况，瓶子指向两个数字，代码选择其中之一。你可能想找到一种方法，在不作为其中任何一个的数字之间放置一个缓冲区。



更新小提琴 [ ^ ]

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.

解决方案

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[^]

这篇关于如何在旋转停止时警告指向的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！