4

オブジェクトに触れて回転させる方法を作成するためのガイダンスや例を探しています。円のイメージがあるとしましょう。1 つの点に触れて、その円の周りをドラッグし、指の動きに合わせて回転するように操作できるようにしたいと考えています。

回転に関する多くのチュートリアルを見つけています：

タッチ部分を組み込むだけです。

誰かがこれを以前にやったか、光を当てることができますか?

4

3 に答える 3

2

transform: rotate(Ndeg)タッチの回転を要素のCSSにマップするだけです。

すべてのタッチ対応ブラウザーがオブジェクトのrotateプロパティを提供するわけではないeventため、ちょっとした計算で値を計算できます。

document
.getElementById("some-element")
.addEventListener("touchmove", function(event) {
    var rotation = event.rotation;

    // This isn't a fun browser!
    if ( ! rotation) {
         rotation = Math.arctan2(event.touches[0].pageY - event.touches[1].pageY,
               event.touches[0].pageX - event.touches[1].pageX) * 180 / Math.PI;
    }

    // Take into account vendor prefixes, which I haven't done.
    this.style.transform = "rotate(" + rotation + "deg)":
});

また、ユーザーが複数回回転できるようにする場合は、以前の回転値を保存し、それに基づいてこれを調整する必要があります。:)

于 2013-08-04T12:11:17.380 に答える
1

マウス/タッチドラッグで要素を回転

要素をドラッグして回転させる方法の完全な例を次に示します。

座標での相対角度から現在の角度を引いた開始角度を保存します。中心からの mousemove XY 座標の角度から開始角度を引いた
差 (デルタ) だけ回転します。

const rotate = (EL) => {
  
  let ang = 0; // All angles are expressed in radians
  let angStart = 0;
  let isStart = false;

  const angXY = (ev) => {
    const bcr = EL.getBoundingClientRect();
    const radius = bcr.width / 2;
    const { clientX, clientY } = ev.touches ? ev.touches[0] : ev;
    const y = clientY - bcr.top - radius;  // y from center
    const x = clientX - bcr.left - radius; // x from center
    return Math.atan2(y, x);
  };

  const mousedown = (ev) => {
    isStart = true;
    angStart = angXY(ev) - ang;
  };

  const mousemove = (ev) => {
    if (!isStart) return;
    ev.preventDefault();
    ang = angXY(ev) - angStart;
    EL.style.transform = `rotateZ(${ang}rad)`;
  };

  const mouseup = () => {
    isStart = false; 
  };

  EL.addEventListener("mousedown", mousedown);
  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};

document.querySelectorAll(".rotate").forEach(rotate);
.rotate {
  border-radius: 50%;
  width: 180px;
  cursor: ns-resize;
}
<img class="rotate" src="https://www.gravatar.com/avatar/1771ce957b38fbb7f9bb01f58b89fd3f?s=328&d=identicon&r=PG" alt="Wheel image">
<img class="rotate" src="https://i.stack.imgur.com/qCWYU.jpg?s=328&g=1" alt="Wheel image">

于 2021-07-12T21:51:52.367 に答える
0

MouseDown、MouseUp、およびMouseMoveイベント リスナをに実装することを検討する必要がありますcanvas。これは、タッチ スクリーンでの「タッチ」操作は単なる派手なマウスの動きにすぎないためです。

MouseDownユーザーが をドラッグしているかMouseUpどうかを確認するのに役立ちますcanvas。MouseMove回転処理ロジックを配置する必要がある場所です。残りは実装です：

/* Borrowed from http://www.marceloduende.com/blog/?p=25 */
function addCrossBrowseEventListener(myElement, myEvent, myFunction) {  
    if(myElement.addEventListener){  
        myElement.addEventListener(myEvent, myFunction, false);  
        return true;  
    } else {  
        myElement.attachEvent('on'+myEvent, myFunction);  
        return true;  
}

はキャンバスmyElementの DOM 要素、myEventはリスナーを追加するイベントの名前、 はイベントmyFunctionのロジックを処理する関数の名前です。

または、jQuery を使用して、イベント処理のためのよりクリーンなメソッドが多数あるため、これを行うこともできます。

于 2012-12-13T16:36:38.433 に答える