絶対指定の方がいいかも
2024-01-16 12:13:43
絶対指定の方がいいかも
すでに解決してるとこアレなんですが～。 選択範囲のガイドラインを引きたいだけかと思ったのでお手軽に二枚を重ねる方法をお伝えしましたが、 https://n3s.nadesi.com/id.php?2726 を拝見しまして、エディタ画面だと大丈夫だけど、アプリ画面だとサブキャンバスを作った時にピュッてずれますよね～😅 またレイヤー操作のできるお絵かきソフトを作りたいとゆうことは、重ねるのは二枚とは限らないことを考えますと、ポジションの指定は絶対位置(absolute)の方がいいだろうなと思いましたので、追記。 実は、画面内に収まるサイズのキャンバス二枚なら横に並んで表示されるのですが、画像がだいぶ大きかったり、複数枚あったりして収まりきらない場合は、下に行きます！ 相対位置指定の基準位置(0,0)は何も指定せずに表示した時の場所なので、下に表示された状態で左にずらしたら、あれキャンバスどこ行った？！ て事態になります💧 絶対位置指定の基準位置は、何もしなければ画面全体の左上なのですが、親ボックスにstatic(配置方法を指定しない)以外のポジション設定がなされていると親ボックスの左上が基準位置となります。 ですので、親ボックスとしてdiv要素を部品作成してpositionにrelativeをつけ、その中にabsoluteを付けたキャンバスを作成していけばOK。何枚でも重ねられます☆ あと、メインキャンバスをマウス押した時で、マウスX取れていませんよね？ キャンバスは、作成した順に重なっているので、先に作ったメインキャンバスはサブキャンバスの下になっていてマウスを検知できていません。 ですので、サブキャンバスとすればマウス位置取得出来るんですが、どちらかというとマウスを検知したりガイドラインを描画したりする操作用のキャンバスを別途作って、後から何枚レイヤーを増やそうとも必ず一番上になるようz-indexを高く指定しておくのがいいんじゃないでしょうか。 #------------------ ＃元のキャンバスは使わない 描画中キャンバスの「幅」に0をDOM属性設定。 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃画像準備 画像URL１＝「https://n3s.nadesi.com/image.php?f=1.jpg」 画像１＝画像URL１を画像読み待つ。 画像幅＝画像１の「幅」をDOM属性取得。 画像高さ＝画像１の「高さ」をDOM属性取得。 画像URL２＝『https://n3s.nadesi.com/image.php?f=389.png』 画像２＝画像URL２を画像読み待つ。 ＃親ボックスの準備 母艦＝DOM親要素。# nako3_div # 親ボックスのポジションを相対位置とし、幅と高さを設定 親ボックス＝「div」のDOM部品作成。 親ボックスに{ "position":"relative", "幅":"{画像幅}px", "高さ":"{画像高さ}px", }をDOMスタイル一括設定。 親ボックスにDOM親要素設定。 ＃キャンバス作成 # 作成するキャンバスは全てポジションを絶対位置にする メインキャンバス＝[画像幅,画像高さ]のキャンバス作成。 メインキャンバスの「position」に「absolute」をDOMスタイル設定。 [0,0]へ画像１を画像描画。 ＃操作用キャンバスでマウス位置の取得とガイドラインの表示 操作用キャンバス＝[画像幅,画像高さ]のキャンバス作成。 操作用キャンバスの「position」に「absolute」をDOMスタイル設定。 操作用キャンバスの「z-index」に「9999」をDOMスタイル設定。# 数が大きいほど上位 操作用キャンバスをマウス押した時には、 [マウスX,マウスY]を表示。 ここまで。 ＃重ねるキャンバス # あとからサブキャンバスを作っても、上位にある操作用キャンバスでマウス位置が取れます サブキャンバス＝[画像幅,画像高さ]のキャンバス作成。 サブキャンバスの「position」に「absolute」をDOMスタイル設定。 [30,50]へ画像２を画像描画。 #------------------ |