From b6cb66b0364f275f6dfdf95d5245cc855fa58dfe Mon Sep 17 00:00:00 2001
From: shenghanqin <shenghanqin@163.com>
Date: Tue, 24 Mar 2020 12:31:41 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E9=80=9A=E8=BF=87CSS=E6=9D=A5?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=85=A8=E5=B1=8F=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=A5=E8=A7=A3=E5=86=B3=E9=A1=B5=E9=9D=A2=E5=AD=98=E5=9C=A8?=
 =?UTF-8?q?tabBar=E6=97=B6=EF=BC=8C=E7=BB=84=E4=BB=B6=E5=81=8F=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82=E5=B9=B6=E5=81=9A=E4=BA=86?=
 =?UTF-8?q?h5=E7=AB=AF=E7=9A=84=E9=80=82=E9=85=8D=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/taro-cropper/index.scss | 25 +++++++++++++++++++++++++
 src/components/taro-cropper/index.tsx  | 13 ++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/taro-cropper/index.scss b/src/components/taro-cropper/index.scss
index e69de29..28fb71d 100644
--- a/src/components/taro-cropper/index.scss
+++ b/src/components/taro-cropper/index.scss
@@ -0,0 +1,25 @@
+.canvas-item {
+  background: rgba(0,0,0,0.8);
+  position: relative;
+}
+.canvas-fullscreen {
+  width: 100%;
+  height: 100%;
+}
+.cut-canvas-item {
+  position: absolute;
+}
+.taro-cropper {
+  position: relative;
+}
+.taro-cropper-fullscreen {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+html .taro-tabbar__container .taro-cropper-fullscreen {
+  height: calc(100% - 100rpx);
+}
+
diff --git a/src/components/taro-cropper/index.tsx b/src/components/taro-cropper/index.tsx
index 5e2c513..bf07616 100644
--- a/src/components/taro-cropper/index.tsx
+++ b/src/components/taro-cropper/index.tsx
@@ -46,6 +46,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
     themeColor: '#00ff00',
     maxScale: 3,
     fullScreen: false,
+    fullScreenCss: false,
     hideFinishText: false,
     hideCancelText: true,
     finishText: '完成',
@@ -489,6 +490,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
       height,
       cropperCanvasId,
       fullScreen,
+      fullScreenCss,
       themeColor,
       hideFinishText,
       cropperWidth,
@@ -504,6 +506,11 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
     const _height = fullScreen ? this.systemInfo.windowHeight : this._getRealPx(height);
     const _cropperWidth = this._getRealPx(cropperWidth);
     const _cropperHeight = this._getRealPx(cropperHeight);
+    const isFullScreenCss = fullScreen && fullScreenCss
+
+    const croperStyle = isFullScreenCss ? {} : {
+      position: 'relative'
+    }
 
     const canvasStyle: CSSProperties = {
       background: 'rgba(0, 0, 0, 0.8)',
@@ -577,12 +584,11 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
       </CoverView>
     }
     return (
-      <View style={{
-        position: 'relative'
-      }}>
+      <View className={`taro-cropper ${isFullScreenCss ? 'taro-cropper-fullscreen' : ''}`} style={croperStyle}>
         <Canvas
           canvasId={cropperCutCanvasId}
           style={cutCanvasStyle}
+          className={`cut-canvas-item ${isFullScreenCss ? 'cut-canvas-fullscreen' : ''}`}
 
         />
         <Canvas
@@ -591,6 +597,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
           onTouchEnd={this.handleOnTouchEnd}
           canvasId={cropperCanvasId}
           style={canvasStyle}
+          className={`canvas-item ${isFullScreenCss ? 'canvas-fullscreen' : ''}`}
           disableScroll
         >
         </Canvas>