HSPポータル
サイトマップ お問い合わせ


HSPTV!掲示板


未解決 解決 停止 削除要請

2021
0918
Crystalハンバーガーメニューを作成したい4解決


Crystal

リンク

2021/9/18(Sat) 12:59:25|NO.93906

WPFにあるハンバーガーメニューを画像などを使って作りたいと考えているのですが、
ちょくとさんのツールボタンを利用したいと思っています。そこで質問です。

・HSP3で廃止されたllmod.asのスクリプトをどのように変更すべきか
・このUIで縦にツールボタンを配置できるのか

一番上については、ちょくとさんのソースをコピーしたものですが、

#include "llmod.as" #include "hsgetmsg.as" #module ;####################################################### ;=============================================================== ; CreateBitmap ディスプレイ互換DDBオブジェクト作成 ;=============================================================== #deffunc CreateBitmap int, int, int, int mref px, 0 ; HSPウィンドウx座標 mref py, 1 ; HSPウィンドウy座標 mref sx, 2 ; xサイズ mref sy, 3 ; yサイズ mref stt, 64 ; stat mref bmscr, 67 ; 描画中ウィンドウのBMSCR構造体 ; ディスプレイのデバイスコンテキストのハンドル取得 devname = "DISPLAY" pm = 0,0,0,0 getptr pm, devname ; "DISPLAY"のアドレス dllproc "CreateDCA", pm, 4, D_GDI@ hdcScreen = stat ; ディスプレイのデバイスコンテキスト ; ディスプレイ互換ビットマップオブジェクト作成 pm = hdcScreen, sx, sy dllproc "CreateCompatibleBitmap", pm, 3, D_GDI@ hbitmap = stat ; ビットマップオブジェクトのハンドル ; ディスプレイ互換デバイスコンテキスト作成 pm = hdcScreen dllproc "CreateCompatibleDC", pm, 1, D_GDI@ hdcMemory = stat ; メモリデバイスコンテキストのハンドル ; ビットマップをデバイスコンテキストに選択 pm = hdcMemory, hbitmap dllproc "SelectObject", pm, 2, D_GDI@ ; HSPウィンドウからビットマップにイメージをコピー pm = hdcMemory, 0, 0, sx, sy, bmscr.4, px, py, $CC0020 dllproc "BitBlt", pm, 9, D_GDI@ ; デバイスコンテキストを削除 dllproc "DeleteDC", hdcMemory, 1, D_GDI@ dllproc "DeleteDC", hdcScreen, 1, D_GDI@ stt = hbitmap ; ビットマップオブジェクトのハンドル return #global ;############# モジュール終わり ######################## ; コモンコントロールライブラリ初期化 dllproc "InitCommonControls", pm, 0, D_COMCTL ; ツールバー作成 pm = 0, 0, 0, 0 ; 座標・サイズは 0 でよい pm.4 = 0x50000001 ; WS_CHILD | WS_VISIBLE | CCS_NORESIZE pm.5 = 0, 0 _makewnd pm, "ToolbarWindow32" hTool = pm ; ツールバーのハンドル ; TB_BUTTONSTRUCTSIZE メッセージ送信 pm = hTool, 0x041E, 20, 0 sendmsg pm ; TB_SETBITMAPSIZE メッセージでビットマップのサイズを設定 ; (サイズが 16×15 なので、送らなくてもよい) pm = hTool, 0x420, 0 pm.3 = 16 | ( 15 << 16 ) ; x | (y << 16) を指定 sendmsg pm ; ボタンイメージ用ビットマップファイルのロード buffer 2,,, 1 ; バッファウィンドウをパレットモードで作成 picload "toolbtn.bmp" ; パレット 0 をシステムカラーのボタン表面色に変更 pm = 15 ; COLOR_BTNFACE dllproc "GetSysColor", pm, 1, D_USER palette 0, stat&$FF, (stat>>8)&$FF, (stat>>16)&$FF palfade ; ビットマップオブジェクトの作成 CreateBitmap 0, 0, 16*9, 15 hBitmap = stat ; 作成されたビットマップのハンドル ; ビットマップをボタンイメージのリストに追加 ; TBADDBITMAP 構造体 tbadd.0 = 0 tbadd.1 = hBitmap ; ビットマップハンドル ;TB_ADDBITMAPメッセージを送信 pm = hTool, 0x0413 pm.2 = 9 ; ビットマップ中のボタンイメージの数 getptr pm.3, tbadd ; TBADDBITMAP 構造体のアドレス sendmsg pm idxImage = stat ; ここでは必ず0になるのであえて保存する必要はない ; ビットマップオブジェクトを削除 dllproc "DeleteObject", hBitmap, 1, D_GDI ; ボタンを追加(ボタンの数だけ繰り返し) repeat 9 ; TBBUTTON 構造体をセット tbb.0 = idxImage + cnt ; イメージのインデックス tbb.1 = 1000 + cnt ; コマンドID tbb.2 = 4 ; fsState=TBSTATE_ENABLED, fsStyle=0 tbb.3 = 0 tbb.4 = 0 ; TB_ADDBUTTONS メッセージを送信 pm = hTool, 0x0414 pm.2 = 1 ; 追加するボタンの数(1個) getptr pm.3, tbb ; TBBUTTON 構造体のアドレス sendmsg pm loop ; TB_AUTOSIZE メッセージ送信 pm = hTool, 0x0421, 0, 0 sendmsg pm ; ウィンドウのサブクラス化 gsel 0 set_subclass ; サブクラス化 hwnd = stat ; メインウィンドウのハンドル set_message 0x0111 ; WM_COMMAND を取得するように設定 ; メッセージパラメータ用変数 dup msg, msgval.1 ; メッセージが格納される変数 dup wprm, msgval.2 ; wParamパラメータが格納される変数 dup lprm, msgval.3 ; lParamパラメータが格納される変数 *mainloop get_message msgval if msgval == hwnd { if msg == 0x0111 : gosub *onCommand } else { wait 10 } goto *mainloop *onCommand ; WM_COMMANDが送られたとき ; ツールバー以外から送られた場合は何もしない if lprm != hTool : return cmdID = wprm & 0xFFFF ; コマンドID dialog "コマンドID "+cmdID+" のボタンが押されました" return
ここにHSP3ではllmodが廃止され、#uselibで呼び出せるようになったのですが、
このツールボタンではどのようにそれを呼び出せばいいかがわかりません。ここにあるボタン
画像は、ちょくとさんのページにあります。https://chokuto.ifdef.jp/urawaza/toolbar1.html
次に、このオブジェクトは通常、横(メニューバーの下に配置され、横に並ぶ)になっているの
ですが、縦にすることは可能でしょうか?
わかりにくいと思いますが、「WPF ハンバーガーメニュー」と検索いただき、ツールボタンを
その検索した画像のように配置したいということです。
Win32APIについてあまり理解できていないため、優しく教えていただけると幸いです。
よろしくお願いします。



