0

我想使用 HTML5 和 CreateJS 创建音量旋钮。快完成了。你可以在下面的 url 上看到这个

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

但它正在推进 js 的每一个事件。而且我想在鼠标的两侧旋转pressmove事件，目前它正在顺时针移动，我怎样才能反向旋转它。请给我建议。

提前致谢。

我使用了以下代码。

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

                        });
4

1 回答 1

1

这就是三角函数派上用场的地方。看看下面的小提琴。使用 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 点可能会稍微偏离，这就是表盘有点晃动的原因。

于 2013-11-11T15:58:58.947 回答