Re①:キャンバスを重ねて、特定のキャンバスのみ編集できませんか。
2024-01-05 09:25:39
Re①:キャンバスを重ねて、特定のキャンバスのみ編集できませんか。
範囲選択時に選択位置が見えるようにガイドラインを出したいということですよね？ それは、キャンバスを重ねなくとも可能です。 #------------------ 画像URL＝『https://n3s.nadesi.com/image.php?f=8.jpg』 元画像＝[0,0]へ画像URLを画像描画。 元画像の「幅」をDOM属性取得して、それを描画中キャンバスの「幅」にDOM属性設定。 元画像の「高さ」をDOM属性取得して、それを描画中キャンバスの「高さ」にDOM属性設定。 範囲選択中＝オフ。 開始X＝0。開始Y＝0。現在X＝0。現在Y＝0。 描画中キャンバスをマウス押した時には、 開始X＝マウスX。開始Y＝マウスY。 現在X＝開始X。現在Y＝開始Y。 範囲選択中＝オン。 [0,0]へ元画像を画像描画。 ここまで。 描画中キャンバスをマウス移動した時には、 もし、範囲選択中＝オフならば、戻る。 現在X＝マウスX。現在Y＝マウスY。 空に塗り色設定。灰色に線色設定。 [0,0]へ元画像を画像描画。 [開始X,開始Y,現在X-開始X,現在Y-開始Y]へ四角描画。 ここまで。 描画中キャンバスのマウス離した時には、 範囲選択中＝オフ。 ここまで。 #------------------ 画像読むや画像描画をするとイメージオブジェクトが取得できるので、キャンバスに直接ガイドラインを引き、画像色取得する際は元画像を画像描画した状態で行えばＯＫなのです。 また、キャンバスを重ねてレイヤーを作ることも可能です。 ちょこっとCSSの知識が必要になります。 #------------------- ＃元のキャンバスは使わない 描画中キャンバスの「幅」に0をDOM属性設定。 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃画像準備 画像URL＝『https://n3s.nadesi.com/image.php?f=8.jpg』 元画像＝画像URLを画像読み待つ。 画像幅＝元画像の「幅」をDOM属性取得。 画像高さ＝元画像の「高さ」をDOM属性取得。 ＃画像用キャンバス メインキャンバス＝[画像幅,画像高さ]のキャンバス作成。 メインキャンバスの描画開始。 [0,0]へ元画像を画像描画。 ＃重ねるキャンバス サブキャンバス＝[画像幅,画像高さ]のキャンバス作成。 サブキャンバスに{ "position": "relative",//相対位置への配置 "左":"{-1*画像幅}px" //メインキャンバスの幅だけ左に }をDOMスタイル一括設定 サブキャンバスの描画開始。 画像２＝『https://n3s.nadesi.com/image.php?f=1.jpg』 [0,0]へ画像２を画像描画。 #------------------- 元からあるキャンバスを使うと位置の指定がめんどくなるので、両方自分でキャンバス作成しています。 重ねる方のキャンバスに「position」の設定を行います。 「relative」は相対位置指定で、基準は位置指定せず普通に表示した時表示される場所が0,0になります。 普通に二枚キャンバスを作ると横に並んで作成されるので、メインキャンバスの幅だけマイナスしてやれば重なりますよ。 位置の指定はx,yではなくleftとtopです。DOM和スタイル、左はあるけど上はないんだよね～。 ピッタリ重なってるのを見るために、別の画像を描画しています。 |