@Kobayashi0620 (さなだむし)posted at 2024-11-28

jsでスクラッチ動作を図形や画像と同期させたい

Q&A

解決したいこと

現在jsの勉強をしており、いろいろなパーツを作ってjsの処理や応用を学んでいるのですが、
下記のようなDJサイトを見つけて円盤を円状にドラッグすると、その動作通りに円盤が動いており、
スクラッチ動作と画像を動機させる方法を教えていただきたいです。
https://doodles.google/doodle/44th-anniversary-of-the-birth-of-hip-hop/

下記画像をスクラッチ動作を行った際に、画像を円状に動かしたいです。

理想としている動作は、
https://doodles.google/doodle/44th-anniversary-of-the-birth-of-hip-hop/
や
https://color.adobe.com/ja/create/color-wheel
など
円状にスクラッチ動作が一致しているようにしたいです。

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。
何卒よろしくお願いします。

1Answer

@lhankor_mhy posted at 2024-11-29

こうですか？

document.querySelector('img').addEventListener('pointermove', e => {
    const x = e.offsetX - 50;
    const y = e.offsetY - 50;
    const rad = Math.atan2(y, x);
    e.target.style.rotate = `${rad * 180 / Math.PI + parseFloat(e.target.style.rotate || 0)}deg`;
})

2Like

Comments

@Kobayashi0620
Questioner
ありがとうございます
イメージしているものです！

Are you sure you want to delete the question?

jsでスクラッチ動作を図形や画像と同期させたい

解決したいこと

1Answer

Comments

Your answer might help someone💌