move gauge needle with mouse click - Animate HTML5

Wow, thank you JoãoCésar! I'll give that a try.

Very cool piece of work. Also great code JoãoCésar

Hi.

Here is a sample.

Try it:

https://bit.ly/3PJu1RP

JavaScript / JS code:

[Global script section]

(function()
{
	function DragToRotate(props)
	{
		this.target = props.target;
		
		if (this.target.hit)
			this.target.hitArea = this.target.hit;
		
		this.offset = 0;
		this.mouseDownEvent = this.target.on("mousedown", this.onMouseDown, this);
	}

	DragToRotate.prototype.onMouseDown = function()
	{
		var stg = this.target.stage;
		var rads = Math.atan2((stg.mouseY / stg.scaleY) - this.target.y, (stg.mouseX / stg.scaleX) - this.target.x);
		
		this.offset = rads * (180 / Math.PI) - this.target.rotation;
		this.onPressMove();
		this.pressMoveEvent = this.target.on("pressmove", this.onPressMove, this);
		this.target.parent.pressUpEvent = this.target.on("pressup", this.onPressUp, this);
	};

	DragToRotate.prototype.onPressMove = function()
	{
		var rads = Math.atan2((this.target.stage.mouseY / this.target.stage.scaleY) - this.target.y, (this.target.stage.mouseX / this.target.stage.scaleX) - this.target.x);
		var angle = rads * (180 / Math.PI) - this.offset;
		
		this.target.rotation = angle;
	};

	DragToRotate.prototype.onPressUp = function()
	{
		if (this.target)
		{
			this.target.off("pressmove", this.pressMoveEvent);
			this.target.parent.off("pressup", this.pressUpEvent);
		}
	};

	DragToRotate.prototype.destroy = function()
	{
		this.target.off("mousedown", this.mouseDownEvent);
		this.target.off("pressmove", this.pressMoveEvent);
		this.target.parent.off("pressup", this.pressUpEvent);
		this.target = null;
	};

	window.ui = { DragToRotate: DragToRotate };
})();

[Main timeline]

// definition code for the drag to rotate component
// is in the global script section (left side section)

var root = this;
var dragToRotate;

function main()
{
	createjs.Touch.enable(stage);
	stage.mouseMoveOutside = true;
	dragToRotate = new window.ui.DragToRotate({ target: root.pointer });
}

main();

Download / FLA / source:

https://bit.ly/3B9fiLW

I hope this helps.

Regards,

JC