Question

我想使用HTML5和CreateJS创建音量旋钮。它差不多完成了。你可以在下面的网址上看到这个

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

但它正在继续js的每个事件。我想在两侧旋转鼠标的按下移动事件，当前它正在顺时针移动，我怎样才能反向旋转它。请给我一些建议。

提前致谢。

我使用了以下代码。

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

                        });

Answer 1

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

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点数可能稍微偏离，这就是表盘抖动的原因。

使用createJS旋转html5中的音量旋钮

1 个答案: