zh/sdk4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化颜色选择插件

Browse Source
This commit is contained in:
zh
2025-07-23 16:42:01 +08:00
parent f2a198ddaf
commit a79c09b45d
3 changed files with 75 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Obj/Element/yj-color-picker.js
View File

@ -13,13 +13,16 @@ class YJColorPicker {
openPickerAni: 'opacity',
defaultColor: options.defaultColor,
startMainCallback: (t) => {
customizeStyle()
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
setTimeout(() => {
customizeStyle()
}, 0);
}
}
this.el = options.el
if (options.sure) {
config.sure = (color) => {
this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
// this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
let c = Cesium.Color.fromCssColorString(color)
if (pickAlphaInput) {
c = c.withAlpha(pickAlphaInput.value / 100)
@ -53,7 +56,7 @@ class YJColorPicker {
}
}
let CesiumColor
if(config.defaultColor) {
if (config.defaultColor) {
CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
}
// if (options.predefineColor) {
@ -61,19 +64,40 @@ class YJColorPicker {
// }
config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
this.colorPicker = new ewPlugins('colorpicker', config)
// window.colorPicker = this.colorPicker
window.colorPicker = this.colorPicker
customizeStyle()
function customizeStyle() {
if (!_this.colorPicker) {
if (!_this.colorPicker || !_this.colorPicker.picker) {
return
}
let isSubtract = false
let box = _this.colorPicker.box
let picker = _this.colorPicker.picker
let x = box.getBoundingClientRect().x
let y = box.getBoundingClientRect().y
let height = 0
// if (picker.style.display === 'none') {
// picker.style.display = 'block'
// height = picker.offsetHeight
// console.log('picker.style.display.opacity', picker.style.display.opacity)
// picker.style.display = 'none'
// }
// console.log('===========================================')
// console.log((y + box.offsetHeight + 4), height, window.innerHeight)
// if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
// console.log(y, height)
// picker.style.top = y - height + 'px'
// }
// else {
// picker.style.top = (y + box.offsetHeight + 4) + 'px'
// }
picker.style.left = x + 'px'
picker.style.minWidth = '325px'
let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
// let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
if (pickAlphaSliderBar) {
pickAlphaSliderBar.parentNode.style.width = '16px'
@ -101,7 +125,7 @@ class YJColorPicker {
let pickAlpha = document.createElement('div')
pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
pickAlpha.innerHTML = `
<input class="input" type="number" title="" step="0.01" min="0" max="100">
<input class="input" type="number" title="" step="1" min="0" max="100">
<span class="unit">%</span>
<span class="arrow"></span>`
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
@ -121,14 +145,14 @@ class YJColorPicker {
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
pickAlphaInput.value = Number(value.toFixed(2))
pickAlphaInput.value = Number(value.toFixed(0))
}
})
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(2))
pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(0))
}
else {
pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(2)) : 100
pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(0)) : 100
}
_this.pickAlphaInputValue = pickAlphaInput.value
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
@ -270,12 +294,26 @@ class YJColorPicker {
}
})
}
height = picker.offsetHeight
if (picker.style.display === 'none') {
picker.style.display = 'block'
height = picker.offsetHeight
picker.style.display = 'none'
}
if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
picker.style.top = y - height + 'px'
}
else {
picker.style.top = (y + box.offsetHeight + 4) + 'px'
}
_this.colorPicker.pancelTop = parseFloat(picker.style.top) - 2
}
function clickDefineColor(color) {
if (pickAlphaInput) {
let c = Cesium.Color.fromCssColorString(color)
pickAlphaInput.value = Number((c.alpha * 100).toFixed(2))
pickAlphaInput.value = Number((c.alpha * 100).toFixed(0))
}
}