Wallpaper Engine 网页壁纸添加用户自定义属性

Wallpaper Engine 网页壁纸添加用户自定义属性

被星球大战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 中的内容

在壁纸项目中添加用户属性

在壁纸编辑器中打开 编辑 – 更改项目设置 – 添加属性,出现对话框(下图为场景壁纸的选项,网页壁纸还会多两个文件和目录选项)Wallpaper Engine 网页壁纸添加用户自定义属性

添加四个文本框属性,并记住它们的关键字 (key)Wallpaper Engine 网页壁纸添加用户自定义属性

添加 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

效果

Wallpaper Engine 网页壁纸添加用户自定义属性Wallpaper Engine 网页壁纸添加用户自定义属性

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据