Highlighted

Mobile Click for Rotating Wheel?

New Here ,
Sep 24, 2020

Copy link to clipboard

Copied

Hello,

 

I have been trying to get a rotating wheel to work as a decoder wheel on both a PC browser and mobile device. It simply involves the user clicking the on a wheel and rotating it to show a decoded letter from a provided code.

It works within desktop, but whenever we try to get it in mobile, it doesn't work. 

 

Currently I have:

var shape = this.top;

var mouseMove = function () {

var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

var angle = rads * (180 / Math.PI) - offset;

shape.rotation = angle;

console.log("angle: " + angle);

};

var offset = 0;

stage.addEventListener("stagemousedown", function () {

stage.addEventListener("stagemousemove", mouseMove);

// Determine initial offset, and take off shape rotation

var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

offset = rads * (180 / Math.PI) - shape.rotation;

mouseMove();

});

stage.addEventListener("stagemouseup", function () {

stage.removeEventListener("stagemousemove", mouseMove);

});

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

My suggestions are:

- Enable touch interaction for the default stage (createjs.Touch.enable(stage));

- Divide the mouse position by the stage scale to take into account stage resize when responsive settings are enabled;

- Set the stage's property mouseMoveOutside to true so the user will be able to continue rotating the target instance even if the cursor is outside the default canvas.

 

var shape = this.top;
var offset = 0;

var mouseMove = function()
{
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	var angle = rads * (180 / Math.PI) - offset;
	shape.rotation = angle;
	console.log("angle: " + angle);
};

createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;

stage.addEventListener("stagemousedown", function()
{
	stage.addEventListener("stagemousemove", mouseMove);
	// Determine initial offset, and take off shape rotation
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	offset = rads * (180 / Math.PI) - shape.rotation;
	mouseMove();
});

stage.addEventListener("stagemouseup", function()
{
	stage.removeEventListener("stagemousemove", mouseMove);
});

 

I hope it helps.

 

Regards,

JC

Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Mobile Click for Rotating Wheel?

New Here ,
Sep 24, 2020

Copy link to clipboard

Copied

Hello,

 

I have been trying to get a rotating wheel to work as a decoder wheel on both a PC browser and mobile device. It simply involves the user clicking the on a wheel and rotating it to show a decoded letter from a provided code.

It works within desktop, but whenever we try to get it in mobile, it doesn't work. 

 

Currently I have:

var shape = this.top;

var mouseMove = function () {

var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

var angle = rads * (180 / Math.PI) - offset;

shape.rotation = angle;

console.log("angle: " + angle);

};

var offset = 0;

stage.addEventListener("stagemousedown", function () {

stage.addEventListener("stagemousemove", mouseMove);

// Determine initial offset, and take off shape rotation

var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);

offset = rads * (180 / Math.PI) - shape.rotation;

mouseMove();

});

stage.addEventListener("stagemouseup", function () {

stage.removeEventListener("stagemousemove", mouseMove);

});

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

My suggestions are:

- Enable touch interaction for the default stage (createjs.Touch.enable(stage));

- Divide the mouse position by the stage scale to take into account stage resize when responsive settings are enabled;

- Set the stage's property mouseMoveOutside to true so the user will be able to continue rotating the target instance even if the cursor is outside the default canvas.

 

var shape = this.top;
var offset = 0;

var mouseMove = function()
{
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	var angle = rads * (180 / Math.PI) - offset;
	shape.rotation = angle;
	console.log("angle: " + angle);
};

createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;

stage.addEventListener("stagemousedown", function()
{
	stage.addEventListener("stagemousemove", mouseMove);
	// Determine initial offset, and take off shape rotation
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	offset = rads * (180 / Math.PI) - shape.rotation;
	mouseMove();
});

stage.addEventListener("stagemouseup", function()
{
	stage.removeEventListener("stagemousemove", mouseMove);
});

 

I hope it helps.

 

Regards,

JC

Views

58

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2020 0
Adobe Community Professional ,
Sep 24, 2020

Copy link to clipboard

Copied

Hi.

 

My suggestions are:

- Enable touch interaction for the default stage (createjs.Touch.enable(stage));

- Divide the mouse position by the stage scale to take into account stage resize when responsive settings are enabled;

- Set the stage's property mouseMoveOutside to true so the user will be able to continue rotating the target instance even if the cursor is outside the default canvas.

 

var shape = this.top;
var offset = 0;

var mouseMove = function()
{
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	var angle = rads * (180 / Math.PI) - offset;
	shape.rotation = angle;
	console.log("angle: " + angle);
};

createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;

stage.addEventListener("stagemousedown", function()
{
	stage.addEventListener("stagemousemove", mouseMove);
	// Determine initial offset, and take off shape rotation
	var rads = Math.atan2((stage.mouseY / stage.scaleY) - shape.y, (stage.mouseX / stage.scaleX) - shape.x);
	offset = rads * (180 / Math.PI) - shape.rotation;
	mouseMove();
});

stage.addEventListener("stagemouseup", function()
{
	stage.removeEventListener("stagemousemove", mouseMove);
});

 

I hope it helps.

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 0
New Here ,
Sep 24, 2020

Copy link to clipboard

Copied

Thank you! This worked out so far! I appreciate the fast response here!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 1
Adobe Community Professional ,
Sep 25, 2020

Copy link to clipboard

Copied

Excellent! You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 25, 2020 0