Skip to main content
F
FlatChat
Inspiring
March 22, 2022
Question

HTML5 Canvas - Rotate symbol and convert angle between 1 and 180 degrees

  • March 22, 2022
  • 1 reply
  • 997 views

I am rotating a symbol in code.  During the rotation, the code converts to symbol's rotation property:

 

if (LFAngle > 180){
LFAngle = LFAngle - 180;
}
if(LFAngle == 0){
LFAngle = 180;
}

This conversion is a technical requirement.

 

When rotating the symbol in the compiled application,  there are some logic problems with the LFAngle:

 

LFAngle will show 0, and then 180 on another roation step.

 

The first rotation of 360 degrees is OK (except the issues above), but then starts increasing from 180 to 360, which is what the logic above is tying to stop.

 

Full code:

 

var LFAngle;

function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	LFAngle = root.lensParentLeft.rotation;
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";
}

 

    This topic has been closed for replies.

    1 reply

    F
    FlatChatAuthor
    Inspiring
    March 22, 2022

    I missed including the listener before the function:

     

    function LF_RotateCW_Down() {
	createjs.Ticker.addEventListener("tick", updateLF_RotateCW);
}

function LF_RotateCW_Up() {
	createjs.Ticker.removeEventListener("tick", updateLF_RotateCW);
}

var LFAngle;

function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	LFAngle = root.lensParentLeft.rotation;
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";

     

    See video below, which shows the object rotating in the bottom right, and the dynamic text field top left showing the rotation angle, which should be converted in the above function, to keep the angle between 1 and 180 degrees.

     

    Do I need a loop for the logic perhaps??  I would have thought that the ticker would act as a loop; is it resetting on the ticker??

     

     

    F
    FlatChatAuthor
    Inspiring
    March 22, 2022

    Missed adding the closing brace on the above function to the snippet, but it exists...

     

    C
    ClayUUID
    Legend
    March 22, 2022

    You can edit your posts.

     

    So you're checking the value of LFAngle, and if it's greater than 180 you subtract 180. And then what do you actually do with the value of LFAngle? Well, you're doing this:

    LFAngle = root.lensParentLeft.rotation;

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices