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