faet: circle render to image

packages/circle/README.md

@@ -86,6 +86,13 @@ Page({
 <van-circle value="{{ value }}" size="120" text="大小定制" />
 ```
 
+### Canvas 转为 Image 方式呈现
+通过`render-to-image`属性设置生成图片。
+
+```html
+<van-circle value="{{ value }}" render-to-image size="120" text="这是张图片" />
+```
+
 ## API
 
 ### Props
@@ -102,6 +109,8 @@ Page({
 | text | 文字 | _string_ | - |
 | stroke-width | 进度条宽度 | _number_ | `4` |
 | clockwise | 是否顺时针增加 | _boolean_ | `true` |
+| reander-to-image | 渲染成图片 | _boolean_ | `false` |
+
 
 ### Slots
 

packages/circle/demo/index.wxml

@@ -10,5 +10,9 @@
   <van-circle value="{{ value }}" size="120" text="大小定制" />
 </demo-block>
 
+<demo-block title="canvas转为Image方式呈现">
+  <van-circle value="{{ value }}" render-to-image size="120" text="这是张图片" />
+</demo-block>
+
 <van-button type="primary" size="small" data-step="10" bind:tap="run">增加</van-button>
 <van-button type="danger" size="small" data-step="-10" bind:tap="run">减少</van-button>

packages/circle/index.ts

@@ -61,10 +61,15 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    renderToImage:{
+      type: Boolean,
+      value: false,
+    }
   },
 
   data: {
     hoverColor: BLUE,
+    circleImg:''
   },
 
   methods: {
@@ -176,6 +181,29 @@ VantComponent({
       });
     },
 
+    generateCircleImage():Promise<string>{
+      const {size}=this.data
+      const dpr = getSystemInfoSync().pixelRatio;
+
+      return new Promise((resolve,reject) => {
+        setTimeout(()=>{
+            wx.canvasToTempFilePath({
+              width:size,
+              height:size,
+              destWidth:size* dpr,
+              destHeight:size* dpr,
+                canvasId: 'van-circle',
+                success:(res)=> {
+                resolve(res.tempFilePath)
+                },
+                fail(err){
+                  reject(err)
+                }
+            },this)
+        },200)
+    })
+    },
+
     reRender() {
       // tofector 动画暂时没有想到好的解决方案
       const { value, speed } = this.data;
@@ -220,7 +248,12 @@ VantComponent({
 
     this.setHoverColor().then(() => {
       this.drawCircle(this.currentValue);
-    });
+    }).then(async ()=>{
+      if(this.data.renderToImage){
+        const circleImg=await this.generateCircleImage()
+        this.setData({circleImg})
+      }
+    })
   },
 
   destroyed() {