提交

甲情_甲意/miniprogram/node_modules/antd-mini/es/Progress/index.js

@@ -0,0 +1,155 @@
+import { __awaiter, __generator } from "tslib";
+import deepEqual from 'fast-deep-equal';
+import { Component, getValueFromProps } from '../_util/simply';
+import { ProgressBarDefaultProps } from './props';
+import { createCanvasContext } from '../_util/jsapi/create-canvas-context';
+import { getSystemInfo } from '../_util/jsapi/get-system-info';
+var animationFrameDuration = 16;
+Component(ProgressBarDefaultProps, {
+    requestAnimationFrame: function (fn, duration) {
+        if (duration === void 0) { duration = animationFrameDuration; }
+        setTimeout(fn, duration);
+    },
+    getDrawColor: function () {
+        var _a = getValueFromProps(this, [
+            'strokeColor',
+            'trailColor',
+        ]), strokeColor = _a[0], trailColor = _a[1];
+        var drawColor = {
+            strokeColor: strokeColor || '#1677ff',
+            trailColor: trailColor || '#F5F5F5',
+        };
+        return drawColor;
+    },
+    getCanvasContext: function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var systemInfo, pixelRatio, width, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (this.ctx)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, getSystemInfo()];
+                    case 1:
+                        systemInfo = _b.sent();
+                        pixelRatio = systemInfo.pixelRatio;
+                        width = getValueFromProps(this, 'width');
+                        _a = this;
+                        return [4 /*yield*/, createCanvasContext([this.canvasId, this])];
+                    case 2:
+                        _a.ctx = _b.sent();
+                        this.ctx.imageSmoothingEnabled = true;
+                        this.ctx.imageSmoothingQuality = 'high';
+                        this.setData({
+                            canvasWidth: width * pixelRatio,
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+    clearCanvas: function () {
+        var ctx = this.ctx;
+        var canvasWidth = this.data.canvasWidth;
+        ctx.clearRect(0, 0, canvasWidth, canvasWidth);
+    },
+    updateCanvasProgress: function (prev) {
+        return __awaiter(this, void 0, void 0, function () {
+            var drawColor, curRad, targetRad, direction, draw;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        drawColor = this.getDrawColor();
+                        return [4 /*yield*/, this.getCanvasContext()];
+                    case 1:
+                        _a.sent();
+                        curRad = Math.floor((prev / 100) * 360);
+                        targetRad = Math.floor((this.data.curProgress / 100) * 360);
+                        direction = curRad < targetRad ? 1 : -1;
+                        draw = function () {
+                            if (curRad == targetRad)
+                                return;
+                            var _a = getValueFromProps(_this, [
+                                'speed',
+                                'animation',
+                            ]), speed = _a[0], animation = _a[1];
+                            curRad = direction * speed + curRad;
+                            if (direction == -1) {
+                                curRad = Math.max(curRad, targetRad);
+                            }
+                            else {
+                                curRad = Math.min(curRad, targetRad);
+                            }
+                            _this.clearCanvas();
+                            _this.drawOrbit(drawColor.trailColor);
+                            _this.drawProgress(drawColor.strokeColor, curRad);
+                            _this.ctx.draw(true);
+                            _this.requestAnimationFrame(draw, animation ? animationFrameDuration : 0);
+                        };
+                        draw();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    },
+    drawProgress: function (color, rad) {
+        var ctx = this.ctx;
+        var canvasWidth = this.data.canvasWidth;
+        var strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = strokeWidth;
+        ctx.setLineCap('round');
+        ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - strokeWidth, -Math.PI / 2, -Math.PI / 2 + (rad / 360) * 2 * Math.PI, false);
+        ctx.stroke();
+    },
+    drawOrbit: function (color) {
+        var ctx = this.ctx;
+        var canvasWidth = this.data.canvasWidth;
+        var strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = strokeWidth;
+        ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - strokeWidth, 0, Math.PI * 2, false);
+        ctx.stroke();
+    },
+    calProgress: function () {
+        var _a = getValueFromProps(this, ['percent', 'type']), p = _a[0], type = _a[1];
+        var percent = +p;
+        if (isNaN(percent)) {
+            return this.setData({ curProgress: 0 });
+        }
+        var prevProgress = this.data.curProgress;
+        if (percent === prevProgress) {
+            return;
+        }
+        this.setData({
+            curProgress: percent > 100 ? 100 : percent < 0 ? 0 : percent,
+        });
+        if (type === 'circle') {
+            this.setCanvasId();
+            this.updateCanvasProgress(prevProgress);
+        }
+    },
+    setCanvasId: function () {
+        this.canvasId = this.$id
+            ? "ant-progress-canvas-".concat(this.$id)
+            : "ant-progress-canvas";
+    },
+}, {
+    curProgress: 0,
+    canvasWidth: 100,
+}, undefined, {
+    ctx: null,
+    drawColor: null,
+    canvas: null,
+    didMount: function () {
+        this.calProgress();
+    },
+    didUpdate: function (prevProps) {
+        if (deepEqual(this.props, prevProps))
+            return;
+        this.calProgress();
+    },
+});