この記事に返信する


沢渡

リンク

2021/9/19(Sun) 10:34:48|NO.93917

Win32はWPFには対応していませんし、ツールボタンを縦に並べるということも
できないようですから、ハンバーガーメニューの挙動を
自前で行うしか無いのではないかと思います。
以下、ちょくとさんのサイトにあるtoolbtn.bmpを利用してやってみました。

//#define global rgbcolor(%1) color ((%1)>>16)&0xFF,((%1)>>8)&0xFF,(%1)&0xFF //↑HSPのバージョンが3.6より前なら、このコメントアウトを外してください #define global boxf2(%1,%2,%3,%4) boxf %1,%2,(%1)+(%3)-1,(%2)+(%4)-1 //boxf2 p1,p2,p3,p4 … 座標(p1,p2)にp3×p4の四角形を描く #uselib "msimg32.dll" #func global TransparentBlt "TransparentBlt" int,int,int,int,int,int,int,int,int,int,int //TransparentBltは特定の色を透過させてコピーするAPI。 // https://www.tokovalue.jp/function/TransparentBlt.htm //最後に指定する透過色(crTransparent)は0xBBGGRRの形で指定する。(0xRRGGBBではなく) hum_w=32 : hum_h=32 //ハンバーガーアイコンの横幅と縦幅 hum_x=0 : hum_y=0 //ハンバーガーアイコンの表示座標 humm_w=80 : humm_h=480 //メニューの横幅と縦幅 humm_x=0 : humm_y=32 //メニューの表示座標 humi_w=32 : humi_h=32 //メニューのアイコンの横幅と縦幅 humit_h=40 //メニューの各項目の縦幅 humi_xo=4 //メニューのアイコンの左の隙間 humit_num=9 //メニューのアイテムの数 hum_back=0x000000 : hum_line=0xFFFFFF : hum_sel=0xEE0000 //ハンバーガーアイコンの背景色・線の色・選択時の色 humm_back=0x440000 //メニューの背景色 //ハンバーガーアイコンの作成 buffer 100,hum_w*2,hum_h : gsel 100 rgbcolor hum_sel : boxf rgbcolor hum_back : boxf2 0,0,hum_w,hum_h w=hum_w/2 : h=hum_h/11 : x=hum_w/4 rgbcolor hum_line boxf2 x,hum_h*3/11,w,h : boxf2 x,hum_h*5/11,w,h : boxf2 x,hum_h*7/11,w,h rgbcolor hum_back : x+=hum_w boxf2 x,hum_h*3/11,w,h : boxf2 x,hum_h*5/11,w,h : boxf2 x,hum_h*7/11,w,h //アイコンの読み込みと加工 buffer 102 : gsel 102 : picload "toolbtn.bmp" : w=ginfo_sx : h=ginfo_sy : hdc102=hdc buffer 103,w,h : gsel 103 : rgbcolor humm_back : boxf TransparentBlt hdc,0,0,w,h,hdc102,0,0,w,h,0xFFFFFF //元の画像の白い部分を透過させてコピー buffer 102,humi_w*humit_num,humi_h : gsel 102 pos 0,0 : gzoom humi_w*humit_num,humi_h,103,0,0,w,h,1 //メニューの作成 buffer 101,humm_w,humm_h : gsel 101 : rgbcolor humm_back : boxf y=(humit_h-humi_h)/2 repeat humit_num pos humi_xo,humit_h*cnt+y gcopy 102,humi_w*cnt,0,humi_w,humi_h loop buffer 103,1,1 //不要になったバッファのサイズを最小に buffer 102,humm_w,humm_h //メニュー表示時のメイン画面内容の待避用 gsel 0 //メイン部分 rgbcolor 0x00AA00 : boxf gosub *humm_showicon onclick gosub *click stop *humm_close //メニューを閉じる場合はこれを呼び出す if hum_flag=0 : return pos humm_x,humm_y : gcopy 102,0,0,humm_w,humm_h *humm_showicon //(閉じた状態の)ハンバーガーアイコンを表示する場合はこれを呼び出す hum_flag=0 //メニューの開閉フラグ pos hum_x,hum_y : gcopy 100,0,0,hum_w,hum_h return *humm_open //メニューを開く場合はこれを呼び出す if hum_flag : return hum_flag=1 gsel 102 : pos 0,0 : gcopy 0,humm_x,humm_y,humm_w,humm_h : gsel 0 pos hum_x,hum_y : gcopy 100,hum_w,0,hum_w,hum_h pos humm_x,humm_y : gcopy 101,0,0,humm_w,humm_h return *click mx=mousex : my=mousey if hum_flag { if (mx>=humm_x)&(mx<humm_x+humm_w)&(my>=humm_y)&(my<humm_y+humm_h) { //メニュー内をクリックした場合 n=(my-humm_y)/humit_h if n<humit_num { gosub *humm_close //nにクリックした項目の番号が入っているのでそれに応じた処理を行う dialog str(n)+"番目の項目をクリックしました" } } else { gosub *humm_close } } else { //メニューが閉じていてハンバーガーアイコンをクリックしたのならメニューを開く if (mx>=hum_x)&(mx<hum_x+hum_w)&(my>=hum_y)&(my<hum_y+hum_h) : gosub *humm_open } return



