Rotate the volume knob in html5 with createJS

问题

I want to create volume knob using HTML5 and CreateJS. It is almost done. you can see this on following url

http://www.urbantruanthosting.co.uk/radiosimulator/testpage.html

but it is moving on every event of js. And I want to rotate on mouse's pressmove event on both side and currently it's moving clockwise, how can I rotate it in reverse. Please give me suggestion.

Thanks in advance.

and I have used following code.

var bmp = new createjs.Bitmap(image).set({
                            scaleX: 1,
                            scaleY: 1,
                            regX: w / 2,
                            regY: h / 2,
                            cursor: "pointer",
                            x: 305,
                            y: -90,
                            rotation: -55
                        });

                        bmp.regX = bmp.image.width / 2;
                        bmp.regY = bmp.image.height / 2;

                        var movieClip = new createjs.Container();
                        movieClip.addChild(bmp);
                        imageContainer.addChild(movieClip);

                        /*add events to enavle the knob to moveclockwise START*/

                        bmp.addEventListener("pressmove", function (evt) {
                            TweenMax.to(bmp, 5, { rotation: 270, repeat: -1, ease: Linear.easeNone });


                            if (headerCnt == 0) {
                                audioElement.play();
                                screen.src = 'images/header_5.jpg';
                                headerCnt = 5;
                                screenImage.set({
                                    image: screen
                                });
                            }
            stage.update();

                        });

回答1:

This is where trigonometry comes in handy. Check out the following fiddle. Using the Math.atan2 function, we can calculate the angle of the mouse pointer relative to the center of the dial. Then, we convert radians to degrees and set the rotation of the dial.

dial.addEventListener("pressmove", function(e){
    console.log(e);

    //Calc Angle
    var adj = e.stageX - dialHolder.x;
    var opp = e.stageY - dialHolder.y;
    var angle = Math.atan2(opp, adj);

    angle = angle / (Math.PI / 180);

    dial.rotation = angle;
});

Note: The regX and regY points might be slightly off which is why the dial wobbles a bit.

来源：https://stackoverflow.com/questions/19872487/rotate-the-volume-knob-in-html5-with-createjs

标签

html5

html5-canvas

createjs

tweenmax