forked from github/dataease
perf(视图-地图): 格式化渐变色代码
This commit is contained in:
fit2cloud-chenyw
parent
be18d50957
commit
c075010807
@ -2,66 +2,123 @@
|
||||
<div class="c__color-picker">
|
||||
|
||||
<el-popover
|
||||
v-model="visible"
|
||||
placement="bottom"
|
||||
title=""
|
||||
width="314"
|
||||
poper-class=""
|
||||
trigger="click"
|
||||
v-model="visible"
|
||||
@hide="whenHide"
|
||||
>
|
||||
|
||||
|
||||
<!-- 颜色面板 -->
|
||||
<div class="" v-show="visible">
|
||||
<div
|
||||
v-show="visible"
|
||||
class=""
|
||||
>
|
||||
<div class="gradient-div">
|
||||
|
||||
<div class="gradient-check" :class="activeIndex === 0 ? 'active' : ''" @click="checkGradient(0)">
|
||||
<div :style="{background: startColor}"></div>
|
||||
<div
|
||||
class="gradient-check"
|
||||
:class="activeIndex === 0 ? 'active' : ''"
|
||||
@click="checkGradient(0)"
|
||||
>
|
||||
<div :style="{background: startColor}" />
|
||||
</div>
|
||||
<span class="gradient-div-span" :style="{background: gradientColor}" />
|
||||
<div class="gradient-check" :class="activeIndex === 1 ? 'active' : ''" @click="checkGradient(1)">
|
||||
<div :style="{background: endColor}"></div>
|
||||
<span
|
||||
class="gradient-div-span"
|
||||
:style="{background: gradientColor}"
|
||||
/>
|
||||
<div
|
||||
class="gradient-check"
|
||||
:class="activeIndex === 1 ? 'active' : ''"
|
||||
@click="checkGradient(1)"
|
||||
>
|
||||
<div :style="{background: endColor}" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 画布 -->
|
||||
<div class="c__canvas">
|
||||
<canvas :id="canvasId" :width="width" :height="height" @click="onCanvasClick"
|
||||
@mousedown="onCanvasMousedown"></canvas>
|
||||
<canvas
|
||||
:id="canvasId"
|
||||
:width="width"
|
||||
:height="height"
|
||||
@click="onCanvasClick"
|
||||
@mousedown="onCanvasMousedown"
|
||||
/>
|
||||
<!-- 当前选中小块 -->
|
||||
<em class="c__cur" :id="curId" @mousedown="function(e){onCanvasMousedown(e,'cur')}"></em>
|
||||
<em
|
||||
:id="curId"
|
||||
class="c__cur"
|
||||
@mousedown="function(e){onCanvasMousedown(e,'cur')}"
|
||||
/>
|
||||
<!-- 左侧色条选中小块 -->
|
||||
<em class="c__bar" :id="barId" @mousedown="function(e){onCanvasMousedown(e,'bar')}"></em>
|
||||
<em
|
||||
:id="barId"
|
||||
class="c__bar"
|
||||
@mousedown="function(e){onCanvasMousedown(e,'bar')}"
|
||||
/>
|
||||
<!-- 透明度控制条 -->
|
||||
<div class="c__alpha-silder" v-if="showAlpha">
|
||||
<div class="c__alpha-silder-bar" :style="alphaBarStyle" @click="onAlphaClick" @mousedown="onAlphaMousedown"></div>
|
||||
<em class="c__alpha" :id="alphaId" :style="{left:alpha*100 + '%'}" @mousedown="onAlphaMousedown"></em>
|
||||
<div
|
||||
v-if="showAlpha"
|
||||
class="c__alpha-silder"
|
||||
>
|
||||
<div
|
||||
class="c__alpha-silder-bar"
|
||||
:style="alphaBarStyle"
|
||||
@click="onAlphaClick"
|
||||
@mousedown="onAlphaMousedown"
|
||||
/>
|
||||
<em
|
||||
:id="alphaId"
|
||||
class="c__alpha"
|
||||
:style="{left:alpha*100 + '%'}"
|
||||
@mousedown="onAlphaMousedown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部按钮栏 -->
|
||||
<div class="c__control">
|
||||
<input class="c__input" :value="innerValues[0]" />
|
||||
<input class="c__input" :value="innerValues[1]" />
|
||||
<input
|
||||
class="c__input"
|
||||
:value="innerValues[0]"
|
||||
>
|
||||
<input
|
||||
class="c__input"
|
||||
:value="innerValues[1]"
|
||||
>
|
||||
<div class="c__btns">
|
||||
<div class="c__btn-clear" @click="curColor=''">清空</div>
|
||||
<div class="c__btn-confirm" @click="confirm">确定</div>
|
||||
<div
|
||||
class="c__btn-clear"
|
||||
@click="curColor=''"
|
||||
>清空</div>
|
||||
<div
|
||||
class="c__btn-confirm"
|
||||
@click="confirm"
|
||||
>确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 颜色显示方块 -->
|
||||
<div class="c__block" slot="reference" :style="{background: formatBgColor(value)}" />
|
||||
<div
|
||||
slot="reference"
|
||||
class="c__block"
|
||||
:style="{background: formatBgColor(value)}"
|
||||
/>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DeColorPicker",
|
||||
name: 'DeColorPicker',
|
||||
props: {
|
||||
/* 绑定的色值 */
|
||||
value: {
|
||||
type: Array,
|
||||
default:['rgba(144,202,249,1)', 'rgba(1,87,155,1)']
|
||||
default: () => {
|
||||
return ['rgba(144,202,249,1)', 'rgba(1,87,155,1)']
|
||||
}
|
||||
},
|
||||
/* 是否禁用 */
|
||||
disabled: {
|
||||
@ -99,14 +156,14 @@
|
||||
activeIndex: 0,
|
||||
innerValues: {
|
||||
0: this.value[0],
|
||||
1: this.value[1],
|
||||
1: this.value[1]
|
||||
},
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alphaBarStyle() {
|
||||
return 'background: linear-gradient(to right, rgba(255, 69, 0, 0) 0%, ' + this.activeColor + ' 100%);';
|
||||
return 'background: linear-gradient(to right, rgba(255, 69, 0, 0) 0%, ' + this.activeColor + ' 100%);'
|
||||
},
|
||||
startColor() {
|
||||
return this.innerValues[0]
|
||||
@ -126,14 +183,13 @@
|
||||
handler(old, val) {
|
||||
if (old === val) return
|
||||
|
||||
this.curColor = this.innerValues[this.activeIndex];
|
||||
this.resetCurColor();
|
||||
this.curColor = this.innerValues[this.activeIndex]
|
||||
this.resetCurColor()
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
var _this = this;
|
||||
JSON.parse(JSON.stringify(this.value)).forEach((item, index) => {
|
||||
this.innerValues[index] = item
|
||||
})
|
||||
@ -143,29 +199,28 @@
|
||||
}
|
||||
document.body.addEventListener('click', this.handler)
|
||||
this.$nextTick(() => {
|
||||
this.curColor = this.innerValues[this.activeIndex];
|
||||
this.activeColor = this.innerValues[this.activeIndex];
|
||||
this.resetCurColor();
|
||||
this.init();
|
||||
this.curColor = this.innerValues[this.activeIndex]
|
||||
this.activeColor = this.innerValues[this.activeIndex]
|
||||
this.resetCurColor()
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.body.removeEventListener('click', this.handler);
|
||||
document.body.removeEventListener('click', this.handler)
|
||||
},
|
||||
methods: {
|
||||
setAlpha() {
|
||||
const curColor = this.innerValues[this.activeIndex]
|
||||
var reg = /^(rgb|RGB)/;
|
||||
let curColor = this.innerValues[this.activeIndex]
|
||||
var reg = /^(rgb|RGB)/
|
||||
if (!reg.test(curColor)) {
|
||||
curColor = this.hex2rgb(curColor.slice(0,7));
|
||||
curColor = this.hex2rgb(curColor.slice(0, 7))
|
||||
}
|
||||
var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
|
||||
var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
|
||||
if (colorArr.length === 4) {
|
||||
this.alpha = colorArr[3]
|
||||
return
|
||||
}
|
||||
this.alpha = 1
|
||||
|
||||
},
|
||||
formatBgColor(color) {
|
||||
return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
|
||||
@ -178,49 +233,48 @@
|
||||
this.innerValues[index] = item
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.curColor = this.innerValues[this.activeIndex];
|
||||
this.activeColor = this.innerValues[this.activeIndex];
|
||||
this.resetCurColor();
|
||||
this.init();
|
||||
this.curColor = this.innerValues[this.activeIndex]
|
||||
this.activeColor = this.innerValues[this.activeIndex]
|
||||
this.resetCurColor()
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
/* 初始化 */
|
||||
init() {
|
||||
this.canvas = document.getElementById(this.canvasId);
|
||||
this.canvas = document.getElementById(this.canvasId)
|
||||
this.$nextTick(() => {
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
this.makeColorBar();
|
||||
this.makeColorBox(this.innerValues[this.activeIndex]);
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
this.makeColorBar()
|
||||
this.makeColorBox(this.innerValues[this.activeIndex])
|
||||
})
|
||||
|
||||
},
|
||||
/* 绘制左侧面板颜色选择条 */
|
||||
makeColorBar() {
|
||||
var gradientBar = this.ctx.createLinearGradient(0, 0, 0, this.height);
|
||||
gradientBar.addColorStop(0, '#f00');
|
||||
gradientBar.addColorStop(1 / 6, '#f0f');
|
||||
gradientBar.addColorStop(2 / 6, '#00f');
|
||||
gradientBar.addColorStop(3 / 6, '#0ff');
|
||||
gradientBar.addColorStop(4 / 6, '#0f0');
|
||||
gradientBar.addColorStop(5 / 6, '#ff0');
|
||||
gradientBar.addColorStop(1, '#f00');
|
||||
var gradientBar = this.ctx.createLinearGradient(0, 0, 0, this.height)
|
||||
gradientBar.addColorStop(0, '#f00')
|
||||
gradientBar.addColorStop(1 / 6, '#f0f')
|
||||
gradientBar.addColorStop(2 / 6, '#00f')
|
||||
gradientBar.addColorStop(3 / 6, '#0ff')
|
||||
gradientBar.addColorStop(4 / 6, '#0f0')
|
||||
gradientBar.addColorStop(5 / 6, '#ff0')
|
||||
gradientBar.addColorStop(1, '#f00')
|
||||
|
||||
this.ctx.fillStyle = gradientBar;
|
||||
this.ctx.fillRect(0, 0, 20, this.height);
|
||||
this.ctx.fillStyle = gradientBar
|
||||
this.ctx.fillRect(0, 0, 20, this.height)
|
||||
},
|
||||
/* 绘制颜色选择区域 */
|
||||
makeColorBox(color) {
|
||||
var gradientBase = this.ctx.createLinearGradient(30, 0, this.width, 0);
|
||||
gradientBase.addColorStop(1, color);
|
||||
gradientBase.addColorStop(0, 'rgba(255,255,255,1)');
|
||||
this.ctx.fillStyle = gradientBase;
|
||||
this.ctx.fillRect(30, 0, this.width, this.height);
|
||||
var gradientBase = this.ctx.createLinearGradient(30, 0, this.width, 0)
|
||||
gradientBase.addColorStop(1, color)
|
||||
gradientBase.addColorStop(0, 'rgba(255,255,255,1)')
|
||||
this.ctx.fillStyle = gradientBase
|
||||
this.ctx.fillRect(30, 0, this.width, this.height)
|
||||
|
||||
var my_gradient1 = this.ctx.createLinearGradient(0, 0, 0, this.height);
|
||||
my_gradient1.addColorStop(0, 'rgba(0,0,0,0)');
|
||||
my_gradient1.addColorStop(1, 'rgba(0,0,0,1)');
|
||||
this.ctx.fillStyle = my_gradient1;
|
||||
this.ctx.fillRect(30, 0, this.width, this.height);
|
||||
var my_gradient1 = this.ctx.createLinearGradient(0, 0, 0, this.height)
|
||||
my_gradient1.addColorStop(0, 'rgba(0,0,0,0)')
|
||||
my_gradient1.addColorStop(1, 'rgba(0,0,0,1)')
|
||||
this.ctx.fillStyle = my_gradient1
|
||||
this.ctx.fillRect(30, 0, this.width, this.height)
|
||||
},
|
||||
/* canvas点击 */
|
||||
onCanvasClick(e) {
|
||||
@ -228,39 +282,39 @@
|
||||
x: e.offsetX || e.layerX,
|
||||
y: e.offsetY || e.layerY
|
||||
}
|
||||
var rgbaStr = '#000';
|
||||
var rgbaStr = '#000'
|
||||
if (ePos.x >= 0 && ePos.x < 20) {
|
||||
// in
|
||||
rgbaStr = this.getRgbaAtPoint(ePos, 'bar');
|
||||
var barBlock = document.getElementById(this.barId);
|
||||
barBlock.style.top = ePos.y + 'px';
|
||||
this.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')');
|
||||
rgbaStr = this.getRgbaAtPoint(ePos, 'bar')
|
||||
var barBlock = document.getElementById(this.barId)
|
||||
barBlock.style.top = ePos.y + 'px'
|
||||
this.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')')
|
||||
this.innerValues[this.activeIndex] = 'rgba(' + rgbaStr.slice(0, 3).join() + ',' + this.alpha + ')'
|
||||
|
||||
this.$emit('active-change', this.innerValues);
|
||||
this.$emit('active-change', this.innerValues)
|
||||
} else if (ePos.x >= 30) {
|
||||
rgbaStr = this.getRgbaAtPoint(ePos, 'box');
|
||||
var cur = document.getElementById(this.curId);
|
||||
cur.style.left = ePos.x + 'px';
|
||||
cur.style.top = ePos.y + 'px';
|
||||
rgbaStr = this.getRgbaAtPoint(ePos, 'box')
|
||||
var cur = document.getElementById(this.curId)
|
||||
cur.style.left = ePos.x + 'px'
|
||||
cur.style.top = ePos.y + 'px'
|
||||
} else {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.setCurColor(rgbaStr);
|
||||
this.setCurColor(rgbaStr)
|
||||
},
|
||||
/* canvas鼠标按下，绑定鼠标拖动函数 */
|
||||
onCanvasMousedown(ev, type) {
|
||||
var self = this;
|
||||
var self = this
|
||||
var ePos = {
|
||||
x: ev.layerX || ev.offsetX,
|
||||
y: ev.layerY || ev.offsetY
|
||||
}
|
||||
var offsetTop = parseInt(ev.target.offsetTop);
|
||||
var offsetLeft = parseInt(ev.target.offsetLeft);
|
||||
var offsetTop = parseInt(ev.target.offsetTop)
|
||||
var offsetLeft = parseInt(ev.target.offsetLeft)
|
||||
if (type === 'cur' || (ePos.x >= 30 && ePos.x < 30 + this.width && ePos.y >= 0 && ePos.y < this.height)) {
|
||||
var cur = document.getElementById(this.curId);
|
||||
var cur = document.getElementById(this.curId)
|
||||
document.onmouseup = function() {
|
||||
document.onmouseup = document.onmousemove = null;
|
||||
document.onmouseup = document.onmousemove = null
|
||||
}
|
||||
document.onmousemove = function(e) {
|
||||
try {
|
||||
@ -269,20 +323,21 @@
|
||||
y: e.clientY - ev.clientY + ev.offsetY + offsetTop
|
||||
}
|
||||
|
||||
pos.x = pos.x <= 30 ? 30 : pos.x && (pos.x > self.width - 1 ? self.width - 1 : pos.x);
|
||||
pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos.y);
|
||||
pos.x = pos.x <= 30 ? 30 : pos.x && (pos.x > self.width - 1 ? self.width - 1 : pos.x)
|
||||
pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos.y)
|
||||
|
||||
var rgbaStr = self.getRgbaAtPoint(pos, 'box');
|
||||
self.setCurColor(rgbaStr);
|
||||
cur.style.left = pos.x + 'px';
|
||||
cur.style.top = pos.y + 'px';
|
||||
var rgbaStr = self.getRgbaAtPoint(pos, 'box')
|
||||
self.setCurColor(rgbaStr)
|
||||
cur.style.left = pos.x + 'px'
|
||||
cur.style.top = pos.y + 'px'
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
} else if (ePos.x <= 20 && ePos.y <= this.height) {
|
||||
var bar = document.getElementById(this.barId);
|
||||
var bar = document.getElementById(this.barId)
|
||||
document.onmouseup = function() {
|
||||
document.onmouseup = document.onmousemove = null;
|
||||
document.onmouseup = document.onmousemove = null
|
||||
}
|
||||
document.onmousemove = function(e) {
|
||||
try {
|
||||
@ -292,40 +347,37 @@
|
||||
}
|
||||
|
||||
pos.y = pos.y <= 0 ? 0 : pos.y && (pos.y > self.height - 1 ? self.height - 1 : pos
|
||||
.y);
|
||||
.y)
|
||||
|
||||
var rgbaStr = self.getRgbaAtPoint(pos, 'box');
|
||||
bar.style.top = pos.y + 'px';
|
||||
self.activeColor = 'rgb(' + rgbaStr.slice(0, 3).join() + ')';
|
||||
self.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')');
|
||||
var rgbaStr = self.getRgbaAtPoint(pos, 'box')
|
||||
bar.style.top = pos.y + 'px'
|
||||
self.activeColor = 'rgb(' + rgbaStr.slice(0, 3).join() + ')'
|
||||
self.makeColorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')')
|
||||
self.innerValues[self.activeIndex] = self.activeColor
|
||||
self.$emit('active-change', self.innerValues);
|
||||
self.$emit('active-change', self.innerValues)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 透明度控制条点击 */
|
||||
onAlphaClick(e) {
|
||||
var x = e.offsetX || e.layerX;
|
||||
var bar = document.getElementById(this.alphaId);
|
||||
var parentNode = bar.parentNode;
|
||||
this.alpha = parseFloat(x/parentNode.clientWidth).toFixed(2);
|
||||
this.resetCurColor();
|
||||
var x = e.offsetX || e.layerX
|
||||
var bar = document.getElementById(this.alphaId)
|
||||
var parentNode = bar.parentNode
|
||||
this.alpha = parseFloat(x / parentNode.clientWidth).toFixed(2)
|
||||
this.resetCurColor()
|
||||
},
|
||||
/* 透明度控制 */
|
||||
onAlphaMousedown(ev) {
|
||||
var self = this;
|
||||
var ePos = {
|
||||
x: ev.layerX || ev.offsetX,
|
||||
y: ev.layerY || ev.offsetY
|
||||
}
|
||||
var offsetTop = parseInt(ev.target.offsetTop);
|
||||
var offsetLeft = parseInt(ev.target.offsetLeft);
|
||||
var bar = document.getElementById(this.alphaId);
|
||||
var parentNode = bar.parentNode;
|
||||
var self = this
|
||||
|
||||
var offsetLeft = parseInt(ev.target.offsetLeft)
|
||||
var bar = document.getElementById(this.alphaId)
|
||||
var parentNode = bar.parentNode
|
||||
document.onmouseup = function() {
|
||||
document.onmouseup = document.onmousemove = null;
|
||||
document.onmouseup = document.onmousemove = null
|
||||
}
|
||||
document.onmousemove = function(e) {
|
||||
try {
|
||||
@ -335,42 +387,43 @@
|
||||
}
|
||||
|
||||
pos.x = pos.x <= 0 ? 0 : pos.x && (pos.x > parentNode.clientWidth ? parentNode.clientWidth : pos
|
||||
.x);
|
||||
.x)
|
||||
|
||||
self.alpha = parseFloat(pos.x/parentNode.clientWidth).toFixed(2);
|
||||
self.resetCurColor();
|
||||
self.alpha = parseFloat(pos.x / parentNode.clientWidth).toFixed(2)
|
||||
self.resetCurColor()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 透明度变化重新计算当前颜色值 */
|
||||
resetCurColor() {
|
||||
var curColor = this.curColor;
|
||||
var alpha = this.alpha;
|
||||
var reg = /^(rgb|RGB)/;
|
||||
var curColor = this.curColor
|
||||
var alpha = this.alpha
|
||||
var reg = /^(rgb|RGB)/
|
||||
if (!reg.test(curColor)) {
|
||||
curColor = this.hex2rgb(curColor.slice(0,7));
|
||||
curColor = this.hex2rgb(curColor.slice(0, 7))
|
||||
}
|
||||
var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
|
||||
colorArr[3] = alpha;
|
||||
this.setCurColor(colorArr);
|
||||
var colorArr = curColor.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
|
||||
colorArr[3] = alpha
|
||||
this.setCurColor(colorArr)
|
||||
},
|
||||
/* 设置当前颜色值 */
|
||||
setCurColor(rgbaStr) {
|
||||
var txt = 'a';
|
||||
var txt = 'a'
|
||||
if (rgbaStr.length === 4 && parseFloat(rgbaStr[3]) === 1 || !this.showAlpha) {
|
||||
rgbaStr = rgbaStr.slice(0, 3);
|
||||
txt = '';
|
||||
rgbaStr = rgbaStr.slice(0, 3)
|
||||
txt = ''
|
||||
}
|
||||
if (this.colorFormat === 'hex') {
|
||||
this.curColor = this.rgb2hex('rgb' + txt + '(' + rgbaStr.join() + ')');
|
||||
this.curColor = this.rgb2hex('rgb' + txt + '(' + rgbaStr.join() + ')')
|
||||
} else if (this.colorFormat === 'rgb') {
|
||||
this.curColor = 'rgb' + txt + '(' + rgbaStr.join() + ')';
|
||||
this.curColor = 'rgb' + txt + '(' + rgbaStr.join() + ')'
|
||||
}
|
||||
this.innerValues[this.activeIndex] = this.curColor
|
||||
this.activeColor = this.innerValues[this.activeIndex];
|
||||
this.activeColor = this.innerValues[this.activeIndex]
|
||||
|
||||
this.sendChange();
|
||||
this.sendChange()
|
||||
},
|
||||
/* 确认按钮点击 */
|
||||
confirm() {
|
||||
@ -378,9 +431,9 @@
|
||||
Object.keys(this.innerValues).forEach(key => {
|
||||
values.push(this.innerValues[key])
|
||||
})
|
||||
this.$emit('input', values);
|
||||
this.$emit('input', values)
|
||||
this.visible = false
|
||||
this.sendChange();
|
||||
this.sendChange()
|
||||
},
|
||||
/* 触发change回调 */
|
||||
sendChange() {
|
||||
@ -388,23 +441,24 @@
|
||||
Object.keys(this.innerValues).forEach(key => {
|
||||
values.push(this.innerValues[key])
|
||||
})
|
||||
this.$emit('change', values);
|
||||
this.$emit('change', values)
|
||||
},
|
||||
/* 获取rgb */
|
||||
getRgbaAtPoint(pos, area) {
|
||||
if (area == 'bar') {
|
||||
var imgData = this.ctx.getImageData(0, 0, 20, this.height);
|
||||
let imgData = null
|
||||
if (area === 'bar') {
|
||||
imgData = this.ctx.getImageData(0, 0, 20, this.height)
|
||||
} else {
|
||||
var imgData = this.ctx.getImageData(0, 0, this.width, this.height);
|
||||
imgData = this.ctx.getImageData(0, 0, this.width, this.height)
|
||||
}
|
||||
var data = imgData.data;
|
||||
var dataIndex = (pos.y * imgData.width + pos.x) * 4;
|
||||
var data = imgData.data
|
||||
var dataIndex = (pos.y * imgData.width + pos.x) * 4
|
||||
/* 开始消除误差 */
|
||||
if (pos.x >= 30 && pos.y > this.height - 3) {
|
||||
return [0, 0, 0, this.alpha];
|
||||
return [0, 0, 0, this.alpha]
|
||||
}
|
||||
if (pos.x >= 30 && pos.y <= 1) {
|
||||
data[dataIndex] = 255;
|
||||
data[dataIndex] = 255
|
||||
}
|
||||
if (pos.x >= 30 && pos.x <= 31) {
|
||||
return [
|
||||
@ -428,54 +482,54 @@
|
||||
data[dataIndex + 1],
|
||||
data[dataIndex + 2],
|
||||
this.alpha
|
||||
];
|
||||
]
|
||||
},
|
||||
/* rgb/rgba色值转16进制 */
|
||||
rgb2hex(rgb) {
|
||||
var reg = /^(rgb|RGB)/;
|
||||
var a;
|
||||
var reg = /^(rgb|RGB)/
|
||||
var a
|
||||
if (reg.test(rgb)) {
|
||||
var colorArr = rgb.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, "").split(',');
|
||||
var alpha = (colorArr && colorArr[3] || "").trim()
|
||||
var hex = "#" + ((1 << 24) + (parseInt(colorArr[0]) << 16) + (parseInt(colorArr[1]) << 8) + parseInt(
|
||||
colorArr[2])).toString(16).slice(1);
|
||||
if (alpha != '' && alpha != '1') {
|
||||
a = ((alpha * 255) | 1 << 8).toString(16).slice(1);
|
||||
hex = hex + a;
|
||||
var colorArr = rgb.replace(/(?:rgba|rgb|RGBA|RGB|\(|\))*/g, '').split(',')
|
||||
var alpha = (colorArr && colorArr[3] || '').trim()
|
||||
var hex = '#' + ((1 << 24) + (parseInt(colorArr[0]) << 16) + (parseInt(colorArr[1]) << 8) + parseInt(
|
||||
colorArr[2])).toString(16).slice(1)
|
||||
if (alpha !== '' && alpha !== '1') {
|
||||
a = ((alpha * 255) | 1 << 8).toString(16).slice(1)
|
||||
hex = hex + a
|
||||
}
|
||||
return hex;
|
||||
return hex
|
||||
} else {
|
||||
return rgb
|
||||
}
|
||||
},
|
||||
/* 16进制色值转rgb */
|
||||
hex2rgb(hex) {
|
||||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
var color = hex.toLowerCase();
|
||||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
var color = hex.toLowerCase()
|
||||
if (reg.test(color)) {
|
||||
if (color.length === 4) {
|
||||
var colorNew = "#";
|
||||
var colorNew = '#'
|
||||
for (var i = 1; i < color.length; i += 1) {
|
||||
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
|
||||
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
|
||||
}
|
||||
color = colorNew;
|
||||
color = colorNew
|
||||
}
|
||||
var colorChange = [];
|
||||
for (var i = 1; i < color.length; i += 2) {
|
||||
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
|
||||
var colorChange = []
|
||||
for (let i = 1; i < color.length; i += 2) {
|
||||
colorChange.push(parseInt('0x' + color.slice(i, i + 2)))
|
||||
}
|
||||
return "rgb(" + colorChange.join(",") + ")";
|
||||
return 'rgb(' + colorChange.join(',') + ')'
|
||||
} else {
|
||||
return color;
|
||||
return color
|
||||
}
|
||||
},
|
||||
checkGradient(index) {
|
||||
this.activeIndex = index
|
||||
this.curColor = this.innerValues[this.activeIndex];
|
||||
this.activeColor = this.innerValues[this.activeIndex];
|
||||
this.curColor = this.innerValues[this.activeIndex]
|
||||
this.activeColor = this.innerValues[this.activeIndex]
|
||||
this.setAlpha()
|
||||
this.$nextTick(() => {
|
||||
this.resetCurColor();
|
||||
this.resetCurColor()
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="colorDto.value" class="color-div-base selected-div">
|
||||
<div
|
||||
v-if="colorDto.value"
|
||||
class="color-div-base selected-div"
|
||||
>
|
||||
<div style="float: left;display: flex;align-items: center;">
|
||||
<span v-for="(c,index) in colorDto.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c, true)}" />
|
||||
<span
|
||||
v-for="(c,index) in colorDto.colors"
|
||||
:key="index"
|
||||
class="color-span-base"
|
||||
:style="{background: formatBgColor(c, true)}"
|
||||
/>
|
||||
</div>
|
||||
<span style="margin-left: 4px;">
|
||||
</span>
|
||||
<span class="reset-span" @click="reset">
|
||||
<el-tooltip class="item" effect="dark" content="重置" placement="top">
|
||||
<span style="margin-left: 4px;" />
|
||||
<span
|
||||
class="reset-span"
|
||||
@click="reset"
|
||||
>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="重置"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-refresh" />
|
||||
</el-tooltip>
|
||||
</span>
|
||||
@ -17,28 +32,75 @@
|
||||
popper-class="gradient-popper"
|
||||
:width="popWidth"
|
||||
:append-to-body="true"
|
||||
@show="whenShow"
|
||||
trigger="click"
|
||||
@show="whenShow"
|
||||
>
|
||||
<div class="custom-switch-div">
|
||||
<el-switch
|
||||
v-model="enableCustom"
|
||||
active-text="自定义"
|
||||
inactive-text="">
|
||||
</el-switch>
|
||||
inactive-text=""
|
||||
/>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(pane, i) in tabPanes" :key="i" :label="pane.label" :name="pane.name">
|
||||
<div class="color-tab-content" :id="'color-tab-content-' + i" @click="handler">
|
||||
<div v-for="option in pane.datas" :key="option.value" class="el-select-dropdown__item color-div-base" :class="option.value === colorDto.value ? 'selected hover editor' : ''" @click="selectNode(option)">
|
||||
<div v-if="option.value !== colorDto.value || !enableCustom" style="float: left;display: flex;align-items: center;">
|
||||
<span v-for="(c,index) in option.colors" :key="index" class="color-span-base" :style="{background: formatBgColor(c)}" />
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(pane, i) in tabPanes"
|
||||
:key="i"
|
||||
:label="pane.label"
|
||||
:name="pane.name"
|
||||
>
|
||||
<div
|
||||
:id="'color-tab-content-' + i"
|
||||
class="color-tab-content"
|
||||
@click="handler"
|
||||
>
|
||||
<div
|
||||
v-for="option in pane.datas"
|
||||
:key="option.value"
|
||||
class="el-select-dropdown__item color-div-base"
|
||||
:class="option.value === colorDto.value ? 'selected hover editor' : ''"
|
||||
@click="selectNode(option)"
|
||||
>
|
||||
<div
|
||||
v-if="option.value !== colorDto.value || !enableCustom"
|
||||
style="float: left;display: flex;align-items: center;"
|
||||
>
|
||||
<span
|
||||
v-for="(c,index) in option.colors"
|
||||
:key="index"
|
||||
class="color-span-base"
|
||||
:style="{background: formatBgColor(c)}"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="option.value !== colorDto.value || !enableCustom" style="margin-left: 4px;">{{ option.name }}</span>
|
||||
<span
|
||||
v-if="option.value !== colorDto.value || !enableCustom"
|
||||
style="margin-left: 4px;"
|
||||
>{{ option.name }}</span>
|
||||
|
||||
<span v-else v-for="(co,index) in option.colors" :key="index" class="color-span-base is-editor" >
|
||||
<el-color-picker v-if="i === 0" v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
|
||||
<de-color-picker ref="de-color-picker" :id="option.value + index" :base-id="option.value + index" show-alpha color-format="rgb" v-else v-model="option.colors[index]" @change="switchColorItem(option.colors, index)"/>
|
||||
<span
|
||||
v-for="(co,index) in option.colors"
|
||||
v-else
|
||||
:key="index"
|
||||
class="color-span-base is-editor"
|
||||
>
|
||||
<el-color-picker
|
||||
v-if="i === 0"
|
||||
v-model="option.colors[index]"
|
||||
@change="switchColorItem(option.colors, index)"
|
||||
/>
|
||||
<de-color-picker
|
||||
v-else
|
||||
:id="option.value + index"
|
||||
ref="de-color-picker"
|
||||
v-model="option.colors[index]"
|
||||
:base-id="option.value + index"
|
||||
show-alpha
|
||||
color-format="rgb"
|
||||
@change="switchColorItem(option.colors, index)"
|
||||
/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
@ -130,9 +192,9 @@ export default{
|
||||
},
|
||||
scrollToSelected() {
|
||||
const index = this.activeName === 'simple' ? 0 : 1
|
||||
const parents = document.getElementById("color-tab-content-" + index)
|
||||
const parents = document.getElementById('color-tab-content-' + index)
|
||||
if (!parents) return
|
||||
const items = parents.getElementsByClassName("color-div-base selected")
|
||||
const items = parents.getElementsByClassName('color-div-base selected')
|
||||
if (items && items.length) {
|
||||
const top = items[0].offsetTop || 0
|
||||
parents.scrollTo(0, top)
|
||||
@ -170,14 +232,12 @@ export default{
|
||||
|
||||
const widget = this.$refs['de-color-picker']
|
||||
if (Array.isArray(widget)) {
|
||||
|
||||
widget.forEach(item => {
|
||||
(!id || id !== item.$el.id) && item.triggerHide && item.triggerHide()
|
||||
})
|
||||
return
|
||||
}
|
||||
(!id || id !== widget.$el.id) && widget.triggerHide && widget.triggerHide()
|
||||
|
||||
},
|
||||
handleClick() {
|
||||
this.enableCustom = false
|
||||
@ -187,7 +247,6 @@ export default{
|
||||
const widget = this.$refs['de-color-picker']
|
||||
if (!widget) return
|
||||
if (Array.isArray(widget)) {
|
||||
|
||||
widget.forEach(item => {
|
||||
item.triggerHide && item.triggerHide()
|
||||
})
|
||||
|
||||
@ -11,14 +11,13 @@ const linearCOlor = (start, end) => {
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: start },
|
||||
{offset: 1, color: end},
|
||||
{ offset: 1, color: end }
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
const fillGradientColor = (data, colors) => {
|
||||
if (!data || !data.length) return data
|
||||
const dataLen = data.length
|
||||
const colorLen = colors.length
|
||||
data.forEach((item, index) => {
|
||||
const colorIndex = index % colorLen
|
||||
@ -100,7 +99,6 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
|
||||
const valueArr = chart.data.series[0].data
|
||||
// visualMap
|
||||
if (!isGradient) {
|
||||
|
||||
if (valueArr && valueArr.length > 0) {
|
||||
const values = []
|
||||
valueArr.forEach(function(ele) {
|
||||
@ -124,7 +122,6 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
|
||||
chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
|
||||
}
|
||||
if (themeStyle) {
|
||||
|
||||
chart_option.visualMap.textStyle = { color: themeStyle }
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,21 @@
|
||||
size="mini"
|
||||
>
|
||||
<div>
|
||||
<el-form-item v-show="showProperty('value') && showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
|
||||
<gradient-color-selector :color-dto="colorForm" @color-change="gradientColorChange"/>
|
||||
<el-form-item
|
||||
v-show="showProperty('value') && showProperty('gradient-color')"
|
||||
:label="$t('chart.color_case')"
|
||||
class="form-item"
|
||||
>
|
||||
<gradient-color-selector
|
||||
:color-dto="colorForm"
|
||||
@color-change="gradientColorChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="showProperty('value') && !showProperty('gradient-color')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-form-item
|
||||
v-show="showProperty('value') && !showProperty('gradient-color')"
|
||||
:label="$t('chart.color_case')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="400"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user