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

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

↓

[![画像の説明をここに入力](https://i.stack.imgur.com/86aKV.png)](https://i.stack.imgur.com/86aKV.png)  
これらを実装する際に、どのように図形の場所やクリックされた位置などを保持しているかを知りたい。

# やってみたこと

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

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

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

こういったものはどのように実装されているのでしょうか？  
ご存じの方、ご教示いただけますと幸いです。  
よろしくお願いいたします。
CC BY-SA 4.0
2020-02-03T05:30:26.507
62740
2020-02-03T08:09:36.880
31257
question
アルゴリズム 画像 gui
画像編集ソフトなどにある、図形を再編集できる機能のロジック、考え方を教えて下さい。
一般に図形編集用のアプリケーションは二種類の空間を持っています。  
それは、「(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つの射影画面を出すことができます。
CC BY-SA 4.0
2020-02-03T07:46:02.113
62742
2020-02-03T08:09:36.880
2020-02-03T08:09:36.880
3793
3793
62740
answer