mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-04-23 05:47:33 +08:00
daily update
This commit is contained in:
Vick Scarlet
+360
-2
@@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
class ColorFilterItem extends Laya.Image {
|
||||
constructor() {
|
||||
super();
|
||||
@@ -72,6 +70,7 @@ class ScaleButton extends Laya.Button {
|
||||
}
|
||||
|
||||
onMouse(type) {
|
||||
Laya.Tween.clearAll(this);
|
||||
switch (type) {
|
||||
case Laya.Event.MOUSE_DOWN:
|
||||
Laya.Tween.to(this, { scaleX: 0.9, scaleY: 0.9 }, 100);
|
||||
@@ -86,3 +85,362 @@ class ScaleButton extends Laya.Button {
|
||||
}
|
||||
}
|
||||
|
||||
class RGBAItem {
|
||||
constructor(config={}) {
|
||||
for(const key in config)
|
||||
switch(key) {
|
||||
case 'r':
|
||||
case 'g':
|
||||
case 'b':
|
||||
case 'a':
|
||||
case 'hex':
|
||||
case 'hexa':
|
||||
case 'rgb':
|
||||
case 'rgba':
|
||||
this[key] = config[key];
|
||||
break;
|
||||
case 'on':
|
||||
this.on(config[key]);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
#r;
|
||||
#g;
|
||||
#b;
|
||||
#a;
|
||||
#on = new Set();
|
||||
|
||||
on(fn) {
|
||||
this.#on.add(fn);
|
||||
}
|
||||
|
||||
off(fn) {
|
||||
this.#on.delete(fn);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.#on.clear();
|
||||
}
|
||||
|
||||
#event() {
|
||||
this.#on.forEach(fn => fn(this));
|
||||
}
|
||||
|
||||
#rgb(v) {
|
||||
return [
|
||||
this.#dec(v.slice(1, 3)),
|
||||
this.#dec(v.slice(3, 5)),
|
||||
this.#dec(v.slice(5, 7)),
|
||||
];
|
||||
}
|
||||
|
||||
#rgba(v) {
|
||||
return [
|
||||
this.#dec(v.slice(1, 3)),
|
||||
this.#dec(v.slice(3, 5)),
|
||||
this.#dec(v.slice(5, 7)),
|
||||
this.#dec(v.slice(7, 9)),
|
||||
];
|
||||
}
|
||||
|
||||
#hex(v) {
|
||||
v = parseInt(v).toString(16);
|
||||
return v.length == 1 ? '0' + v : v;
|
||||
}
|
||||
|
||||
#dec(v) {
|
||||
return parseInt(v, 16);
|
||||
}
|
||||
|
||||
get hex() {
|
||||
return `#${
|
||||
this.#hex(this.r)
|
||||
}${
|
||||
this.#hex(this.g)
|
||||
}${
|
||||
this.#hex(this.b)
|
||||
}`;
|
||||
}
|
||||
set hex(v) {
|
||||
[this.#r, this.#g, this.#b] = this.#rgb(v);
|
||||
this.#event();
|
||||
}
|
||||
|
||||
get hexa() {
|
||||
return `#${
|
||||
this.#hex(this.r)
|
||||
}${
|
||||
this.#hex(this.g)
|
||||
}${
|
||||
this.#hex(this.b)
|
||||
}${
|
||||
this.#hex(this.a)
|
||||
}`;
|
||||
}
|
||||
set hexa(v) {
|
||||
[this.#r, this.#g, this.#b] = this.#rgba(v);
|
||||
this.#event();
|
||||
}
|
||||
|
||||
get rgb() {
|
||||
return [this.r, this.g, this.b];
|
||||
}
|
||||
set rgb(v) {
|
||||
[this.#r, this.#g, this.#b] = v;
|
||||
this.#event();
|
||||
}
|
||||
|
||||
get rgba() {
|
||||
return [this.r, this.g, this.b, this.a];
|
||||
}
|
||||
set rgba(v) {
|
||||
[this.#r, this.#g, this.#b, this.#a] = v;
|
||||
this.#event();
|
||||
}
|
||||
|
||||
|
||||
get r() {
|
||||
return this.#r||0;
|
||||
}
|
||||
set r(value) {
|
||||
this.#r = value;
|
||||
this.#event();
|
||||
}
|
||||
get g() {
|
||||
return this.#g||0;
|
||||
}
|
||||
set g(value) {
|
||||
this.#g = value;
|
||||
this.#event();
|
||||
}
|
||||
get b() {
|
||||
return this.#b||0;
|
||||
}
|
||||
set b(value) {
|
||||
this.#b = value;
|
||||
this.#event();
|
||||
}
|
||||
get a() {
|
||||
return this.#a||0;
|
||||
}
|
||||
set a(value) {
|
||||
this.#a = value;
|
||||
this.#event();
|
||||
}
|
||||
|
||||
cRgb(hex) {
|
||||
const [r, g, b] = this.#rgb(hex);
|
||||
return {r, g, b};
|
||||
}
|
||||
|
||||
cRgba(hexa) {
|
||||
const [r, g, b, a] = this.#rgba(hexa);
|
||||
return {r, g, b, a};
|
||||
}
|
||||
|
||||
distance(left, right) {
|
||||
const [lr, lg, lb] = this.#rgb(left);
|
||||
const [rr, rg, rb] = this.#rgb(right);
|
||||
const {r, g, b} = this;
|
||||
|
||||
const ddr = Math.abs(r - lr);
|
||||
const ddg = Math.abs(g - lg);
|
||||
const ddb = Math.abs(b - lb);
|
||||
|
||||
const result = (d, a, b) => ((d / Math.abs(b - a)) || 0);
|
||||
|
||||
switch(Math.max(ddr, ddg, ddb)) {
|
||||
case ddr: return result(ddr, lr, rr);
|
||||
case ddg: return result(ddg, lg, rg);
|
||||
case ddb: return result(ddb, lb, rb);
|
||||
default: return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
class ColorfulBox extends Laya.Box {
|
||||
constructor() {
|
||||
super();
|
||||
this.on(Laya.Event.MOUSE_OVER, this, this.onMouse, [Laya.Event.MOUSE_DOWN]);
|
||||
this.on(Laya.Event.MOUSE_DOWN, this, this.onMouse, [Laya.Event.MOUSE_DOWN]);
|
||||
this.on(Laya.Event.MOUSE_OUT, this, this.onMouse, [Laya.Event.MOUSE_OUT]);
|
||||
this.on(Laya.Event.MOUSE_UP, this, this.onMouse, [Laya.Event.MOUSE_UP]);
|
||||
this.#draw();
|
||||
}
|
||||
|
||||
#defaultColor = '#ffffff';
|
||||
#hoverColor = '#ffffff';
|
||||
#defaultStroke = '#ffffff';
|
||||
#hoverStroke = '#ffffff';
|
||||
#defaultLabel = '#000000';
|
||||
#hoverLabel = '#000000';
|
||||
#color = new RGBAItem({hex: this.#defaultColor, on: ()=>this.#draw()});
|
||||
#stroke = new RGBAItem({hex: this.#defaultStroke, on: ()=>this.#draw()});
|
||||
#label = new RGBAItem({hex: this.#defaultLabel, on: (hex)=>{
|
||||
const label = this.getChildByName('label');
|
||||
if (!label) return;
|
||||
label.color = hex;
|
||||
}});
|
||||
#lineWidth = 0;
|
||||
#radius = 0;
|
||||
#animationTime = 200;
|
||||
#state = 1;
|
||||
|
||||
onMouse(type) {
|
||||
const label = this.getChildByName('label');
|
||||
const tween = (colorItem, target, last) => {
|
||||
Laya.Tween.clearAll(colorItem);
|
||||
Laya.Tween.to(colorItem, colorItem.cRgb(target), colorItem.distance(target, last) * this.#animationTime);
|
||||
}
|
||||
switch (type) {
|
||||
case Laya.Event.MOUSE_OVER:
|
||||
case Laya.Event.MOUSE_DOWN:
|
||||
if(this.#state == 2) return;
|
||||
this.#state = 2;
|
||||
tween(this.#color, this.#hoverColor, this.#defaultColor);
|
||||
tween(this.#stroke, this.#hoverStroke, this.#defaultStroke);
|
||||
if(label) tween(this.#label, this.#hoverLabel, this.#defaultLabel);
|
||||
break;
|
||||
case Laya.Event.MOUSE_OUT:
|
||||
case Laya.Event.MOUSE_UP:
|
||||
if(this.#state == 1) return;
|
||||
this.#state = 1;
|
||||
tween(this.#color, this.#defaultColor, this.#hoverColor);
|
||||
tween(this.#stroke, this.#defaultStroke, this.#hoverStroke);
|
||||
if(label) tween(this.#label, this.#defaultLabel, this.#hoverLabel);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
#draw() {
|
||||
this.graphics.clear();
|
||||
const w = this.width;
|
||||
const h = this.height;
|
||||
const r = Math.min(this.#radius, w / 2, h / 2);
|
||||
const fillStyle = this.#color.hex;
|
||||
const strokeStyle = this.#stroke.hex;
|
||||
const lineWidth = this.lineWidth;
|
||||
|
||||
if(r <= 0) {
|
||||
this.graphics.drawRect(0, 0, w, h, fillStyle, strokeStyle, lineWidth);
|
||||
return;
|
||||
}
|
||||
|
||||
const a = w + lineWidth;
|
||||
const b = h + lineWidth;
|
||||
const c = r + lineWidth;
|
||||
const d = a - r;
|
||||
const e = b - r;
|
||||
const f = -lineWidth;
|
||||
|
||||
this.graphics.drawPath(0, 0, [
|
||||
["moveTo", c, f],
|
||||
["arcTo", a, f, a, c, c],
|
||||
["arcTo", a, b, d, b, c],
|
||||
["arcTo", f, b, f, e, c],
|
||||
["arcTo", f, f, c, f, c],
|
||||
["closePath"],
|
||||
], { fillStyle: strokeStyle });
|
||||
|
||||
const x = w - r;
|
||||
const y = h - r;
|
||||
this.graphics.drawPath(0, 0, [
|
||||
["moveTo", r, 0],
|
||||
["arcTo", w, 0, w, r, r],
|
||||
["arcTo", w, h, x, h, r],
|
||||
["arcTo", 0, h, 0, y, r],
|
||||
["arcTo", 0, 0, r, 0, r],
|
||||
["closePath"],
|
||||
], { fillStyle });
|
||||
}
|
||||
|
||||
get width() {
|
||||
return super.width;
|
||||
}
|
||||
set width(value) {
|
||||
super.width = value;
|
||||
this.#draw();
|
||||
}
|
||||
get height() {
|
||||
return super.height;
|
||||
}
|
||||
set height(value) {
|
||||
super.height = value;
|
||||
this.#draw();
|
||||
}
|
||||
|
||||
get defaultColor() {
|
||||
return this.#defaultColor;
|
||||
}
|
||||
set defaultColor(value) {
|
||||
this.#defaultColor = value;
|
||||
this.#color.hex = value;
|
||||
}
|
||||
|
||||
get hoverColor() {
|
||||
return this.#hoverColor;
|
||||
}
|
||||
set hoverColor(value) {
|
||||
this.#hoverColor = value;
|
||||
}
|
||||
|
||||
get defaultStroke() {
|
||||
return this.#defaultStroke;
|
||||
}
|
||||
set defaultStroke(value) {
|
||||
this.#defaultStroke = value;
|
||||
this.#stroke.hex = value;
|
||||
}
|
||||
|
||||
get hoverStroke() {
|
||||
return this.#hoverStroke;
|
||||
}
|
||||
set hoverStroke(value) {
|
||||
this.#hoverStroke = value;
|
||||
}
|
||||
|
||||
get defaultLabel() {
|
||||
return this.#defaultLabel;
|
||||
}
|
||||
set defaultLabel(value) {
|
||||
this.#defaultLabel = value;
|
||||
const label = this.getChildByName('label');
|
||||
if (!label) return;
|
||||
label.color = value;
|
||||
}
|
||||
|
||||
get hoverLabel() {
|
||||
return this.#hoverLabel;
|
||||
}
|
||||
set hoverLabel(value) {
|
||||
this.#hoverLabel = value;
|
||||
}
|
||||
|
||||
get animationTime() {
|
||||
return this.#animationTime;
|
||||
}
|
||||
set animationTime(value) {
|
||||
this.#animationTime = value;
|
||||
}
|
||||
|
||||
get radius() {
|
||||
return this.#radius||0;
|
||||
}
|
||||
set radius(value) {
|
||||
this.#radius = value;
|
||||
this.#draw();
|
||||
}
|
||||
|
||||
get lineWidth() {
|
||||
return this.#lineWidth||0;
|
||||
}
|
||||
set lineWidth(value) {
|
||||
this.#lineWidth = value;
|
||||
this.#draw();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user