From ef2c1587270c48dd094bba742788811e7626d62c Mon Sep 17 00:00:00 2001 From: zh <972939975@qq.com> Date: Tue, 19 Aug 2025 10:57:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E9=A2=9C=E8=89=B2=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E6=A1=86=E8=BE=93=E5=85=A5=E6=97=A0=E6=95=88=E6=9E=9C?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Obj/Element/yj-color-picker.js | 101 ++++++++++++++++++++++++++++- static/3rdparty/ewPlugins.min.js | 1 + 2 files changed, 99 insertions(+), 3 deletions(-) diff --git a/src/Obj/Element/yj-color-picker.js b/src/Obj/Element/yj-color-picker.js index fb45f6d..2703cf6 100644 --- a/src/Obj/Element/yj-color-picker.js +++ b/src/Obj/Element/yj-color-picker.js @@ -160,6 +160,64 @@ class YJColorPicker { let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0] picker.insertBefore(colorInputBox, dropbtns) + RInput.addEventListener('blur', (e) => { + let value = e.target.value + if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { + value = Number(value) + if ((e.target.max) && value > Number(e.target.max)) { + value = Number(e.target.max) + } + if ((e.target.min) && value < Number(e.target.min)) { + value = Number(e.target.min) + } + if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { + value = Number(e.target.dataset.min) + } + RInput.value = parseInt(value) + _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) + _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) + } + }) + GInput.addEventListener('blur', (e) => { + let value = e.target.value + if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { + value = Number(value) + if ((e.target.max) && value > Number(e.target.max)) { + value = Number(e.target.max) + } + if ((e.target.min) && value < Number(e.target.min)) { + value = Number(e.target.min) + } + if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { + value = Number(e.target.dataset.min) + } + GInput.value = parseInt(value) + _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) + _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) + } + }) + BInput.addEventListener('blur', (e) => { + let value = e.target.value + if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) { + value = Number(value) + if ((e.target.max) && value > Number(e.target.max)) { + value = Number(e.target.max) + } + if ((e.target.min) && value < Number(e.target.min)) { + value = Number(e.target.min) + } + if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) { + value = Number(e.target.dataset.min) + } + BInput.value = parseInt(value) + _this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`) + _this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight) + } + }) + + + + if (options.alpha) { Inputs[0].style.width = '52px' Inputs[1].style.width = '52px' @@ -170,7 +228,6 @@ class YJColorPicker { ` pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling) - pickerInput.style.width = '106px' pickAlpha.style.width = '66px' pickAlpha.style.margin = '0 6px 0 0' AInput = pickAlpha.getElementsByClassName('input')[0] @@ -202,7 +259,7 @@ class YJColorPicker { AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100 } else { - AInput.value = CesiumColor ? parseInt(CesiumColor.alpha * 100) / 100 : 1 + AInput.value = CesiumColor ? parseInt(Number(CesiumColor.alpha.toFixed(2)) * 100) / 100 : 1 } _this.pickAlphaInputValue = AInput.value box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString() @@ -374,7 +431,7 @@ class YJColorPicker { function clickDefineColor(color) { if (AInput) { let c = Cesium.Color.fromCssColorString(color) - AInput.value = parseInt(c.alpha * 100) / 100 + AInput.value = parseInt(Number(c.alpha.toFixed(2)) * 100) / 100 } } @@ -459,6 +516,44 @@ class YJColorPicker { } } + function colorRgbaToHsba(e) { + var t = e.slice(e.indexOf("(") + 1, e.lastIndexOf(")")).split(",") + , r = t.length < 4 ? 1 : Number(t[3]) + , n = Number(t[0]) / 255 + , o = Number(t[1]) / 255 + , i = Number(t[2]) / 255 + , a = void 0 + , s = void 0 + , l = void 0 + , c = Math.min(n, o, i) + , d = l = Math.max(n, o, i) + , u = d - c; + if (d === c) + a = 0; + else { + switch (d) { + case n: + a = (o - i) / u + (o < i ? 6 : 0); + break; + case o: + a = 2 + (i - n) / u; + break; + case i: + a = 4 + (n - o) / u + } + a = Math.round(60 * a) + } + s = 0 === d ? 0 : 1 - c / d; + return s = Math.round(100 * s), + l = Math.round(100 * l), + { + h: a, + s: s, + b: l, + a: r + } + } + function pickerInputChange(v) { if (_this.colorPicker && _this.colorPicker.pickerInput) { let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value) diff --git a/static/3rdparty/ewPlugins.min.js b/static/3rdparty/ewPlugins.min.js index ffd594b..2b89a81 100644 --- a/static/3rdparty/ewPlugins.min.js +++ b/static/3rdparty/ewPlugins.min.js @@ -810,6 +810,7 @@ else this.init(o, this.config) } + this.changeColor = g this.close = () => { this.pickerFlag = !this.pickerFlag, this.picker.style.opacity = 0