Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
21
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

SVGの2次ベジェ曲線の制御点をドラッグで動かすサンプル

デモ

スクリーンショット

quadratic-bezier-curve.png

メモ

マウスイベント座標をSVG座標に変換

以下の関数で変換します。

function getClientPointInSVG(ev) {
  var p, m;

  p = svg.createSVGPoint();
  p.x = ev.clientX;
  p.y = ev.clientY;

  m = dragElem.getScreenCTM();
  return p.matrixTransform(m.inverse());
}

ドラッグ開始時にオフセットをとっておく

mousedownイベントで制御点とマウスイベントの点のずれを保存しておきます。mousemoveイベントでは、そのずれを維持しつつ制御点を移動します。

どの要素にイベントハンドラをセットするか

  • mousedown: 制御点(ドラッグ対象)
  • mousemove, mouseup: svg要素

mousemoveとmouseupのハンドラをsvg要素ではなく制御点につけてしまうと、マウスを素早く動かして制御点から外れるとドラッグが止まってしまって良くなかったです。

参考

以下のページを参考にしました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
21
Help us understand the problem. What are the problem?