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

修改颜色选择器样式，显示rgba格式

Browse Source
This commit is contained in:
zh
2025-07-25 09:18:28 +08:00
parent 8ca3576c3e
commit 829d1a59f7
5 changed files with 163 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Obj/Element/svg.js
View File

@ -1,4 +1,4 @@
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross']
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross', 'icom-confirm']
function setSvg() {
let svgElm = document.createElement('svg');
svgElm.xmlns = 'http://www.w3.org/2000/svg'

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

@ -1,7 +1,11 @@
class YJColorPicker {
constructor(options = {}) {
let _this = this
let pickAlphaInput
let RInput
let GInput
let BInput
let AInput
let config = {
el: options.el,
size: "mini",
@ -12,6 +16,7 @@ class YJColorPicker {
hasClear: true,
openPickerAni: 'opacity',
defaultColor: options.defaultColor,
pickerInputChange: pickerInputChange,
startMainCallback: (t) => {
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
setTimeout(() => {
@ -24,9 +29,9 @@ class YJColorPicker {
config.sure = (color) => {
// this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
let c = Cesium.Color.fromCssColorString(color)
if (pickAlphaInput) {
c = c.withAlpha(pickAlphaInput.value / 100)
this.pickAlphaInputValue = pickAlphaInput.value
if (AInput) {
c = c.withAlpha(AInput.value)
this.pickAlphaInputValue = AInput.value
}
color = c.toCssHexString()
if (typeof options.sure == 'function') {
@ -37,8 +42,8 @@ class YJColorPicker {
}
if (options.clear) {
config.clear = () => {
if (pickAlphaInput) {
pickAlphaInput.value = this.pickAlphaInputValue = 100
if (AInput) {
AInput.value = this.pickAlphaInputValue = 1
}
this.colorPicker.config.defaultColor = ''
customizeStyle()
@ -64,7 +69,7 @@ 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()
@ -78,7 +83,7 @@ class YJColorPicker {
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
@ -103,16 +108,13 @@ class YJColorPicker {
pickAlphaSliderBar.parentNode.style.width = '16px'
pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
}
// let customDivider = document.createElement('span')
// customDivider.className = 'custom-divider'
// customDivider.style.margin = '10px 0'
// pickerContent.parentNode.insertBefore(customDivider, pickerContent.nextSibling)
let pickPen = document.createElement('div')
pickPen.className = 'icon-pen-box'
pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
/** 为完成、暂时隐藏 *///////
pickPen.style.opacity = '0'
pickPen.style.display = 'none'
pickPen.style.cursor = 'unset'
@ -120,19 +122,67 @@ class YJColorPicker {
let pickerInput = _this.colorPicker.pickerInput
pickerInput.parentNode.insertBefore(pickPen, pickerInput)
pickerInput.style.width = '188px'
pickerInput.style.display = 'none'
let colorInputBox = document.createElement('div')
let row1Elm = document.createElement('div')
row1Elm.className = 'row'
row1Elm.style.margin = '6px 0 0 0'
row1Elm.innerHTML = `
<div class="col">R</div>
<div class="col">G</div>
<div class="col">B</div>
<div class="col" style="flex: 0 0 92px;"></div>
`
let row2Elm = document.createElement('div')
row2Elm.className = 'row'
row2Elm.innerHTML = `
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
`
colorInputBox.appendChild(row1Elm)
colorInputBox.appendChild(row2Elm)
let Inputs = row2Elm.getElementsByTagName('input')
Inputs[0].style.width = '72px'
Inputs[1].style.width = '72px'
Inputs[2].style.width = '72px'
RInput = Inputs[0]
GInput = Inputs[1]
BInput = Inputs[2]
let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0]
picker.insertBefore(colorInputBox, dropbtns)
if (options.alpha) {
Inputs[0].style.width = '52px'
Inputs[1].style.width = '52px'
Inputs[2].style.width = '52px'
let pickAlpha = document.createElement('div')
pickAlpha.className = 'input-number input-number-unit-1 color-alpha'
pickAlpha.className = 'input-number input-number-unit color-alpha'
pickAlpha.innerHTML = `
<input class="input" type="number" title="" step="1" min="0" max="100">
<span class="unit">%</span>
<input class="input" type="number" title="" step="0.01" min="0" max="1">
<span class="arrow"></span>`
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
pickerInput.style.width = '106px'
pickAlpha.style.width = '80px'
pickAlphaInput = pickAlpha.getElementsByClassName('input')[0]
pickAlphaInput.addEventListener('blur', (e) => {
pickAlpha.style.width = '66px'
pickAlpha.style.margin = '0 6px 0 0'
AInput = pickAlpha.getElementsByClassName('input')[0]
row1Elm.innerHTML = `
<div class="col">R</div>
<div class="col">G</div>
<div class="col">B</div>
<div class="col">A</div>
<div class="col" style="flex: 0 0 106px;"></div>
`
row2Elm.appendChild(pickAlpha)
AInput.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)
@ -145,23 +195,26 @@ class YJColorPicker {
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
pickAlphaInput.value = Number(value.toFixed(0))
AInput.value = parseInt(value * 100) / 100
}
})
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
pickAlphaInput.value = Number(Number(_this.pickAlphaInputValue).toFixed(0))
AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
}
else {
pickAlphaInput.value = CesiumColor ? Number((CesiumColor.alpha * 100).toFixed(0)) : 100
AInput.value = CesiumColor ? parseInt(CesiumColor.alpha * 100) / 100 : 1
}
_this.pickAlphaInputValue = pickAlphaInput.value
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(pickAlphaInput.value / 100).toCssColorString()
_this.pickAlphaInputValue = AInput.value
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString()
}
else {
CesiumColor = CesiumColor ? CesiumColor.withAlpha(1) : ''
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssColorString()
}
let btngroup = picker.getElementsByClassName('ew-color-dropbtngroup')[0]
row2Elm.appendChild(btngroup)
let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
if (defineColorContainer) {
let colorList = localStorage.getItem('custom-color')
@ -188,8 +241,10 @@ class YJColorPicker {
addColorBtn.className = 'yj-pre-collect-color add'
let subtractColorBtn = document.createElement('div')
subtractColorBtn.innerHTML = '<svg class="icon-minus"><use xlink:href="#yj-icon-minus"></use></svg>'
subtractColorBtn.innerHTML = '<svg class="icon-minus" style="display: unset;"><use xlink:href="#yj-icon-minus"></use></svg><svg class="icon-confirm" style="display: none;"><use xlink:href="#yj-icom-confirm"></use></svg>'
subtractColorBtn.className = 'yj-pre-collect-color subtract'
let minusIcon = subtractColorBtn.getElementsByClassName('icon-minus')[0]
let confirmIcon = subtractColorBtn.getElementsByClassName('icon-confirm')[0]
collectColorContainer.appendChild(addColorBtn)
collectColorContainer.appendChild(subtractColorBtn)
@ -248,8 +303,8 @@ class YJColorPicker {
let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
let c = Cesium.Color.fromCssColorString(color || '#ffffff')
if (pickAlphaInput) {
c = c.withAlpha(pickAlphaInput.value / 100)
if (AInput) {
c = c.withAlpha(AInput.value)
}
let colorString = c.toCssHexString()
colorItemElm.style.backgroundColor = colorString
@ -283,11 +338,15 @@ class YJColorPicker {
subtractColorBtn.addEventListener('click', () => {
isSubtract = !isSubtract
if (isSubtract) {
minusIcon.style.display = 'none'
confirmIcon.style.display = 'unset'
for (let i = 0; i < subtractElmList.length; i++) {
subtractElmList[i].style.display = 'block'
}
}
else {
minusIcon.style.display = 'unset'
confirmIcon.style.display = 'none'
for (let i = 0; i < subtractElmList.length; i++) {
subtractElmList[i].style.display = 'none'
}
@ -308,12 +367,14 @@ class YJColorPicker {
picker.style.top = (y + box.offsetHeight + 4) + 'px'
}
_this.colorPicker.pancelTop = parseFloat(picker.style.top) - 2
pickerInputChange(Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssHexString())
}
function clickDefineColor(color) {
if (pickAlphaInput) {
if (AInput) {
let c = Cesium.Color.fromCssColorString(color)
pickAlphaInput.value = Number((c.alpha * 100).toFixed(0))
AInput.value = parseInt(c.alpha * 100) / 100
}
}
@ -366,6 +427,46 @@ class YJColorPicker {
"#" + n
}
}
function colorHexToRgba(hex, alpha) {
let a = alpha || 1,
hColor = hex.toLowerCase(),
hLen = hex.length,
rgbaColor = [];
hColor = Cesium.Color.fromCssColorString(hColor).toCssHexString().substring(0, 7)
const colorRegExp = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (hex && colorRegExp.test(hColor)) {
//the hex length may be 4 or 7,contained the symbol of #
if (hLen === 4) {
let hSixColor = '#';
for (let i = 1; i < hLen; i++) {
let sColor = hColor.slice(i, i + 1);
hSixColor += sColor.concat(sColor);
}
hColor = hSixColor;
}
for (let j = 1, len = hColor.length; j < len; j += 2) {
rgbaColor.push(parseInt('0X' + hColor.slice(j, j + 2), 16));
}
// return "rgba(" + rgbaColor.join(",") + ',' + a + ")";
return rgbaColor;
} else {
return;
}
}
function pickerInputChange(v) {
if (_this.colorPicker && _this.colorPicker.pickerInput) {
let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value)
RInput.value = rgbaColor[0]
GInput.value = rgbaColor[1]
BInput.value = rgbaColor[2]
}
}
}
}