city_card/vant/dist/cropper/index.wxml
2023-07-15 14:25:28 +08:00

45 lines
3.5 KiB
Plaintext
Executable File

<view class="wx-cropper-info" wx:if="{{isShowCropper}}">
<view class='cropper-content'>
<!-- {{cropperInitH}}rpx -->
<view class="wx-corpper" style="width:{{cropperInitW}}rpx;height:85%;background:#000;display: flex;justify-content: center;align-items: center;">
<!-- left:{{cropperL}}rpx;top:{{cropperT}}rpx -->
<view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;">
<image class="img" src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
<view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing"
bindtouchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
<view class="wx-cropper-view-box">
<view class="wx-cropper-dashed-h"></view>
<view class="wx-cropper-dashed-v"></view>
<view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-tr" data-drag="topTight"></view>
<view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart"
catchtouchmove="dragMove" catchtouchend="dragEnd"></view>
<view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart"
catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
</view>
</view>
<view class='cropper-config'>
<button type="primary reverse" class="btn" bindtap="cancelCropper" style='margin-top: 30rpx;'> 取消 </button>
<button type="primary" class="cropper-confirm btn" bindtap="confirmCropper" style='margin-top: 30rpx;'> 确认 </button>
</view>
<canvas wx:if="{{!isCircleCrop}}" canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{qualityWidth}}px;height:{{qualityWidth/innerAspectRadio}}px;top:-9999px;left:-9999px;"></canvas>
<canvas wx:else canvas-id="cropper" style="position:absolute;border: 1px solid red; width:{{canvasW}}px;height:{{canvasH}}px;top:-9999px;left:-9999px;"></canvas>
</view>