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:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user