ant-mini-scratch-card - npm Package Compare versions

Comparing version 1.0.3 to 1.0.5

es/.entry/appConfig.json

 {
+  "pages": [
+    "scratch/demo/index"
+  ],
   "launchParams": {
     "scratch/demo/index": {
-      "defaultTitle": "刮刮乐玩法",
+      "defaultTitle": "刮刮卡玩法",
       "enableWK": "YES",
@@ -6,0 +9,0 @@ "enableDSL": true,

es/scratch/index.js

 Component({
   data: {
+    pr: 1,
     scraping: true, // 正在刮奖
@@ -7,4 +8,5 @@ animationClass: ''
   props: {
-    width: 300, // canvas 宽度
-    height: 150, // canvas 高度
+    id: 'scratch-canvas',
+    width: 600, // 容器宽度 rpx
+    height: 300, // 容器宽度 rpx
     tipText: '刮刮我，有惊喜', // 提示文字
@@ -21,8 +23,28 @@ tipColor: '#aaa', // 提示文字颜色
   didMount: function didMount() {
-    this.ctx = my.createCanvasContext('scratch-canvas');
-    this.draw(); // 刮刮卡容器初始化;
-    this.area = this.props.width * this.props.height; // canvas 面积
-    this.clearPercent = 0; // 被清除像素的所有选区占 canvas 面积的百分比
+    var _this = this;
+
+    // var toast = function(title) {
+    //   my.showToast({
+    //     type: 'success',
+    //     content: title,
+    //     duration: 1000,
+    //   });
+    // }
+    my.getSystemInfo({
+      success: function success(res) {
+        // 根据rpx 宽高比计算出实际 px 宽高比
+        var pr = res.screenWidth / 750;
+        _this.setData({
+          pr: pr
+        });
+        // toast(`${res.pixelRatio}, screenWidth: ${res.screenWidth}, pr:${pr}`);
+        _this.ctx = my.createCanvasContext('scratch-canvas');
+        _this.draw(); // 刮刮卡容器初始化;
+        _this.area = pr * _this.props.width * pr * _this.props.height; // canvas 面积
+        _this.clearPercent = 0; // 被清除像素的所有选区占 canvas 面积的百分比
+      }
+    });
   },
 
+
   methods: {
@@ -52,7 +74,8 @@ onTouchStart: function onTouchStart(e) {
       var props = this.props;
+      var pr = this.data.pr;
       ctx.fillStyle = props.coverColor;
-      ctx.fillRect(0, 0, props.width, props.height);
+      ctx.fillRect(0, 0, props.width * pr, props.height * pr);
       // 绘制logo背景图
       if (props.ctxLogoUrl) {
-        ctx.drawImage(props.ctxLogoUrl, 0, 0, props.width, props.height);
+        ctx.drawImage(props.ctxLogoUrl, 0, 0, props.width * pr, props.height * pr);
       }
@@ -67,3 +90,3 @@ // 绘制提示文字
       ctx.textBaseline = 'middle';
-      ctx.fillText(props.tipText, props.width / 2, props.height / 2);
+      ctx.fillText(props.tipText, props.width * pr / 2, props.height * pr / 2);
       ctx.strokeStyle = 'white';
@@ -83,2 +106,3 @@ ctx.lineJoin = 'round';
       */
+      var pr = this.data.pr;
       var ctx = this.ctx;
@@ -111,3 +135,3 @@ var props = this.props;
       ctx.clip();
-      ctx.clearRect(0, 0, props.width, props.height);
+      ctx.clearRect(0, 0, props.width * pr, props.height * pr);
       ctx.restore();
@@ -124,3 +148,3 @@
       ctx.clip();
-      ctx.clearRect(0, 0, props.width, props.height);
+      ctx.clearRect(0, 0, props.width * pr, props.height * pr);
       ctx.restore();
@@ -127,0 +151,0 @@

package.json

 {
   "name": "ant-mini-scratch-card",
-  "version": "1.0.3",
-  "author": {
-    "name": "MidaAiZ",
-    "email": "[e-mail]"
-  },
+  "version": "1.0.5",
   "description": "支付宝小程序刮刮卡组件",
@@ -9,0 +5,0 @@ "files": [

README.md

@@ -7,3 +7,3 @@ ## 小程序刮刮卡组件
 ```
-npm i -s ant-mini-scratch-card
+ayarn add @alipay/ant-mini-scratchCard
 ```
@@ -17,3 +17,3 @@ ### 使用示例
   "usingComponents": {
-    "scratch": "ant-mini-scratch-card/es/scratch/index"
+    "scratch": "@alipay/ant-mini-scratchCard/es/scratch/index"
   }
@@ -78,8 +78,9 @@ }
 ---|---|---|---
-width         |Number|300|刮刮卡宽度，默认单位`px`
-height        |Number|150|刮刮卡高度，默认单位`px`
+id         |String|300| 组件标识，页面唯一
+width         |Number|600|刮刮卡宽度，单位`rpx`
+height        |Number|300|刮刮卡高度，单位`rpx`
 tipText       |String|刮刮我，有惊喜|刮奖区域提示文字
 tipColor      |String|#aaa|提示文字的颜色
-tipSize       |Number|20|提示文字的字号，默认单位`px`
-lineWidth     |Number|25|擦除线宽度，默认单位`px`
+tipSize       |Number|20|提示文字的字号，单位`px`
+lineWidth     |Number|25|擦除线宽度，单位`px`
 activePercent |Number|0.4|当被擦除比例达到该值时刮奖结束，取值范围`0-1`
@@ -92,7 +93,7 @@ autoFadeOut   |Boolean|true|当值为`true`且被擦除比例达到`activePercent`选项值时刮奖图层自动消失
 
+> 由于小程序当前接口限制，暂不支持 `rpx`、`rem`等像素单位，目前仅支持 `px`
 
 ## 开发
 
-### 文档
-
++ 文档
 [https://docs.alipay.com/mini/ide/overview](https://docs.alipay.com/mini/ide/overview)

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16485

increased by7.74%

Number of package files

10

increased by11.11%

Lines of code

222

increased by24.72%

Number of lines in readme file

96

increased by1.05%

Worsened metrics

Number of low maintenance alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes