aardio 背景透明的3種方式（透明窗體1 webview2，透明窗體2-win-region-bitmap，透明窗體3-winform-transparent-color）

彭成刚發表於2024-03-13
WebViewORM

3種透明模式

我給起個名字，也好記憶。
透明模式1：瀏覽器模式
透明模式2：點陣圖遮罩模式
透明模式3：背景透明模式

aardio 背景透明的3種方式（透明窗體1 webview2，透明窗體2-win-region-bitmap，透明窗體3-winform-transparent-color）

3種透明窗體，主要分成是否可以穿透，遮罩元件，全部顯示。

透明窗體1 webview2

優點：可以用html css js，載入png透明圖片等
缺點：整個框，透明部分不能穿透，只是透明看不到而已。實際上還是存在的。

透明窗體1-webview2.aardio

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=356;bottom=287)
winform.add()
/*}}*/

// 窗體透明 這時候執行就透明瞭，什麼都看不見了
winform.transparent(true);

import web.view;
var wb = web.view(winform); // 預設是白色背景

wb.defaultBackgroundColor = 0x00000000; // 設定webview2背景透明

wb.html = /**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    html,body{ height:100%; margin:0; } 
    .circle {
  width: 200px;
  height: 200px;
  background-color: #f00; /* 背景顏色 */
  border-radius: 50%; /* 圓角半徑為 50%，即畫圓 */
}
    </style>
    <script type="text/javascript"></script>
</head>
<body>
    <div id="header"></div>
    <div id="container" class="circle"> 
    	<div style="text-align: center;">---</div>
        <div style="text-align: center;"> 111</div> 
        <div style="text-align: center;"> 222 </div>  
    </div>
</body>
</html>
**/

// 邊框 沒有設定 none 可自行設定


winform.show();
win.loopMessage();
return winform;

透明窗體2-win-regibitmap.on-aardio 點陣圖遮罩模式

優點：具有穿透
特點：遮罩元件，只有有影像的地方，才會顯示元件
缺點：圖片要bmp格式（先png再存bmp），透明有毛邊，因為沒有半透明
透明顏色：感覺是自動識別

程式碼

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469;image=$"\assets\trans2.bmp";border="none")
winform.add(
button={cls="button";text="Button";left=205;top=263;right=444;bottom=371;z=1}
)
/*}}*/

// 透明窗體2-win-region-bitmap.aardio

// 第一步 設定窗體無邊框
// 第二步 設定bmp 背景
// 這個背景透明 需要bmp 而且這個背景透明後
// 透明的位置 不能顯示控制元件了
// 透明顏色自動識別

import win.region.bitmap;
win.region.bitmap(winform);

winform.show();
win.loopMessage();
return winform;

透明窗體3-winform-transparent-color.aardio

優點：可穿透
缺點：bmp背景圖
相對麻煩：指定10進位制 透明顏色值
取色方法：我覺得比較方便。

  1. 先點選背景顏色，點自定義選顏色
  2. 點選選擇，然後吸取你的背景顏色
  3. 到程式碼介面 後面的bgcolor就是10進位制的顏色
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469;image=$"\assets\trans2.bmp";bgcolor=0)
winform.add(
button={cls="button";text="Button";left=125;top=103;right=337;bottom=272;z=1}
)
/*}}*/

// 透明窗體3-winform-transparent-color.aardio

// 第一步 設定bmp背景圖

// 第一個引數是透明度 第2個引數是透明顏色，繫結winform背景圖的
// 透明顏色 繫結 10進位制數值後，透明度引數就失效了。
// 這個10進位制的數字可以用aardio軟體取個背景顏色，程式碼裡面就是10進位制的數字了
winform.transparent(,0)
//winform.transparent(true)

winform.show();
win.loopMessage();
return winform;

相關文章