APUS之图片蒙板

上图中，不变的部分均可用背景实现，文字添加相应的英文字体也可方便实现，主要是指示器的渐变部分

这就需要用到蒙板功能

示例：https://gitee.com/clawclaw/sttmask

1.  制作两张png图片，分别表示指示和渐变区

指针：仪表指针在默认设置下，图片的左上角点对应仪表的中心

渐变圆：大小与仪表一致

2.  放三个控件，仪表盘和滑块绑定同一个整型变量，关系如图，

3.  仪表盘的指针属性，启用图片，中心坐标Y为指针粗细的一半，如下

4.  给slider控件增加值变化事件，并加入代码，如下

void Frm16::wMSlider1_vch_cb(uint16_t code, LvEvent e) {

    int a1 = wMGauge1->getStartAngle();//起始角度
    int a2;
    vm->getInt("变量_1", a2);
    cout<<a1<<" - "<<a2<<endl;
    int vmin = 100;//这是仪表控件的最小值
    int vmax = 200;//这是仪表控件的最大值
    int angleRange = 270;//这是仪表控件的占用角度
    int angle = angleRange*(a2 - vmin)/(vmax-vmin);//计算当前值对应的角度
    STTMask::addAngle(wMImage1, 200, 200, a1, (a1+angle)%360);//蒙板，注意第2,3个参数是控件尺寸的1半

}

5.  运行

6.  拖动滑动块