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

3 years ago

source link: https://azhuge233.com/wallpaper-engine-%e7%bd%91%e9%a1%b5%e5%a3%81%e7%ba%b8%e6%b7%bb%e5%8a%a0%e7%94%a8%e6%88%b7%e8%87%aa%e5%ae%9a%e4%b9%89%e5%b1%9e%e6%80%a7/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

被星球大战2的 “For the better, right?” meme 刷屏，心血来潮点子萌生想把这个搬到 Wallpaper Engine

找种子->下电影->截图->拼接->发布图片壁纸，一气呵成，但是总觉得什么都不加的 meme 少了味道，于是又想加入自定义文字

Wallpaper Engine 的场景和视频壁纸并不支持，只能通过网页壁纸来实现

下文将展示如何在 Wallpaper Engine 的网页壁纸中添加用户自定义文字（其他用户属性同理）

Windows 10
Wallpaper Engine 1.6.22

Wallpaper Engine – Designer Documentation – Property Overview

以下步骤假设已经写好网页 index.html，内容大致如下

<head>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

<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;

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 网页壁纸添加用户自定义属性