From d657e7caee48fac7096f32219ae32d34ae53442c Mon Sep 17 00:00:00 2001
From: SunnyQjm <qjm253@pku.edu.cn>
Date: Tue, 18 Feb 2020 19:32:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8FCanvasContext=E8=8B=A5=E5=B9=B2?=
 =?UTF-8?q?=E4=B8=AA=E6=8E=A5=E5=8F=A3=E5=BA=9F=E5=BC=83=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=88=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
 =?UTF-8?q?=E7=AB=AF=E8=87=AA=E5=8A=A8=E6=A0=B9=E6=8D=AEsdk=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E4=BD=BF=E7=94=A8=E6=97=A7=E6=8E=A5=E5=8F=A3=E6=88=96?=
 =?UTF-8?q?=E8=80=85=E6=96=B0=E6=8E=A5=E5=8F=A3=EF=BC=8C=E5=85=B6=E5=AE=83?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=8D=E5=8F=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project.config.json                        |  1 +
 src/components/taro-cropper/canvas-util.ts | 87 ++++++++++++++++++++++
 src/components/taro-cropper/index.tsx      |  9 +--
 3 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 src/components/taro-cropper/canvas-util.ts

diff --git a/project.config.json b/project.config.json
index 4ddb659..56a4603 100644
--- a/project.config.json
+++ b/project.config.json
@@ -14,5 +14,6 @@
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
 	"qqappid": "1108100302",
+	"libVersion": "2.10.1",
 	"condition": {}
 }
\ No newline at end of file
diff --git a/src/components/taro-cropper/canvas-util.ts b/src/components/taro-cropper/canvas-util.ts
new file mode 100644
index 0000000..9a73222
--- /dev/null
+++ b/src/components/taro-cropper/canvas-util.ts
@@ -0,0 +1,87 @@
+import {Color} from "@tarojs/taro";
+import CanvasContext = Taro.CanvasContext;
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.');
+  v2 = v2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i]);
+    const num2 = parseInt(v2[i]);
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+
+  return 0
+}
+
+function isWeapp() {
+  return process.env.TARO_ENV === 'weapp'
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+//////// 微信小程序自1.9.90起废除若干个CanvasContext的函数，改为属性，以下为兼容代码
+//////////////////////////////////////////////////////////////////////////////////
+
+
+function _easyCanvasContextBase(systemInfo: Taro.getSystemInfoSync.Return, lowCallback: () => void, highCallback: () => void, targetVersion: string = "1.9.90") {
+  if (isWeapp() && compareVersion(systemInfo.SDKVersion, targetVersion) >= 0) {
+    highCallback()
+  } else {
+    lowCallback()
+  }
+}
+/**
+ *
+ * 基础库 1.9.90 开始支持，低版本需做兼容处理。填充颜色。用法同 CanvasContext.setFillStyle()。
+ * @param systemInfo
+ * @param canvasContext
+ * @param color
+ */
+function easySetStrokeStyle(systemInfo: Taro.getSystemInfoSync.Return, canvasContext: CanvasContext, color: string | Color) {
+  _easyCanvasContextBase(systemInfo, () => {
+    canvasContext.setStrokeStyle(color);
+    console.log("???");
+  }, () => {
+    if (typeof color === "string") {
+      canvasContext.strokeStyle = color
+    }
+    console.log("2333");
+  });
+}
+
+function easySetLineWidth(systemInfo: Taro.getSystemInfoSync.Return, canvasContext: CanvasContext, lineWidth: number) {
+  _easyCanvasContextBase(systemInfo, () => {
+    canvasContext.setLineWidth(lineWidth)
+  }, () => {
+    canvasContext.lineWidth = lineWidth
+  })
+}
+
+function easySetFillStyle(systemInfo: Taro.getSystemInfoSync.Return, canvasContext: CanvasContext, color: string | Color) {
+  _easyCanvasContextBase(systemInfo, () => {
+    canvasContext.setFillStyle(color)
+  }, () => {
+    if (typeof color === "string") {
+      canvasContext.fillStyle = color
+    }
+  })
+}
+
+export {
+  easySetStrokeStyle,
+  easySetLineWidth,
+  easySetFillStyle
+}
diff --git a/src/components/taro-cropper/index.tsx b/src/components/taro-cropper/index.tsx
index 6bc7ce5..5e2c513 100644
--- a/src/components/taro-cropper/index.tsx
+++ b/src/components/taro-cropper/index.tsx
@@ -1,10 +1,10 @@
 import Taro, {CanvasContext, getImageInfo, getSystemInfoSync} from '@tarojs/taro';
 import {Canvas, CoverView, View} from '@tarojs/components';
-
 import './index.scss';
 // @ts-ignore
 import {CanvasTouch, CanvasTouchEvent} from "@tarojs/components/types/common";
 import {CSSProperties} from "react";
+import {easySetFillStyle, easySetLineWidth, easySetStrokeStyle} from "./canvas-util";
 
 
 interface TaroCropperComponentProps {
@@ -148,7 +148,6 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
 
   }
 
-
   componentDidMount(): void {
     const {
       cropperCanvasId,
@@ -188,8 +187,8 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
     const cropperStartX = (this.width - this.cropperWidth) / 2;
     const cropperStartY = (this.height - this.cropperHeight) / 2;
     this.cropperCanvasContext.beginPath();
-    this.cropperCanvasContext.setStrokeStyle(themeColor);
-    this.cropperCanvasContext.setLineWidth(lineWidth);
+    easySetStrokeStyle(this.systemInfo, this.cropperCanvasContext, themeColor);
+    easySetLineWidth(this.systemInfo, this.cropperCanvasContext, lineWidth);
     // 左上角
     this.cropperCanvasContext.moveTo(cropperStartX, cropperStartY);
     this.cropperCanvasContext.lineTo(cropperStartX + lineLength, cropperStartY);
@@ -268,7 +267,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
       this.imageLeft, this.imageTop, this.scaleImageWidth, this.scaleImageHeight);
     // 绘制半透明层
     this.cropperCanvasContext.beginPath();
-    this.cropperCanvasContext.setFillStyle('rgba(0, 0, 0, 0.3)');
+    easySetFillStyle(this.systemInfo, this.cropperCanvasContext, 'rgba(0, 0, 0, 0.3)');
     this.cropperCanvasContext.fillRect(0, 0, this.width, this.height);
     this.cropperCanvasContext.fill();