被星球大战2的 “For the better, right?” meme 刷屏,心血来潮点子萌生想把这个搬到 Wallpaper Engine
找种子->下电影->截图->拼接->发布图片壁纸,一气呵成,但是总觉得什么都不加的 meme 少了味道,于是又想加入自定义文字
Wallpaper Engine 的场景和视频壁纸并不支持,只能通过网页壁纸来实现
下文将展示如何在 Wallpaper Engine 的网页壁纸中添加用户自定义文字(其他用户属性同理)
环境
- Windows 10
- Wallpaper Engine 1.6.22
参考
步骤
以下步骤假设已经写好网页 index.html,内容大致如下
<head> <!-- meta --> <!-- some css --> </head> <body> <div> <span id="text1"></span> </div> <div> <span id="text2"></span> </div> <div> <span id="text3"></span> </div> <div> <span id="text4"></span> </div> <script></script> </body>
需要实现:在 Wallpaper Engine 中用户可以自定义这四个 span 中的内容
在壁纸项目中添加用户属性
在壁纸编辑器中打开 编辑 - 更改项目设置 - 添加属性,出现对话框(下图为场景壁纸的选项,网页壁纸还会多两个文件和目录选项)
添加四个文本框属性,并记住它们的关键字 (key)
添加 wallpaperPropertyListener 代码
打开 index.html,在 script 标签内添加 js 代码
window.wallpaperPropertyListener = { applyUserProperties: function(properties) { if (properties.text1) { var span = documents.getElementById("text1"); span.innerHTML = properties.text1.value; } if (properties.text2) { var span = documents.getElementById("text2"); span.innerHTML = properties.text2.value; } if (properties.text3) { var span = documents.getElementById("text3"); span.innerHTML = properties.text3.value; } if (properties.text4) { var span = documents.getElementById("text4"); span.innerHTML = properties.text4.value; } }, };
wallpaperPropertyListener 是 Wallpaper Engine 独有的对象,在其他浏览器中无效
壁纸项目中添加的用户属性通过 properties.[属性关键字] 来访问
if (properties.属性关键字) 实现了在对应关键字 (key) 的属性发生变化时执行 if 内的逻辑
在 if 声明中可以添加更加复杂的逻辑
其他属性的使用可以查看官方文档 Wallpaper Engine - Designer Documentation - User Properties
效果