易语言如何在画板中添加一个半透明的图片

Posted 2023-04-26

易语言如何在画板中添加一个半透明的图片？比如画板底图是某个图片，如何在画板中添加一个指定透明度的图片？

使用真彩模块，创建真彩窗口，或者使用，GDIPlus类
.版本 2
.程序集 GP画布场景, , 公开
.程序集变量 EXSTYLE, 整数型
.程序集变量 是否已创建, 逻辑型
.程序集变量 画布图形, GP内存图形, , , 用于场景刷新显示
.程序集变量 句柄, 整数型
.程序集变量 画布透明度, 整数型, , , 0-255
.子程序 _初始化, , , 当基于本类的对象被创建后，此方法会被自动调用

.子程序 _销毁, , , 当基于本类的对象被销毁前，此方法会被自动调用

.子程序 创建, 逻辑型, 公开, 必须先进行创建。成功返回真，失败返回假。
.参数 窗口句柄, 整数型, , 指定窗口句柄，子句柄无效。
.局部变量 尺寸, 尺寸L
.局部变量 坐标, 坐标L
.如果真 (是否已创建 ＝ 真)
返回 (假)
.如果真结束
是否已创建 ＝ 真
句柄 ＝ 窗口句柄
EXSTYLE ＝ GetWindowLong (句柄, -20)
SetWindowLong (句柄, -20, 位或 (EXSTYLE, 524288))
画布透明度 ＝ 255
取尺寸 (尺寸.宽度, 尺寸.高度)
画布图形.创建 (尺寸.宽度, 尺寸.高度)
取坐标 (坐标.x, 坐标.y)
画布图形.复制图层窗口 (句柄, 坐标.x, 坐标.y, 尺寸.宽度, 尺寸.高度, 画布透明度, 0, 0)
返回 (真)
.子程序 销毁, 逻辑型, 公开, 成功返回真，失败返回假。
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
画布图形.销毁 ()
SetWindowLong (句柄, -20, EXSTYLE)
EXSTYLE ＝ 0
是否已创建 ＝ 假
句柄 ＝ 0
返回 (真)
.子程序 复制GP内存图形到画布, 逻辑型, 公开, 成功返回真，失败返回假。
.参数 GP内存图形, GP内存图形, , 当此参数为空时，则继续执行其它的参数
.参数 左边, 整数型, 可空
.参数 顶边, 整数型, 可空
.参数 宽度, 整数型, 可空, 为空时，以GP内存图形的宽度来计算
.参数 高度, 整数型, 可空, 为空时，以GP内存图形的高度来计算
.参数 透明度, 整数型, 可空
.局部变量 blendFunc32bpp, 字节集
.局部变量 p, 整数型
.局部变量 纠正宽度, 整数型
.局部变量 纠正高度, 整数型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
blendFunc32bpp ＝ 0, 0, 0, 0
.判断开始 (是否为空 (透明度) ＝ 真)
blendFunc32bpp [3] ＝ 255
.默认
blendFunc32bpp [3] ＝ 透明度
.判断结束
p ＝ 取字节集数据 (blendFunc32bpp, #整数型, )
.判断开始 (是否为空 (宽度) ＝ 真)
纠正宽度 ＝ GP内存图形.取宽度 ()
.默认
纠正宽度 ＝ 宽度
.判断结束
.判断开始 (是否为空 (高度) ＝ 真)
纠正高度 ＝ GP内存图形.取高度 ()
.默认
纠正高度 ＝ 高度
.判断结束
AlphaBlend (画布图形.获取mdc (), 左边, 顶边, 纠正宽度, 纠正高度, GP内存图形.获取mdc (), 0, 0, GP内存图形.取宽度 (), GP内存图形.取高度 (), p)
\' -----------------------------------------------------------
\' StretchBlt (屏幕图形.获取mdc (), 物体图形.取左边 (), 物体图形.取顶边 (), 物体图形.取宽度 (), 物体图形.取高度 (), 物体图形.获取mdc (), 0, 0, 物体图形.取宽度 (), 物体图形.取高度 (), 13369376)

\' GdiTransparentBlt (屏幕图形.获取mdc (), 物体图形.取左边 (), 物体图形.取顶边 (), 物体图形.取宽度 (), 物体图形.取高度 (), 物体图形.获取mdc (), 0, 0, 物体图形.取宽度 (), 物体图形.取高度 (), 物体图形.取透明度 ())
返回 (真)
.子程序 刷新画布, 逻辑型, 公开, 成功返回真，失败返回假。
.局部变量 左边, 整数型
.局部变量 顶边, 整数型
.局部变量 宽度, 整数型
.局部变量 高度, 整数型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
取坐标 (左边, 顶边)
取尺寸 (宽度, 高度)
画布图形.复制图层窗口 (句柄, 左边, 顶边, 宽度, 高度, 画布透明度, 0, 0)
返回 (真)
.子程序 更新尺寸, 逻辑型, 公开, 成功返回真，失败返回假。注意：将清除画布的所有内容。
.参数 宽度, 整数型
.参数 高度, 整数型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
画布图形.销毁 ()
画布图形.创建 (宽度, 高度)
返回 (真)
.子程序 获取mdc, 整数型, 公开
返回 (画布图形.获取mdc ())
.子程序 置透明度, 逻辑型, 公开, 透明度:0-255
.参数 透明度, 整数型, , 0-255
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
画布透明度 ＝ 透明度
返回 (真)
.子程序 取透明度, 整数型, 公开, 透明度:0-255(-1=失败)
.如果真 (是否已创建 ＝ 假)
返回 (-1)
.如果真结束
返回 (画布透明度)
.子程序 取尺寸, 逻辑型, 公开, 包过带样式的窗口边框
.参数 宽度, 整数型, 参考 可空
.参数 高度, 整数型, 参考 可空
.局部变量 矩形位置, 矩形坐标
.局部变量 返回左边, 整数型
.局部变量 返回顶边, 整数型
.局部变量 返回右边, 整数型
.局部变量 返回底边, 整数型
.局部变量 返回, 逻辑型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
返回 ＝ 取窗口矩形坐标 (句柄, 矩形位置)
返回左边 ＝ 矩形位置.左边
返回顶边 ＝ 矩形位置.顶边
返回右边 ＝ 矩形位置.右边
返回底边 ＝ 矩形位置.底边
宽度 ＝ 返回右边 － 返回左边
高度 ＝ 返回底边 － 返回顶边
返回 (返回)
.子程序 取大小, 逻辑型, 公开, 不包过带窗口样式的边框。
.参数 宽度, 整数型, 参考 可空
.参数 高度, 整数型, 参考 可空
.局部变量 矩形尺寸, 矩形尺寸
.局部变量 返回宽度, 整数型
.局部变量 返回高度, 整数型
.局部变量 返回左边, 整数型
.局部变量 返回顶边, 整数型
.局部变量 值, 整数型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
值 ＝ 取窗口矩形尺寸 (句柄, 矩形尺寸)
返回左边 ＝ 矩形尺寸.左边
返回顶边 ＝ 矩形尺寸.顶边
返回宽度 ＝ 矩形尺寸.宽度
返回高度 ＝ 矩形尺寸.高度
宽度 ＝ 矩形尺寸.宽度
高度 ＝ 矩形尺寸.高度
.如果真 (值 ＝ 0)
返回 (假)
.如果真结束
返回 (真)
.子程序 取坐标, 逻辑型, 公开
.参数 左边, 整数型, 参考 可空
.参数 顶边, 整数型, 参考 可空
.局部变量 位置, 矩形坐标
.局部变量 返回, 逻辑型
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
返回 ＝ 取窗口矩形坐标 (句柄, 位置)
左边 ＝ 位置.左边
顶边 ＝ 位置.顶边
返回 (返回)
.子程序 取句柄, 整数型, 公开
返回 (句柄)
.子程序 清除所有, 逻辑型, 公开
.如果真 (是否已创建 ＝ 假)
返回 (假)
.如果真结束
画布图形.清除 ()
返回 (真) 参考技术A .版本 2.程序集 启动窗口程序集.子程序 _设置底图按钮_被单击.如果真 (底图对话框.打开 () ＝ 真)
画板.底图 ＝ 读入文件 (底图对话框.文件名)
.如果真结束 参考技术B 找找这个，[神2也教你学E] - 图片透明和去色计算及加深减淡效果里面提供了2中算法（不用模块），还提供了一个图像透明的模块和模块源代码 参考技术C 可以去找模块！

焦点元素，添加半透明遮罩

焦点元素，添加半透明遮罩

效果图

html

<div class="image-wrap" tabindex="-1">
    <img class="img" src="路径">
</div>

? 备注：图片是替换元素，图片正常加载时，设置的伪元素不可见，只有当图片加载失败时，其伪元素才能看到。所以需要外面套一层壳子class="image-wrap"，在壳子上获取焦点，添加样式。

scss

.image-wrap {
  width: 500px;
  height: 500px;

  &:focus {   
    @include translucent-mask(#0082f0); // 传自己想要的颜色
  }

  img {
    max-width: 100%;
  }
}

/* 半透明遮罩 */
@mixin translucent-mask($color: #0082f0) {
  outline: 1px solid $color;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $color;
    opacity: 0.2;
  }
}

? 备注：

1. 可以用border，不设置outline；

2. 获取焦点前就让元素自身就有border，border-color设置为transparent；

3. 在获取焦点后改变border-color的值为自己想要的颜色。

4.    // border示例代码
   .image-wrap {
      border: 1px solid transparent;
   
      &:focus {
          border-color: red;        
      }
   }