| XWidgetSoft Forum https://www.bbs.xwidget.com/ |
|
| Diver's watch with mouse-draggable bezel, suggestions? https://www.bbs.xwidget.com/viewtopic.php?f=8&t=601 |
Page 1 of 1 |
| Author: | o2r [ July 14th, 2012, 6:09 pm ] |
| Post subject: | Diver's watch with mouse-draggable bezel, suggestions? |
Hi! I'm trying to make an analog clock resembling a diver's watch with a bezel that can be rotated by clicking, holding and dragging the mouse. However, I have no idea on how to implement a mouse-draggable rotatable bezel. Here's an example of a diver's dial with round bezel marker:  I would like to figure out how to rotate the round marker at 12 o'clock around the dial by using the mouse. Any suggestions would be appreciated... |
|
| Author: | vlad [ August 31st, 2012, 1:24 am ] | ||
| Post subject: | Re: Diver's watch with mouse-draggable bezel, suggestions? | ||
The main idea is to add a timer to your project (30 ms update interval should give u smooth animation), then to find the angle between your rotator and the mouse. I made this example http://4ybak47.deviantart.com/art/Arrow ... -324420348 so the arrow will always rotate towards the mouse. If you wish to give some animation effect, just connect this function onMouseClick event and call the animation to the found angle Code: midX = rotator.Left + rotator.Width / 2; midY = rotator.Top + rotator.Height / 2; //Remember to multiply the the scale factor (in my case the arrow is scaled to 30% so the value will be 30 / 100 = .3 ) //And so midX = midX * .3; and midY = midY * .3; angle = Math.atan2(mouseY - (Top + midY), mouseX - (Left + midX)) //Adding 180 to the angle resulting an extra 180 rotation, since my image it flipped in the horizontal direction angle = angle* 180 / 3.1413 + 180 rotator.RotateAngle = angle; Download source code from : http://4ybak47.deviantart.com/art/Arrow ... -324420348
|
|||
| Page 1 of 1 | All times are UTC - 8 hours |
| Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ |
|