使用createJS旋转html5中的音量旋钮 [英] Rotate the volume knob in html5 with createJS

问题描述

我想使用HTML5和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

但它正在继续js的每个事件。我想在两侧旋转鼠标的pressmove事件，目前它正在顺时针方向移动，如何反向旋转它。请给我建议。

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.

提前致谢。

我使用了以下代码。

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

                        });

推荐答案

这是三角函数派上用场的地方。请查看以下小提琴。使用Math.atan2函数，我们可以计算鼠标指针相对于表盘中心的角度。然后，我们将弧度转换为度数并设置表盘的旋转。

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

注意：regX和regY点数可能稍微偏离，这就是表盘抖动的原因。

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

这篇关于使用createJS旋转html5中的音量旋钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！