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

ここで三角法が役に立ちます。次の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 ポイントがわずかにずれている可能性があるため、ダイヤルが少しぐらつきます。

于 2013-11-11T15:58:58.947 に答える