長方形を変形する方法~OpenLayersで図形を描画する⑩

前回の記事で図形の変形についてお伝えしましたが、長方形については描画時とは異なる変形方法になってしまいます。

長方形について、描画時と同じ方法で変形できるようにソースコードを修正していきます。

動作確認

まずは結果をご確認ください。

操作方法

長方形を描画します。

選択します。
その後長方形の右下にマウスカーソルを合わせます。

右下の頂点をさらに右下にドラッグします。

選択状態を解除します。変形が完了しています。

ソースコード

こちらがソースコードです。

解説

今回の長方形変形は「変形開始イベント」「変形中イベント」「変形完了イベント」を捕捉し、処理を行っています。

変形開始イベント(modifystart)

683~705行目は変形のドラッグ開始時に呼ばれる処理です。

変形図形が、「長方形」「テキスト」「画像」の場合、変形前の座標を取得します(691行目)。
その座標を「coordinates」というプロパティ名で図形オブジェクトに保持します。

ドラッグ中のイベントを捕捉するために、イベントリスナーを設定します(696行目)。

698~705行目がポイントです!
ExtentInteractionという仮想の長方形を画面上に描画します。
変形前の長方形を初期座標に設定し、色は選択時と同じものを設定します。

変形中イベント(pointermove)

変形中には仮想長方形をドラッグに合わせて変形させています(732~742行目)。

変形中の仮想長方形の座標の計算は766~813行目で行っています。
計算は長方形の頂点が増えない場合と増える場合の2通りあります。

頂点が増えない場合の計算

既存の頂点座標を変更する場合がこちらの処理です(768~783行目)。
座標が変更された頂点の座標を取得し(770~776行目)、その反対側の頂点の座標を用いて新たな長方形の座標を計算しています(787~783行目)。

頂点が増える場合の計算

長方形の辺の部分をドラッグし、一時的に頂点が増えるのがこちらのパターンです(785~810行目)。

変形前の座標から新たに追加された頂点があるはずなので、その頂点を探し出します(787~803行目)。

探し出せたら「新たな頂点」「新たな頂点が追加された辺の反対側にある辺の座標」を用いて新たな長方形の座標を計算します(804~810行目)。

変形完了イベント(modifyend)

変形処理が完了したら、仮想長方形の座標を対象の図形に適用します(716~719行目)。
また、画像の場合は古い画像を消して新たな座標に新たな座標を描画し直します(721~724行目)。

その後、長方形の変形のために作成したプロパティやイベント、仮想長方形の破棄を行います。

変形中のスタイル

長方形の変形中は、仮想長方形が表示されるので、元の図形は表示されてほしくありません。

そのため128~130行目の処理で、「coordinates」プロパティを保持している図形は非表示状態になります。

この処理のおかげで仮想長方形のみが表示され、変形中の元図形は表示されません。

まとめ

560行目のcreateBoxという処理で、直感的な操作で長方形を描画することができます。

しかし、変形時は同様の方法で描画を行うことができません。

今回の修正を用いることで、描画時と同様の直感的な操作で変形を行うことができます。

このトピックはOpenLayersのDeveloperの間でも頭を悩ます問題だったのですが、1つの回答を打ち出せたかなと思います。

読者の皆様、ぜひお役立てください!

OpenLayersについての別記事もぜひご覧ください!

①図形を描画する(マーカー、線、円、多角形)
②テキストを書き込む(矩形)
③フリーハンドで書き込む
④矢印で強調する
⑤固定画像を配置する
⑥図形を選択する
⑦図形を移動させる
⑧固定画像の移動
⑨図形を変形させる
⑩長方形を変形させる
⑪図形を複数選択する
⑫図形をJSON形式で保存&読込
⑬図形を削除する
⑭線のスタイルを設定する
⑮図形の色を設定する

【入門】地図を表示させる方法
ボタンを配置する方法
ミニマップを表示する方法

    コメント

    タイトルとURLをコピーしました