fix: 修复微信小程序CanvasContext若干个接口废弃的问题（微信小程序端自动根据sdk版本使用旧接口或者新接口，其它端不变）

project.config.json

@@ -14,5 +14,6 @@
 	"simulatorType": "wechat",
 	"simulatorPluginLibVersion": {},
 	"qqappid": "1108100302",
+	"libVersion": "2.10.1",
 	"condition": {}
 }

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
+}

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();