blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(circle): can not set value dynamic (#3264)

Browse Source 
fix #3239
This commit is contained in:
rex 2020-06-09 20:59:39 +08:00 committed by GitHub
parent 67dfb120c3
commit e16d611f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/circle/index.ts
View File

@ -41,7 +41,11 @@ VantComponent({
color: {
type: [String, Object],
value: BLUE,
observer: 'setHoverColor',
observer() {
this.setHoverColor().then(() => {
this.drawCircle(this.currentValue);
});
},
},
type: {
type: String,
@ -63,7 +67,7 @@ VantComponent({
methods: {
getContext() {
const { type } = this.data;
const { type, size } = this.data;
if (type === '') {
const ctx = wx.createCanvasContext('van-circle', this);
@ -76,14 +80,17 @@ VantComponent({
wx.createSelectorQuery()
.in(this)
.select('#van-circle')
.fields({ node: true, size: true })
.node()
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext(type);
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);
if (!this.inited) {
this.inited = true;
canvas.width = size * dpr;
canvas.height = size * dpr;
ctx.scale(dpr, dpr);
}
resolve(adaptor(ctx));
});
@ -92,24 +99,25 @@ VantComponent({
setHoverColor() {
const { color, size } = this.data;
let hoverColor = color;
this.getContext().then((context) => {
if (isObj(color)) {
if (isObj(color)) {
return this.getContext().then((context) => {
const LinearColor = context.createLinearGradient(size, 0, 0, 0);
Object.keys(color)
.sort((a, b) => parseFloat(a) - parseFloat(b))
.map((key) =>
LinearColor.addColorStop(parseFloat(key) / 100, color[key])
);
hoverColor = LinearColor;
}
this.hoverColor = LinearColor;
});
}
this.setData({ hoverColor });
});
this.hoverColor = color;
return Promise.resolve();
},
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
const { strokeWidth, lineCap, clockwise, size, type } = this.data;
const { strokeWidth, lineCap, clockwise, size } = this.data;
const position = size / 2;
const radius = position - strokeWidth / 2;
@ -133,14 +141,14 @@ VantComponent({
},
renderHoverCircle(context, formatValue) {
const { clockwise, hoverColor } = this.data;
const { clockwise } = this.data;
// 结束角度
const progress = PERIMETER * (formatValue / 100);
const endAngle = clockwise
? BEGIN_ANGLE + progress
: 3 * Math.PI - (BEGIN_ANGLE + progress);
this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
},
drawCircle(currentValue) {
@ -192,10 +200,12 @@ VantComponent({
},
},
created() {
const { value } = this.data;
this.currentValue = value;
this.drawCircle(value);
mounted() {
this.currentValue = this.data.value;
this.setHoverColor().then(() => {
this.drawCircle(this.currentValue);
});
},
destroyed() {