父组件调用：
this
.$
invoke(
'roundProgress',
'drowProgress',
'runCanvas',
60,
60,
90,
10
)
<template
>
<view class
="progress">
<view class
="big-circle"></view
>
<view class
="small-circle"></view
>
<canvas width
="60" height
="60" canvas
-id
="runCanvas" id
="runCanvas" class
="canvas"></canvas
>
<view class
="info">
<view class
="count">{{count
}}</view
>
<view class
="text">库存
</view
>
</view
>
</view
>
</template
>
<script
>
import wepy from
'wepy'
export
default class roundProgress extends wepy
.component
{
data
= {
percentage
: '',
animTime
: '',
timer
: null
}
props
= {
count
: {
type
: Number
}
}
methods
= {
drowProgress(id
, w
, h
, c
, text
) {
this
.draw(id
, w
, h
, c
, text
)
}
}
computed
= {}
onLoad() {}
draw(id
, w
, h
, c
, text
) {
console
.log('id, w, h, c, text',id
, w
, h
, c
, text
);
const ctx
= wx
.createCanvasContext(id
)
const num
= ((2 * Math
.PI
) / 100) * c
- 0.5 * Math
.PI
const roundWidth
= '3'
const circleWidth
= w
/ 2 - Number(roundWidth
) * 0.5
let rad
= (num
- -0.5 * Math
.PI
) / 100
let start
= -0.5 * Math
.PI
let count
= 1
let end
= start
+ rad
* count
this
.timer
= setInterval(() => {
if (end
>= num
) {
clearInterval(this
.timer
)
}
count
= count
+ 1
start
= -0.5 * Math
.PI
end
= start
+ rad
* count
ctx
.arc(w
/ 2, h
/ 2, circleWidth
, start
, end
)
ctx
.setLineWidth(roundWidth
)
ctx
.strokeStyle
= '#FFA200'
ctx
.stroke()
ctx
.beginPath()
ctx
.draw()
}, 10)
}
}
</script
>
<style lang
="less" scoped
>
.progress
{
position
: relative
;
height
: 70px
;
.big
-circle
{
position
: absolute
;
top
: 0;
left
: 0;
right
: 0;
bottom
: 0;
width
: 60px
;
height
: 60px
;
margin
: auto;
border
-radius
: 50%;
background
: #eee
;
z
-index
: 1;
}
.small
-circle
{
position
: absolute
;
top
: 0;
left
: 0;
right
: 0;
bottom
: 0;
width
: 54px
;
height
: 54px
;
margin
: auto;
border
-radius
: 50%;
background
: #fff
;
z
-index
: 2;
}
.canvas
{
position
: absolute
;
top
: 0;
left
: 0;
right
: 0;
bottom
: 0;
width
: 60px
;
height
: 60px
;
margin
: auto;
z
-index
: 3;
}
.info
{
position
: absolute
;
top
: 50%;
left
: 50%;
z
-index
: 4;
transform
: translate(-50%,-50%);
text
-align
: center
;
.count
{
font
-size
: 24rpx
;
font
-family
: PingFang SC
;
font
-weight
: 500;
color
: rgba(0, 0, 0, 1);
padding
-bottom
: 7rpx
;
}
.text
{
font
-size
: 22rpx
;
font
-family
: PingFang SC
;
font
-weight
: 500;
color
: rgba(153, 153, 153, 1);
}
}
}
</style
>
