chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): add a new option to disable invert filter

Browse Source
This commit is contained in:
Haoyu Xu
2021-08-03 16:51:33 -04:00
parent 665ca6c617
commit 6d60993d27
3 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
template/assets/settings.js
View File

@@ -13,6 +13,7 @@ var Settings = (function () {
this.opacity = parseFloat(getComputedStyle(this.logoEl).opacity) * 100;
this.el = document.createElement("div");
this.spinePlayerLoaded = false;
this.invertFilter = true;
}
Settings.prototype.validateConfig = function () {
if (typeof this.logoEl === "string")
@@ -46,6 +47,7 @@ var Settings = (function () {
Settings.prototype.setLogo = function (url, removeInvert) {
this.logoEl.src = url;
this.resizeLogo(this.ratio);
if (!this.invertFilter) return;
if (removeInvert) {
this.logoEl.style.filter = "invert(0)";
} else {
@@ -63,6 +65,10 @@ var Settings = (function () {
var opacity = parseFloat(value);
this.logoEl.style.opacity = opacity / 100;
};
Settings.prototype.disableInvertFilter = function (el) {
this.logoEl.style.filter = "invert(0)";
this.invertFilter = false;
};
Settings.prototype.positionReset = function () {
if (this.spinePlayerLoaded)
this.spinePlayer.updateViewport(window.operatorSettings.viewport)

5
template/assets/style.css
View File

@@ -24,9 +24,12 @@ body {
position: fixed;
left: 0;
top: 0;
z-index: -1;
}
.invert-filter {
filter: invert(1);
opacity: 0.3;
z-index: -1;
}
.widget-wrapper {

2
template/index.html
View File

@@ -13,7 +13,7 @@
<body>
<div id="dev" style="position: fixed;left: 0;top: 0;background-color: white;"></div>
<image src="./operator/{operator_logo}.png" class="logo" id="logo" alt="operator logo" />
<image src="./operator/{operator_logo}.png" class="logo invert-filter" id="logo" alt="operator logo" />
<div id="widget-wrapper" style="width: 100%; height: 100%;">
<div id="container" style="width: 100%; height: 100%;"></div>
</div>