From c63dc303ae95f066e58f1396a34b8002a0cafdf6 Mon Sep 17 00:00:00 2001 From: xpz2018 <107107461@qq.com> Date: Sat, 18 Sep 2021 10:40:51 +0800 Subject: [PATCH] no message --- components/circle/index.js | 199 ----------------------------------- components/circle/index.json | 3 - components/circle/index.wxml | 6 -- components/circle/index.wxss | 13 --- 4 files changed, 221 deletions(-) delete mode 100644 components/circle/index.js delete mode 100644 components/circle/index.json delete mode 100644 components/circle/index.wxml delete mode 100644 components/circle/index.wxss diff --git a/components/circle/index.js b/components/circle/index.js deleted file mode 100644 index af1a48f..0000000 --- a/components/circle/index.js +++ /dev/null @@ -1,199 +0,0 @@ -import baseComponent from '../helpers/baseComponent' -import classNames from '../helpers/classNames' - -const toAngle = (a) => a / 180 * Math.PI -const percent = (a) => toAngle(a / 100 * 360) -const easeInOutCubic = (a, b, c, d) => { - a /= d / 2 - if (a < 1) return c / 2 * a * a * a + b - a -= 2 - return c / 2 * (a * a * a + 2) + b -} - -baseComponent({ - properties: { - prefixCls: { - type: String, - value: 'wux-circle', - }, - percent: { - type: Number, - value: 0, - observer: 'redraw', - }, - strokeWidth: { - type: Number, - value: 10, - }, - size: { - type: Number, - value: 120, - observer: 'updateStyle', - }, - lineCap: { - type: String, - value: 'round', - }, - backgroundColor: { - type: String, - value: '#f3f3f3', - }, - color: { - type: String, - value: '#33cd5f', - }, - sAngle: { - type: Number, - value: 0, - observer(newVal) { - this.setData({ - beginAngle: toAngle(newVal), - }) - }, - }, - counterclockwise: { - type: Boolean, - value: false, - }, - speed: { - type: Number, - value: 2000, - }, - animate: { - type: Boolean, - value: true, - }, - background: { - type: Boolean, - value: true, - }, - }, - data: { - beginAngle: 0, - startAngle: 0, - endAngle: 0, - currentAngle: 0, - }, - computed: { - classes: ['prefixCls', function(prefixCls) { - const wrap = classNames(prefixCls) - const inner = `${prefixCls}__inner` - - return { - wrap, - inner, - } - }], - }, - methods: { - /** - * 更新样式 - */ - updateStyle(size = this.data.size) { - const style = `width: ${size}px; height: ${size}px;` - - this.setData({ - style, - }) - }, - /** - * 着帧绘制 canvas - */ - redraw(value = this.data.percent) { - const endAngle = percent(value) - const now = Date.now() - const decrease = this.data.currentAngle > endAngle - const startAngle = !decrease ? this.data.currentAngle : this.data.endAngle - - this.cancelNextCallback() - this.clearTimer() - - this.safeSetData({ startAngle, endAngle }, () => { - this.animate(now, now, decrease) - }) - }, - /** - * 绘制 canvas - */ - draw(line = true) { - const { lineCap, backgroundColor, color, size, strokeWidth, counterclockwise, background } = this.data - const position = size / 2 - const radius = position - strokeWidth / 2 - const p = 2 * Math.PI - const startAngle = counterclockwise ? p - this.data.beginAngle : this.data.beginAngle - const endAngle = counterclockwise ? p - (this.data.beginAngle + this.data.currentAngle) : this.data.beginAngle + this.data.currentAngle - - // 创建 canvas 绘图上下文 - this.ctx = this.ctx || wx.createCanvasContext('circle', this) - - // 清除画布 - this.ctx.clearRect(0, 0, size, size) - - // 绘制背景 - if (background) { - this.ctx.beginPath() - this.ctx.arc(position, position, radius, 0, 2 * Math.PI) - this.ctx.setLineWidth(strokeWidth) - this.ctx.setStrokeStyle(backgroundColor) - this.ctx.stroke() - } - - // 绘制进度 - if (line) { - this.ctx.beginPath() - this.ctx.arc(position, position, radius, startAngle, endAngle) - this.ctx.setLineWidth(strokeWidth) - this.ctx.setStrokeStyle(color) - this.ctx.setLineCap(lineCap) - this.ctx.stroke() - } - - // 绘制完成 - this.ctx.draw(false, () => { - this.triggerEvent('change', { value: this.data.currentAngle }) - }) - }, - /** - * 开始动画 - */ - animate(c, d, e) { - const now = Date.now() - const f = now - c < 1 ? 1 : now - c - const { animate, speed, startAngle, endAngle } = this.data - const isEnd = !e && 1000 * this.data.currentAngle <= Math.floor(1000 * endAngle) || e && 1000 * this.data.currentAngle >= Math.floor(1000 * endAngle) - - if (animate && c - d < 1.05 * speed && isEnd) { - const value = easeInOutCubic((c - d) / f, startAngle, endAngle - startAngle, speed / f) - const currentAngle = value < 0 ? 0 : value - - c = Date.now() - - this.safeSetData({ currentAngle }, () => { - this.draw(currentAngle !== 0) - this.timer = setTimeout(() => this.animate(c, d, e), 1000 / 60) - }) - } else { - this.safeSetData({ currentAngle: endAngle }, () => this.draw(endAngle !== 0)) - } - }, - /** - * 清除定时器 - */ - clearTimer() { - if (this.timer) { - clearTimeout(this.timer) - this.timer = null - } - }, - }, - attached() { - this.updateStyle() - if (this.data.percent === 0) { - this.draw(false) - } - }, - detached() { - this.ctx = null - this.clearTimer() - }, -}) diff --git a/components/circle/index.json b/components/circle/index.json deleted file mode 100644 index fba482a..0000000 --- a/components/circle/index.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "component": true -} \ No newline at end of file diff --git a/components/circle/index.wxml b/components/circle/index.wxml deleted file mode 100644 index 784fdb0..0000000 --- a/components/circle/index.wxml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/components/circle/index.wxss b/components/circle/index.wxss deleted file mode 100644 index 7b345c0..0000000 --- a/components/circle/index.wxss +++ /dev/null @@ -1,13 +0,0 @@ -.wux-circle { - display: inline-block; - position: relative -} -.wux-circle__inner { - width: 100%; - text-align: center; - position: absolute; - left: 0; - top: 50%; - transform: translate3d(0,-50%,0); - line-height: 1 -} \ No newline at end of file