Crystal

リンク

2021/9/19(Sun) 15:54:31|NO.93921

沢渡さん ありがとうございます。
ハンバーガーメニューについて、自前でやるしか方法がないのですね。
現在、画像がちょくとさんのtoolbar.bmpとなっていますが、この画像をhttps://d.kuku.lu/0d5c2d2b5
のリンクの画像(png)に変更する場合どうすればいいでしょうか? 画像が荒く、位置が変になります。



沢渡

リンク

2021/9/19(Sun) 18:41:49|NO.93922

その画像を確認しましたが、アイコン間の間隔がバラバラで
上手く同じ大きさに切り取ることができないように感じました。
(アイコンの数が7つなのに、横幅が411ドットで7で割り切れない)
よって、1つのアイコンの横幅が縦幅と同じ50ドットになるように
再編集しましたので、https://d.kuku.lu/98bb827e1 こちらから
ダウンロードしていただければと思います。
(ファイル名はicons.pngです)

先のちょくとさんのサイトのアイコンは小さいので拡大しましたが、
こちらは十分大きさがあるのでアイコンサイズ50×50のまま加工せずそのまま使い、
あとは冒頭のパラメータを新しいアイコンに合うように
調整しました。

//#define global rgbcolor(%1) color ((%1)>>16)&0xFF,((%1)>>8)&0xFF,(%1)&0xFF //↑HSPのバージョンが3.6より前なら、このコメントアウトを外してください #define global boxf2(%1,%2,%3,%4) boxf %1,%2,(%1)+(%3)-1,(%2)+(%4)-1 //boxf2 p1,p2,p3,p4 … 座標(p1,p2)にp3×p4の四角形を描く hum_w=32 : hum_h=32 //ハンバーガーアイコンの横幅と縦幅 hum_x=0 : hum_y=0 //ハンバーガーアイコンの表示座標 humm_w=60 : humm_h=480 //メニューの横幅と縦幅 humm_x=0 : humm_y=32 //メニューの表示座標 humi_w=50 : humi_h=50 //メニューのアイコンの横幅と縦幅 humit_h=60 //メニューの各項目の縦幅 humi_xo=5 //メニューのアイコンの左の隙間 humit_num=7 //メニューのアイテムの数 hum_back=0x000000 : hum_line=0xFFFFFF : hum_sel=0xEE0000 //ハンバーガーアイコンの背景色・線の色・選択時の色 humm_back=0xFFFFFF //メニューの背景色 アイコンの背景が白なのでこれも白に //ハンバーガーアイコンの作成 buffer 100,hum_w*2,hum_h : gsel 100 rgbcolor hum_sel : boxf rgbcolor hum_back : boxf2 0,0,hum_w,hum_h w=hum_w/2 : h=hum_h/11 : x=hum_w/4 rgbcolor hum_line boxf2 x,hum_h*3/11,w,h : boxf2 x,hum_h*5/11,w,h : boxf2 x,hum_h*7/11,w,h rgbcolor hum_back : x+=hum_w boxf2 x,hum_h*3/11,w,h : boxf2 x,hum_h*5/11,w,h : boxf2 x,hum_h*7/11,w,h //アイコンの読み込み buffer 102 : gsel 102 : picload "icons.png" //メニューの作成 buffer 101,humm_w,humm_h : gsel 101 : rgbcolor humm_back : boxf y=(humit_h-humi_h)/2 repeat humit_num pos humi_xo,humit_h*cnt+y gcopy 102,humi_w*cnt,0,humi_w,humi_h loop buffer 102,humm_w,humm_h //メニュー表示時のメイン画面内容の待避用 gsel 0 //メイン部分 rgbcolor 0x00AA00 : boxf gosub *humm_showicon onclick gosub *click stop *humm_close //メニューを閉じる場合はこれを呼び出す if hum_flag=0 : return pos humm_x,humm_y : gcopy 102,0,0,humm_w,humm_h *humm_showicon //(閉じた状態の)ハンバーガーアイコンを表示する場合はこれを呼び出す hum_flag=0 //メニューの開閉フラグ pos hum_x,hum_y : gcopy 100,0,0,hum_w,hum_h return *humm_open //メニューを開く場合はこれを呼び出す if hum_flag : return hum_flag=1 gsel 102 : pos 0,0 : gcopy 0,humm_x,humm_y,humm_w,humm_h : gsel 0 pos hum_x,hum_y : gcopy 100,hum_w,0,hum_w,hum_h pos humm_x,humm_y : gcopy 101,0,0,humm_w,humm_h return *click mx=mousex : my=mousey if hum_flag { if (mx>=humm_x)&(mx<humm_x+humm_w)&(my>=humm_y)&(my<humm_y+humm_h) { //メニュー内をクリックした場合 n=(my-humm_y)/humit_h if n<humit_num { gosub *humm_close //nにクリックした項目の番号が入っているのでそれに応じた処理を行う dialog str(n)+"番目の項目をクリックしました" } } else { gosub *humm_close } } else { //メニューが閉じていてハンバーガーアイコンをクリックしたのならメニューを開く if (mx>=hum_x)&(mx<hum_x+hum_w)&(my>=hum_y)&(my<hum_y+hum_h) : gosub *humm_open } return



Crystal

リンク

2021/9/19(Sun) 19:01:50|NO.93923

沢渡さん、画像の編集までありがとうございます。無事表示できました。
ありがとうございました。



ONION software Copyright 1997-2023(c) All rights reserved.