0

知りたいこと、やりたいこと

Macのプレビューのような、図形を画像上においた後、再度サイズを変えたり場所を変えたりできるようにする機能を作りたい。

画像の説明をここに入力
これらを実装する際に、どのように図形の場所やクリックされた位置などを保持しているかを知りたい。

やってみたこと

  1. x軸y軸深さ(z-index)高さを変数にもたせておく
  2. Window上のクリックイベントを検知した際、存在する図形オブジェクトをループで見ていく
  3. クリックした座標にオブジェクトがあれば編集可能にする

といったことをやってみましたが、以下の問題が発生しました。

  • 画面やベースの画像を拡大縮小したときにうまく座標が取れない(クリックの位置がずれる)
  • 背景が透明な四角形などのクリック位置の設定がうまくできない(枠線付近でないとクリックを反応させない、というのができない)

こういったものはどのように実装されているのでしょうか?
ご存じの方、ご教示いただけますと幸いです。
よろしくお願いいたします。

1 件の回答 1

3

一般に図形編集用のアプリケーションは二種類の空間を持っています。
それは、「(A)図形の論理的長さを持つ空間」と「(B)(A)の空間に配置された図形を画面上に表示する為の表現用の空間」です。
(A)空間を(B)空間に表示することを射影又は投影と言う場合もあります。

さて、それらを関係づけるには最も簡単な場合でも
(1) (A)空間の原点に対する(B)空間の原点のオフセット量
(2) (A)空間の論理長さ単位に対する(B)空間での表現上の長さ
のパラメータが必要で、(1)をスクロール量、(2)を拡大率とも言います。

また、上記の操作は表現用の操作であって、(A)空間に配置された要素を編集するものではないという事に注意しなければなりません。

次に(A)空間上の要素を同定するためにユーザーはマウスをクリックしますが、ユーザーの意識としては(B)空間に対して行っているため、(A)空間上でその位置を特定するためには、(B)空間から(A)空間の位置を算定しなければ正しい距離を算定できません。

編集の一時的な編集量は(A)空間上の単位で持つか(B)空間上の長さで持つかで異なる場合もありますが、最終的な編集結果は(A)空間に配置された要素の(A)空間上の単位で行われなければなりません。

以上の様に「編集対象の実体のある唯一の空間」と「複数の表示上の射影」を分けて考えることが、図形編集などのアプリケーションでは重要と考えられます。

例として、3D表現機能を持つCAD等の場合には(A)は物理空間となります。(B)は複数ある編集用の画面で、一般にX、Y、Z、パースの4つの射影画面を出すことができます。

6
  • ご回答ありがとうございます! なるほど、 (1)ユーザに見せるものと、オブジェクトのある空間は別 (2)編集時は、ユーザが見ている座標とオブジェクトの座標を同期させる必要がある ということですね! ありがとうございます Commented 2020年2月4日 9:14
  • 1
    そうですね。実はWindowsの描画用デバイスコンテキスト(=HDC)には類似の仕組みが最初から組み込まれています。ただし複雑で不完全かつ文書用に偏っていると思いますので図形対象なら自前でコードしたほうが楽です。興味がありましたら調べてみると良いでしょう。SetMapMode()、SetViewportExtEx()、SetViewPortOrgEx()等がキーワードとなります。
    – Uncle-Kei
    Commented 2020年2月4日 10:41
  • 1
    SetMapMode()は座標軸の定義(2D)、SetViewportOrgEx()は描画原点の移動、SetViewportExtEx()は拡大率に相当します。
    – Uncle-Kei
    Commented 2020年2月4日 10:51
  • デバイスコンテキスト、久々に聞きました(笑)ユーザに見せている画面と実際に図形オブジェクトを管理している空間の座標変換は、行列の拡大縮小式を使ったりするのが一般的でしょうか? Commented 2020年2月6日 0:57
  • 1
    アフィン変換の式を実装するのはそれを学ぶためには良いと思います。ですが、二次元の図形編集機能程度だと無駄な計算が多いことに気づくと思います。
    – Uncle-Kei
    Commented 2020年2月6日 4:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。