Mobile Click for Rotating Wheel?

New Here ,
Sep 24, 2020 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);

});

Views

100

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
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Sep 24, 2020 Sep 24, 2020
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...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 24, 2020 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

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
community guidelines
New Here ,
Sep 24, 2020 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
community guidelines
Adobe Community Professional ,
Sep 25, 2020 Sep 25, 2020

Copy link to clipboard

Copied

LATEST

Excellent! You're welcome!

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
community guidelines