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', themeColor: '#00ff00',
maxScale: 3, maxScale: 3,
fullScreen: false, fullScreen: false,
fullScreenCss: false,
hideFinishText: false, hideFinishText: false,
hideCancelText: true, hideCancelText: true,
finishText: '完成', finishText: '完成',
@@ -489,6 +490,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
height, height,
cropperCanvasId, cropperCanvasId,
fullScreen, fullScreen,
fullScreenCss,
themeColor, themeColor,
hideFinishText, hideFinishText,
cropperWidth, cropperWidth,
@@ -504,6 +506,11 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
const _height = fullScreen ? this.systemInfo.windowHeight : this._getRealPx(height); const _height = fullScreen ? this.systemInfo.windowHeight : this._getRealPx(height);
const _cropperWidth = this._getRealPx(cropperWidth); const _cropperWidth = this._getRealPx(cropperWidth);
const _cropperHeight = this._getRealPx(cropperHeight); const _cropperHeight = this._getRealPx(cropperHeight);
const isFullScreenCss = fullScreen && fullScreenCss
const croperStyle = isFullScreenCss ? {} : {
position: 'relative'
}
const canvasStyle: CSSProperties = { const canvasStyle: CSSProperties = {
background: 'rgba(0, 0, 0, 0.8)', background: 'rgba(0, 0, 0, 0.8)',
@@ -577,12 +584,11 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
</CoverView> </CoverView>
} }
return ( return (
<View style={{ <View className={`taro-cropper ${isFullScreenCss ? 'taro-cropper-fullscreen' : ''}`} style={croperStyle}>
position: 'relative'
}}>
<Canvas <Canvas
canvasId={cropperCutCanvasId} canvasId={cropperCutCanvasId}
style={cutCanvasStyle} style={cutCanvasStyle}
className={`cut-canvas-item ${isFullScreenCss ? 'cut-canvas-fullscreen' : ''}`}
/> />
<Canvas <Canvas
@@ -591,6 +597,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
onTouchEnd={this.handleOnTouchEnd} onTouchEnd={this.handleOnTouchEnd}
canvasId={cropperCanvasId} canvasId={cropperCanvasId}
style={canvasStyle} style={canvasStyle}
className={`canvas-item ${isFullScreenCss ? 'canvas-fullscreen' : ''}`}
disableScroll disableScroll
> >
</Canvas> </Canvas>