canvas导出图片python_Scriptable神器实战6 —— 给背景图片加上半透明遮罩

前序文章：

1. Scriptable 神器试玩，创建一个显示自定义标题内容的 iOS14桌面组件

2. Scriptable 神器实战2 —— 给桌面组件添加自定义背景图片

3. Scriptable 神器实战3 —— 夜间模式动态展示

4. Scriptable 神器实战4 —— 获取桌面组件的大小以自动展示内容

5. Scriptable 神器实战5 —— 给桌面组件添加一个渐变色背景

本文讲一个比较能提升用户体验的功能技巧：给背景图片加上半透明遮罩层。

有什么用呢？

比如，我们的桌面组件是用背景图片+文字展示的，原图没处理之前，展示效果如下：

大家可以看到，背景图片比较明亮的时候，文字会显示的非常不清楚，很影响用户的体验。

一个比较好的处理方案就是，给背景再加一层半透明的遮罩，这样就可以降低背景图片的明亮度，更好的显示用户想要查阅的文本内容了。

加上遮罩后的效果如图：

这样看起来，效果是不是棒多了 😁

那么这个效果是如何做到的呢？

我们这里用到了 Scriptable 的一个功能：DrawContext()

也就是我们前端开发者比较熟悉的：canvas

用这个 API，我们就像操控 canvas 一样，轻松绘制内容，并导出成图片。

具体图片加遮罩代码如下：

async function shadowImage (img) {  let ctx = new DrawContext()  // 把画布的尺寸设置成图片的尺寸  ctx.size = img.size  // 把图片绘制到画布中  ctx.drawImageInRect(img, new Rect(0, 0, img.size['width'], img.size['height']))  // 设置绘制的图层颜色，为半透明的黑色  ctx.setFillColor(new Color('#000000', 0.5))  // 绘制图层  ctx.fillRect(new Rect(0, 0, img.size['width'], img.size['height']))    // 导出最终图片  return await ctx.getImage()}

这个代码可以通用，复制到你的脚本中后，通过如下方式即可设置组件的半透明遮罩图片背景：

widget.backgroundImage = await shadowImage(img)

如果你还有不清楚不了解的地方，可以在古人云公众号内留言评论，欢迎一起学习进步