This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化progress组件

old
宇天 2021-03-09 13:54:00 +08:00
parent 01ae866456
commit 3dfad42dcf
2 changed files with 131 additions and 148 deletions

View File

@ -1,142 +0,0 @@
/**
*
* @author yutent<yutent.io@gmail.com>
* @date 2021/03/08 14:25:13
*/
export function drawLine(el, size, opt) {
var ctx = el.getContext('2d')
var { width, height } = size
var {
colors,
value,
'show-text': showText,
'default-color': bg,
'line-size': line,
'font-size': font
} = opt
var color = colors[0]
var half
if (colors.length > 1) {
let idx = Math.floor(value / (100 / colors.length))
if (idx === colors.length) {
idx--
}
color = colors[idx]
}
//
line = line || 10
font = font || 10
half = line / 2
el.width = width
el.height = height
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = bg
ctx.lineWidth = line
ctx.lineCap = 'round'
ctx.beginPath()
ctx.moveTo(half, half)
ctx.lineTo(width - half, half)
ctx.stroke()
ctx.closePath()
if (value > 0) {
ctx.strokeStyle = color
ctx.beginPath()
ctx.moveTo(half, half)
ctx.lineTo(((width - half) * value) / 100, half)
ctx.stroke()
ctx.closePath()
if (showText) {
ctx.fillStyle = '#fff'
ctx.font = `bold ${font}px Arial`
ctx.textBaseline = 'middle'
ctx.textAlign = 'right'
ctx.fillText(
(value < 100 ? value.toFixed(1) : 100) + '%',
((width - half) * value) / 100,
half
)
}
}
}
export function drawCircle(el, size, opt, start = -90, end = 270) {
var ctx = el.getContext('2d')
var { width } = size
var {
colors,
value,
'show-text': showText,
'default-color': bg,
'line-size': line,
'font-size': font
} = opt
var color = colors[0]
var half = width / 2
if (width === 0) {
return
}
if (colors.length > 1) {
let idx = Math.floor(value / (100 / colors.length))
if (idx === colors.length) {
idx--
}
color = colors[idx]
}
//
line = line || 10
font = font || 32
el.width = width
el.height = width
ctx.clearRect(0, 0, width, width)
ctx.strokeStyle = bg
ctx.lineWidth = line
ctx.lineCap = 'round'
ctx.beginPath()
ctx.arc(
half,
half,
half - line / 2,
(Math.PI / 180) * start,
(Math.PI / 180) * end,
false
) //整圆
ctx.stroke()
ctx.closePath()
if (value > 0) {
ctx.strokeStyle = color
ctx.beginPath()
ctx.arc(
half,
half,
half - line / 2,
(Math.PI / 180) * start,
(Math.PI / 180) * (((end - start) * value) / 100 + start),
false
) //整圆
ctx.stroke()
ctx.closePath()
}
if (showText) {
ctx.fillStyle = color
ctx.font = `${font}px Arial`
ctx.textBaseline = 'middle'
ctx.textAlign = 'center'
ctx.fillText((value < 100 ? value.toFixed(1) : 100) + '%', half, half)
}
}

View File

@ -22,7 +22,136 @@
</style>
<script>
import { drawLine, drawCircle } from './canvas'
function getColor(opt) {
var { colors, value } = opt
var idx = 0
if (colors.length > 1) {
idx = Math.floor(value / (100 / colors.length))
if (idx === colors.length) {
idx--
}
}
return colors[idx]
}
function drawLine(el, size, opt) {
var ctx = el.getContext('2d')
var { width, height } = size
var {
value,
'show-text': showText,
'default-color': bg,
'line-size': line,
'font-size': font
} = opt
var color = getColor(opt)
var half
//
line = line || 10
font = font || 10
half = line / 2
el.width = width
el.height = height
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = bg
ctx.lineWidth = line
ctx.lineCap = 'round'
ctx.beginPath()
ctx.moveTo(half, half)
ctx.lineTo(width - half, half)
ctx.stroke()
ctx.closePath()
if (value > 0) {
ctx.strokeStyle = color
ctx.beginPath()
ctx.moveTo(half, half)
ctx.lineTo(((width - half) * value) / 100, half)
ctx.stroke()
ctx.closePath()
if (showText) {
ctx.fillStyle = '#fff'
ctx.font = `bold ${font}px Arial`
ctx.textBaseline = 'middle'
ctx.textAlign = 'right'
ctx.fillText(
(value < 100 ? value.toFixed(1) : 100) + '%',
((width - half) * value) / 100,
half
)
}
}
}
function drawCircle(el, size, opt, start = -90, end = 270) {
var ctx = el.getContext('2d')
var { width } = size
var {
value,
'show-text': showText,
'default-color': bg,
'line-size': line,
'font-size': font
} = opt
var color = getColor(opt)
var half = width / 2
if (width === 0) {
return
}
//
line = line || 10
font = font || 32
el.width = width
el.height = width
ctx.clearRect(0, 0, width, width)
ctx.strokeStyle = bg
ctx.lineWidth = line
ctx.lineCap = 'round'
ctx.beginPath()
ctx.arc(
half,
half,
half - line / 2,
(Math.PI / 180) * start,
(Math.PI / 180) * end,
false
) //整圆
ctx.stroke()
ctx.closePath()
if (value > 0) {
ctx.strokeStyle = color
ctx.beginPath()
ctx.arc(
half,
half,
half - line / 2,
(Math.PI / 180) * start,
(Math.PI / 180) * (((end - start) * value) / 100 + start),
false
) //整圆
ctx.stroke()
ctx.closePath()
}
if (showText) {
ctx.fillStyle = color
ctx.font = `${font}px Arial`
ctx.textBaseline = 'middle'
ctx.textAlign = 'center'
ctx.fillText((value < 100 ? value.toFixed(1) : 100) + '%', half, half)
}
}
export default class Progress {
props = {
@ -44,10 +173,6 @@ export default class Progress {
/* render */
this.__CANVAS__ = this.root.children[1]
// // 圆形进度条默认值为32
// if (this.props.type === 'circle' || this.props.type === 'dashboard') {
// this.props['font-size'] = 32
// }
}
get value() {
@ -93,7 +218,7 @@ export default class Progress {
switch (name) {
case 'line-size':
case 'font-size':
this.props[name] = val || 10
this.props[name] = val
break
case 'default-color':