@tuya-miniapp/smart-ui 2.3.6 → 2.3.7

package/dist/circle/index.js

@@ -58,20 +58,16 @@ SmartComponent({
             value: true,
         },
     },
-    watch: {
-        dpr() {
-            this.render(this.data.percent, this.data.canvasId);
-        },
-    },
     data: {
         canvasId: '',
         dpr: 1,
     },
-    created() { },
-    mounted() {
+    created() {
         this.initId();
         this.initRate();
-        // this.render(this.data.percent, this.data.canvasId);
+    },
+    mounted() {
+        this.render(this.data.percent, this.data.canvasId);
     },
     destroyed() {
         idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
@@ -94,20 +90,25 @@ SmartComponent({
             wx.getSystemInfo({
                 success: res => {
                     const dpr = res.pixelRatio; // 获取设备像素比
-                    const sizeVal = this.parseSize();
-                    const params = {
-                        width: +sizeVal,
-                        height: +sizeVal,
-                        lineWidth: this.data.trackWidth,
-                        trackColor: this.data.trackColor,
-                        fillColor: this.data.fillColor,
-                        fillColorStops: this.data.fillColorStops,
-                        maskColor: this.data.maskColor,
-                        dpr: this.data.dpr,
-                    };
-                    this.setData(Object.assign(Object.assign({}, params), { dpr: dpr }));
+                    this.setData({
+                        dpr: dpr,
+                    });
                 },
             });
+            const sizeVal = this.parseSize();
+            const params = {
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
+                lineWidth: this.data.trackWidth,
+                trackColor: this.data.trackColor,
+                fillColor: this.data.fillColor,
+                fillColorStops: this.data.fillColorStops,
+                maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
+            };
+            this.setData(params);
         },
         renderAll(canvas, ctx, progress, ops = {
             lineCap: 'round',
@@ -118,6 +119,7 @@ SmartComponent({
             const endAngle = 4 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -147,6 +149,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -161,6 +164,7 @@ SmartComponent({
             const endAngle = 2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -190,6 +194,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -215,6 +220,7 @@ SmartComponent({
             const endAngle = 2.2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -244,6 +250,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -252,11 +259,6 @@ SmartComponent({
         render(val, canvasId) {
             // @ts-ignore
             const context = ty.createCanvasContext(canvasId);
-            context.clearRect(0, 0, this.data.width, this.data.height); // 清除画布
-            context.scale(this.data.dpr, this.data.dpr);
-            this.data.width /= this.data.dpr;
-            this.data.height /= this.data.dpr;
-            this.data.lineWidth /= this.data.dpr;
             if (this.data.mode === 'basic') {
                 this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/dist/circle/index.wxml

@@ -2,8 +2,8 @@
   class="smart-progress-circle" 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ width * dpr }}"
-  height="{{ height * dpr }}"
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
   style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/dist/popup/index.wxs

@@ -2,7 +2,8 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
-  const transformStyle = "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)";
+  const transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
+
   return style([
     {
       'margin-bottom': data.bottomSafeHeight + 'px',

package/dist/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/lib/circle/index.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable guard-for-in */
 /* eslint-disable no-restricted-syntax */
@@ -71,20 +60,16 @@ var idListRef = {
             value: true,
         },
     },
-    watch: {
-        dpr: function () {
-            this.render(this.data.percent, this.data.canvasId);
-        },
-    },
     data: {
         canvasId: '',
         dpr: 1,
     },
-    created: function () { },
-    mounted: function () {
+    created: function () {
         this.initId();
         this.initRate();
-        // this.render(this.data.percent, this.data.canvasId);
+    },
+    mounted: function () {
+        this.render(this.data.percent, this.data.canvasId);
     },
     destroyed: function () {
         var _this = this;
@@ -109,20 +94,25 @@ var idListRef = {
             wx.getSystemInfo({
                 success: function (res) {
                     var dpr = res.pixelRatio; // 获取设备像素比
-                    var sizeVal = _this.parseSize();
-                    var params = {
-                        width: +sizeVal,
-                        height: +sizeVal,
-                        lineWidth: _this.data.trackWidth,
-                        trackColor: _this.data.trackColor,
-                        fillColor: _this.data.fillColor,
-                        fillColorStops: _this.data.fillColorStops,
-                        maskColor: _this.data.maskColor,
-                        dpr: _this.data.dpr,
-                    };
-                    _this.setData(__assign(__assign({}, params), { dpr: dpr }));
+                    _this.setData({
+                        dpr: dpr,
+                    });
                 },
             });
+            var sizeVal = this.parseSize();
+            var params = {
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
+                lineWidth: this.data.trackWidth,
+                trackColor: this.data.trackColor,
+                fillColor: this.data.fillColor,
+                fillColorStops: this.data.fillColorStops,
+                maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
+            };
+            this.setData(params);
         },
         renderAll: function (canvas, ctx, progress, ops) {
             if (ops === void 0) { ops = {
@@ -134,6 +124,7 @@ var idListRef = {
             var endAngle = 4 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -163,6 +154,7 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -178,6 +170,7 @@ var idListRef = {
             var endAngle = 2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -207,6 +200,7 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -233,6 +227,7 @@ var idListRef = {
             var endAngle = 2.2 * Math.PI; // 结束角度（360度）
             // 绘制环形进度条的函数
             function drawProgressBar(progress, color) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
                 // 绘制灰色背景
                 ctx.beginPath();
                 ctx.arc(canvas.width / 2, canvas.height / 2, radius, startAngle, endAngle);
@@ -262,6 +257,7 @@ var idListRef = {
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -270,11 +266,6 @@ var idListRef = {
         render: function (val, canvasId) {
             // @ts-ignore
             var context = ty.createCanvasContext(canvasId);
-            context.clearRect(0, 0, this.data.width, this.data.height); // 清除画布
-            context.scale(this.data.dpr, this.data.dpr);
-            this.data.width /= this.data.dpr;
-            this.data.height /= this.data.dpr;
-            this.data.lineWidth /= this.data.dpr;
             if (this.data.mode === 'basic') {
                 this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/lib/circle/index.wxml

@@ -2,8 +2,8 @@
   class="smart-progress-circle" 
   type="2d" 
   wx:if="{{canvasId}}" 
-  width="{{ width * dpr }}"
-  height="{{ height * dpr }}"
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
   style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/lib/popup/index.wxs

@@ -2,7 +2,8 @@
 var style = require('../wxs/style.wxs');
 
 function popupStyle(data) {
-  const transformStyle = "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)";
+  const transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
+
   return style([
     {
       'margin-bottom': data.bottomSafeHeight + 'px',

package/lib/popup/popup.wxml

@@ -3,7 +3,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
-  style="{{ computed.popupStyle({ status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",