日本語プログラミング言語なでしこの公式掲示板

なでしこ の 掲示板

トップ 新規 検索

2022-05-21 09:58:56

Re①:マウスで直線を描画したい

雪乃☆雫 さん

 基本的な描画については分かっていて、マウスのイベントと使い方がよく分からない、とゆうことでいいんでしょうか?
 「(部品の)マウス押した時」のイベントで、そのマウス位置が「(部品の)マウスX」「(部品の)マウスY」に入ります。(マウスクリックした時ではマウスの位置は取れないので注意)
 ですから、とりあえず直線を引くには、最初にマウス押した時の位置を始点、次にマウス押した時の位置を終点として線を描けば良いですね。
 マウス押したのが一回目(始点)なのか二回目(終点)なのかは、フラグを立てていっかいマウス押す毎にオンオフをトグルさせればOK。
 で、こんな感じ。
#-----------------------------------------------
描画中フラグ=オフ。
母艦のマウス押した時は~
  もし、描画中フラグ=オフならば、
    始点X=母艦のマウスX。
    始点Y=母艦のマウスY。
    描画中フラグはオン。
  違えば、
    終点X=母艦のマウスX。
    終点Y=母艦のマウスY。
    母艦の始点X,始点Yから終点X,終点Yへ線。
    描画中フラグはオフ。
#-----------------------------------------------
 これだけで、いちおうマウスのクリックした位置から次にクリックした位置まで直線を引くことができました☆
 「マウス離した時」のイベントを使えば、マウスを押したまま動かして離したら描画とゆう風にも出来ます。
 (カンタンに母艦へ描画しましたが、ホワイトボードみたく描画を主とするのを作るなら、イメージ部品を使った方が良さそげです)

 次に、最初のクリック位置から、現在のマウス位置を追従するような仮直線ですが、「マウス移動した時」とゆうイベントがあり、同様に移動する毎にマウスXとマウスYが取得されてます。
 で、たとえばさっきのに追加して・・・
#-----------------------------------------------
母艦のマウス移動した時は~
  移動X=母艦のマウスX。移動Y=母艦のマウスY。
  もし、描画中フラグ=オンならば、
   画面クリア。
   母艦の始点X,始点Yから移動X,移動Yへ線。
#-----------------------------------------------
 マウス移動する毎ただ線引くだけじゃ、ぎゃああぁって感じに画面が大変なことになるので、消しては描き、を繰り返す感じです。
 イイ感じに追従線が描かれます☆
 が!
 これでは、一本目の線を引いて、またもう一本線を引こうとすると、一本目の線が消えちゃいますよね!(´д`)
 画面は消すのではなく、一本目の線を描画完了した時の状態を覚えといて、それで上書きするようにしなきゃいけません。

 それで、覚えておく用のイメージ部品を作ります。(もののついでで描画するとこも母艦からイメージ部品に変えました)
 表画面は母艦にピッタリ重ねて見えるようにしておき、裏画面はサイズだけ合わせて見えないようにしておきます。
#-----------------------------------------------
表画面とはイメージ
これについて
 X=0。Y=0。
 幅=母艦のクライアント幅。
 高さ=母艦のクライアント高さ。

裏画面とはイメージ。
これについて
 可視はオフ。//見えないようにしておく
 幅=母艦のクライアント幅。
 高さ=母艦のクライアント高さ。

描画中フラグ=オフ。
表画面のマウス押した時は~
  もし、描画中フラグ=オフならば、
    始点X=表画面のマウスX。
    始点Y=表画面のマウスY。
    描画中フラグはオン。
  違えば、
    終点X=表画面のマウスX。
    終点Y=表画面のマウスY。
    表画面の始点X,始点Yから終点X,終点Yへ線。
    表画面を裏画面の0,0へ画像コピー。//裏画面に現状を覚えさせる
    描画中フラグはオフ。

表画面のマウス移動した時は~
  移動X=表画面のマウスX。移動Y=表画面のマウスY。
  もし、描画中フラグ=オンならば、
    裏画面を表画面の0,0へ画像コピー。//戻す。
    表画面の始点X,始点Yから移動X,移動Yへ線。
#-----------------------------------------------


(編集パスワード送信)

子記事

親記事 (No.1318)
返信した記事(元) (No.1318)

この内容(No.1319)に返信

この内容(No.1319)をダウンロード

この内容(No.1319)のテキスト表示





www.eznavi.net