Mobile Click for Rotating Wheel?

[ncreed]

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);

});

[JoãoCésar · Accepted solution]

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

[ncreed]

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

[JoãoCésar]

Excellent! You're welcome!