マウスのドラッグによりビュー上に矩形を描く

macOS Swift

マウスのドラッグによりビュー上に矩形を描く

macOS 10.15.7 / Xcode 11.3.1 / Swift 5.0

概要

マウスのドラッグで矩形を描く。最初にクリックした位置を始点とし、そこからマウスをドラッグする。ドラッグに合わせて、始点とカーソルの位置を対角とした矩形が描かれる。
ここをクリックすると動画が開きます。

操作の流れ

マウスの操作でコンテントビューに描かれる矩形はビューオブジェクトである。ここでは、Rectangleクラスという名前の NSViewのサブクラスとして定義する。
マウスのクリック（mouseDown）によりRectangleオブジェクトを作成し、コンテントビューに貼り付ける。Rectangleクラスのイニシャライザでは、frameプロパティの始点（origin）にはマウスのクリックした位置をセットし、サイズ（size）はゼロとする。layerプロパティにより、ビューに青い枠線を描き、背景色を薄い青にする。
マウスのドラッグ（mouseDragged）により矩形の大きさを変える。始点とドラッグ中のカーソルを結んだ線が矩形の対角線になる。両端の二点の座標から矩形の幅と高さを割り出し、frameプロパティのサイズに設定すると、これに応じて矩形のサイズが変化する。刻々に発生するドラッグイベントに対して実行するので、マウスの移動に合わせて滑らかに矩形が拡大/縮小するように見える。
マウスアップ（mouseUp）の操作は、マウスドラッグの操作と同じである。

Rectangleクラス

マウスの操作によって描かれるビューオブジェクトの定義
マウスの操作は、次に掲げる MyViewクラスが行う。マウスダウンによりイニシャライザを起動し、ビューオブジェクトを作成する。マウスドラッグ及びマウスアップにより　updateメソッドが起動し、ビューオブジェクトのサイズを変更する。
ドラッグの方向によりビューオブジェクトの始点を変更する。ビューオブジェクトは、矩形の左下の角を始点として、幅は x軸を右方向に、高さは y軸を上方向に伸ばした形になる。そのため最初にクリックした位置から、ドラッグする方向によってビューの始点を変える必要がある。
操作は次の４パターンに分かれる

MyViewクラス

マウスイベントを補足し、操作の種類に従って Rectangleオブジェクトの作成や updateメソッドの起動を行う。

[ 応用 ] ドラッグ操作により矩形の変形、移動を行う

操作

ウィンドウを開くと、ひとつのビューオブジェクトが表示される。矩形の枠線をドラッグするとカーソールの移動に合わせて矩形のサイズが拡大/縮小し、矩形の内側をドラッグすると矩形が移動する。
[create_view2]
画像のクリックで動画が始まります。

四辺のドラッグによる拡大・縮小

矩形の四辺のいずれかの線上を選択しドラッグすれば、矩形がその方向に拡大・縮小する。下の例では、左図は幅が（A→D'）に変わり、右図は始点が（A'）に高さが（A'→B）に変わる。

四隅のドラッグによる拡大・縮小

矩形の四隅の点のいずれかを選択しドラッグすれば、移動したカーソルの位置に合わせて拡大・縮小する。下の例では、矩形の始点が（A'）に、幅が（A→D'）高さが（A'→B）に変わる。

ドラッグによる移動

四辺、四隅以外の矩形の中を選択しドラッグすれば、カーソルの移動に合わせて矩形が移動する。下の例では、矩形の始点が（A'）に、幅が（A'→D'）高さが（A'→B'）に変わる。

実装

CanvasViewクラス

このクラスをコンテントビューのクラスとする。初期処理で操作の対象となる矩形（ビューオブジェクト）を作成し、自身のビューに貼り付ける。マウスイベントを補足し、操作に対応した処理を起動する。

Rectangleクラス

処理を簡単に言うと、クリックした点の位置から処理の種類を判定し、元の矩形の frame定義と、ドラッグした点から、新しい矩形の frame定義を作成し、ビューに再表示するものである。
クリックの位置とその後の処理は次の４パターン分かれる。
矩形の始点(A)と対角の点(C)の二点を矩形の基準点とする。ドラッグによる矩形の変形、移動では、この二点のみ更新し、そこから矩形の frameプロパティを算出するという流れになる。
点は１ピクセル、直線も幅は１ピクセルである。これをマウスで正確にクリックするのは難しいので、その周辺、数ピクセルの範囲（本例では 5ピクセル）をクリックしたとき、点または直線をクリックしたことにする。
変形/移動の具体的な方法は前述の図による説明も参考にしてください。