mapaler
/
PADDashFormation
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

做好了潜觉背景的基础

This commit is contained in:
枫谷剑仙 2022-08-08 21:31:19 +08:00
parent 24cc69b7e5
commit df327967e3
3 changed files with 71 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
images/icon-awoken-count.svg
View File

@ -1,4 +1,4 @@
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 123 75" icon-type="latent">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style>
.back {
fill: white;
@ -79,21 +79,4 @@
<circle class="front" filter="url(#inset-shadow)" cx="18" cy="16" r="13"/>
</g>
</symbol>
<image width="123" height="40" xlink:href="../../../CTFX/Desktop/%E6%9C%AA%E5%91%BD%E5%90%8D-3.png"/>
<g>
<circle class="back" filter="url(#out-shadow)" cx="23" cy="19" r="16"/>
<circle class="front" filter="url(#inset-shadow)" cx="23" cy="19" r="13"/>
</g>
<g id="bg-enable-be-assist">
<circle class="back" filter="url(#out-shadow)" cx="23" cy="49" r="16"/>
<circle class="front" filter="url(#inset-shadow)" cx="23" cy="49" r="13"/>
</g>
<g id="bg-latent">
<circle class="back" filter="url(#out-shadow)" cx="60" cy="49" r="16"/>
<circle class="front" filter="url(#inset-shadow)" cx="60" cy="49" r="13"/>
</g>
<g id="bg-unable-be-assist">
<circle class="back" filter="url(#out-shadow)" cx="103" cy="49" r="16"/>
<circle class="front" filter="url(#inset-shadow)" cx="103" cy="49" r="13"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

62
images/icon-latent-block-bg.svg Normal file
View File

@ -0,0 +1,62 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<style>
.latent {
fill: url(#latent-grad);
filter: url(#latent-bg);
}
.big-latent {
fill: url(#latent-table-grad);
filter: url(#latent-bg);
}
</style>
<linearGradient id="latent-grad" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#5af"/>
<stop offset="1" stop-color="#27e"/>
</linearGradient>
<linearGradient id="latent-table-grad" x1="0" y1="0" x2="0" y2="0.5" href="#latent-grad"></linearGradient>
<filter id="latent-bg">
<!--产生外部阴影-->
<feComponentTransfer in="SourceAlpha">
<feFuncA tableValues="0 1" type="table"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation="1"/>
<feOffset dx="0" dy="2"/>
<feComposite in2="SourceAlpha" result="out-shadow"/>
<!--产生边框-->
<feMorphology in="SourceAlpha" operator="erode" radius="1" result="fill-range"/> <!--向内缩进1单位的范围-->
<feFlood flood-color="#BCE" /> <!--边框颜色-->
<feComposite in2="SourceAlpha" operator="in"/>
<feComposite in2="fill-range" operator="out" result="border"/>
<!--产生内部阴影-->
<feComponentTransfer in="fill-range" result="out-of-box-shadow"> <!--得到外部黑框-->
<feFuncA tableValues="1 0" type="table"/>
</feComponentTransfer>
<feGaussianBlur stdDeviation="1"/>
<feOffset dx="0" dy="2" /> <!--向下走1像素-->
<feComposite in2="fill-range" operator="in" result="in-shadow-top"/>
<feMerge>
<feMergeNode in="out-shadow"/>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="border"/>
<feMergeNode in="in-shadow-top"/>
</feMerge>
</filter>
</defs>
<symbol id="block-1" viewBox="0 0 32 32">
<rect fill="url(#latent-grad)" filter="url(#latent-bg)" width="32" height="32" rx="4"/>
</symbol>
<symbol id="block-2" viewBox="0 0 76 32">
<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="35" width="76" height="32" rx="4"/>
</symbol>
<symbol id="block-2-table" viewBox="0 0 76 32">
<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="70" width="70" height="32" rx="4"/>
</symbol>
<symbol id="block-6" viewBox="0 0 252 32">
<rect fill="url(#latent-grad)" filter="url(#latent-bg)" y="70" width="252" height="32" rx="4"/>
</symbol>
<symbol id="block-6-table" viewBox="0 0 148 68"> <!--大小是146×66-->
<path fill="url(#latent-table-grad)" filter="url(#latent-bg)" d="M142,0H4A4,4,0,0,0,0,4V62a4,4,0,0,0,4,4H66a4,4,0,0,0,4-4V36a4,4,0,0,1,4-4h68a4,4,0,0,0,4-4V4A4,4,0,0,0,142,0Z"/>
</symbol>
<!--<path id="内方角" class="big-latent" d="M142,0H4A4,4,0,0,0,0,4V62a4,4,0,0,0,4,4H66a4,4,0,0,0,4-4V32h72a4,4,0,0,0,4-4V4A4,4,0,0,0,142,0Z"/>-->
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

11
script-custom_elements.js
View File

@ -37,7 +37,7 @@ class CustomTokenList extends Array {
} else {
throw new TypeError(`${CustomTokenList.name}.constructor: Argument 1 is not an Attr or HTMLElement.\n参数 1 不是 Attr 或 HTMLElement。`);
}
let initializeValue = this.#attribute.nodeValue;
let initializeValue = this.#attribute?.nodeValue;
if (initializeValue) { //如果值已经存在，则先添加到TokenList
this.value = initializeValue;
}
@ -85,7 +85,7 @@ class CustomTokenList extends Array {
//经过测试普通循环push性能最高，并且由于需要去重，需要每次判断是否存在
tokens.forEach(token => {
if (!this.includes(token)) this.push(...token);
if (!this.includes(token)) this.push(token);
});
this.#refreshAttributeValue();
@ -142,6 +142,7 @@ class CustomTokenList extends Array {
set value(attrValue) {
//将值确保转为字符串，然后以空格拆分，并加入Set确保唯一性
const inputTokens = [...new Set(attrValue.toString().split(/\s+/g))];
console.log(inputTokens)
this.length = 0;
this.push(...inputTokens);
@ -303,6 +304,7 @@ class PadIcon extends HTMLElement {
static ELEMENT_TYPE_AWOKEN = 'awoken';
static ELEMENT_TYPE_TYPE = 'type';
static ELEMENT_TYPE_AWOKEN_COUNT = 'awoken-count';
static ELEMENT_TYPE_LATENT = 'latent';
#svg = document.createElementNS(svgNS,'svg');
#flags = null;
get flagsList() { return this.#flags; }
@ -427,7 +429,10 @@ class PadIcon extends HTMLElement {
text.lengthAdjust.baseVal = full ? SVGTextElement.LENGTHADJUST_SPACINGANDGLYPHS : SVGTextElement.LENGTHADJUST_SPACING;
break;
}
case 'latent':
case PadIcon.ELEMENT_TYPE_LATENT: {
use.href.baseVal = `images/icon-latent-block-bg.svg#block-6-table`;
break;
}
case 'badge':
case 'attr':
case 'orb':