From cf1f13f186cfedd1dc8705dcf71757e92a4363b9 Mon Sep 17 00:00:00 2001
From: Hayden <haydencheung@vip.qq.com>
Date: Thu, 14 Nov 2019 15:56:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=9C=86=E8=A7=92=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvasdrawer/canvasdrawer.js | 34 ++++++++++++++++++++-----
 pages/index/index.js                    |  3 ++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/canvasdrawer/canvasdrawer.js b/components/canvasdrawer/canvasdrawer.js
index 80149e3..ca85cbb 100644
--- a/components/canvasdrawer/canvasdrawer.js
+++ b/components/canvasdrawer/canvasdrawer.js
@@ -126,14 +126,34 @@ Component({
       })
     },
     drawImage (params) {
+      console.log(params)
       this.ctx.save()
       const { url, top = 0, left = 0, width = 0, height = 0, borderRadius = 0, deg = 0 } = params
-      // if (borderRadius) {
-      //   this.ctx.beginPath()
-      //   this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, 0, 2 * Math.PI)
-      //   this.ctx.clip()
-      //   this.ctx.drawImage(url, left, top, width, height)
-      // } else {
+      if (borderRadius) {
+        this.ctx.beginPath();
+
+        this.ctx.arc(left + borderRadius, top + borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
+        this.ctx.moveTo(left + borderRadius, top);
+        this.ctx.lineTo(left + width - borderRadius, top);
+        this.ctx.lineTo(left + width, top + borderRadius);
+
+        this.ctx.arc(left + width - borderRadius, top + borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
+        this.ctx.lineTo(left + width, top + height - borderRadius);
+        this.ctx.lineTo(left + width - borderRadius, top + height);
+
+        this.ctx.arc(left + width - borderRadius, top + height - borderRadius, borderRadius, 0, Math.PI * 0.5);
+        this.ctx.lineTo(left + borderRadius, top + height);
+        this.ctx.lineTo(left, top + height - borderRadius);
+
+        this.ctx.arc(left + borderRadius, top + height - borderRadius, borderRadius, Math.PI * 0.5, Math.PI);
+        this.ctx.lineTo(left, top + borderRadius);
+        this.ctx.lineTo(left + borderRadius, top);
+        this.ctx.clip()
+
+        this.ctx.drawImage(url, left, top, width, height)
+        this.ctx.closePath();
+
+      } else {
       if (deg !== 0) {
         this.ctx.translate(left + width/2, top + height/2)
         this.ctx.rotate(deg * Math.PI / 180)
@@ -141,7 +161,7 @@ Component({
       } else {
         this.ctx.drawImage(url, left, top, width, height)
       }
-      // }
+      }
       this.ctx.restore()
     },
     drawText (params) {
diff --git a/pages/index/index.js b/pages/index/index.js
index 5a7c22f..b34f263 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -68,7 +68,8 @@ Page({
             top: 136,
             left: 42.5,
             width: 290,
-            height: 186
+            height: 186,
+            borderRadius:10
           },
           {
             type: 'image',