Correct rotation for a clock needle

Question

I have a WarpImage as neddle with the Bounds<0,0,110,110>.
The WarpImage have to rotate by its center. So I set the SourceAnchor to <55,55>.

The command for the rotation is:
this.HourNeedle.RotateAndScale( <55,55>,(-1) * hour * 30, 1.0, 1.0);

The execution of the code rotate the clock-needle, but not at his center. Have I to set another property of the WarpImage?

Answer 1

Let me refer to the sample application 'Lightweight3D' which you will find in the directory {UserDocumentFolder}\EmbeddedWizard\Examples_Mosaic20' - there you will find the class Watch::Watch, which implements an analog clock with rotating needles.

The source anchor of a needle is the position where the needle is mounted on the clock - not the center of the needle. For example, the property SourceAnchor of the MinutesImage is set to <21,122>.

The center of the clock is <150,150>, thus the rotation is done by using the following command:

MinutesImage.RotateAndScale(<150,150>, -min, 1.0, 1.0 );

The first parameter of the method RotateAndScale defines the destination position of the warp operation.
I hope this answers your question.

 

Comments

The needle AND the clock has both the Bounds <0,0,110,110>.
I really need to rotate the needle at the point<55,55>.

---

Then you can use SourceAnchor and aDstPos with <55,55>, that's fine.
If there is still some problem, please post the images you want to rotate and a screenshot of the result - otherwise it's difficult to give a better advice...

---

I found the problem. After the RotateAndScale - method the Bounds of the needle become <0,0,126,126>.
So the solution is to set the SourceAnchor to <63,63>.  But why does the Bounds change from <0,0,150,,150> to <0,0,126,126>?

---

I assume the needle is a Views::WarpImage - which does not have a Bounds property... What is the size of the origin Image (the bitmap resource)? Take the center of this image as source anchor.

---

The size of the origin Image has 126x126. So after the RotateAndScale - method the WarpImage takes the Bounds from the origin Image.

Thanks that solves my problem.

Answer 2

For the 3D transformation you have to specify two positions:

1. The position within your component to rotate the bitmap around it.

This is determined by the first parameter of the method RotateAndScale().

For example, your component has the width=200 pixel and height=100 pixel and you wish to rotate a bitmap around the center of the component, than you will need to call the method RotateAndScale() with this calculated center position 200/2 and 100/2:

warpImage.RotateAndScale(<100,50>, ... );

2. The position within the bitmap itself to rotate the bitmap around. Also known as pivot point.

This is determined by the property SourceAnchor of the warp view.

For example, you have a bitmap with the width=21 pixel and height=125 pixel and you wish to rotate the bitmap around its center, then the SourceAnchor property should be initialized with 21/2 and 125/2:

warpImage.SourceAnchor = <10,62>;

Another example, you want the bitmap to rotate around its bottom/right corner, then set the property SourceAnchor to the value <21,125>.

Summarized: Because of two 'entities' (the component and the bitmap) you need two coordinates to complete the transformation: the source bitmap position and the the component position. That's all.

Please note, the above information is also valid for the method Warp3D(), for example:

warpImage.Warp3D( <100,50>, ... )

Additionally please note the property SourceArea. With it you can select a smaller section of the original bitmap to perform the desired rotate/scale/warp3D transformations. In such case the value of SourceAnchor is calculated relative to the origin of this source-area.