1
0
mirror of https://github.com/SunnyQjm/taro-cropper.git synced 2026-06-03 08:16:46 +08:00

update 通过CSS来设置全屏效果,以解决页面存在tabBar时,组件偏下的问题。并做了h5端的适配。

This commit is contained in:
shenghanqin
2020-03-24 12:31:41 +08:00
parent 71ca523a8d
commit b6cb66b036
2 changed files with 35 additions and 3 deletions
+25
View File
@@ -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);
}
+10 -3
View File
@@ -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>