|
|
@ -3,23 +3,35 @@ |
|
|
<view class='cropper-content'> |
|
|
<view class='cropper-content'> |
|
|
<view v-if="showImage" class="uni-corpper"> |
|
|
<view v-if="showImage" class="uni-corpper"> |
|
|
<view class="uni-corpper-content"> |
|
|
<view class="uni-corpper-content"> |
|
|
<image class="uni-corpper-content-image" :src="imageSrc" mode="aspectFit" :style="'transform:rotate('+rotateAll + 'deg) rotateY('+rotateY + 'deg) rotateX('+rotateX + 'deg)'"></image> |
|
|
|
|
|
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" |
|
|
|
|
|
|
|
|
<image class="uni-corpper-content-image" :src="imageSrc" mode="aspectFit" |
|
|
|
|
|
:style="'transform:rotate('+rotateAll + 'deg) rotateY('+rotateY + 'deg) rotateX('+rotateX + 'deg)'"> |
|
|
|
|
|
</image> |
|
|
|
|
|
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" |
|
|
|
|
|
@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd" |
|
|
:style="'left:'+cutL+'rpx;top:'+cutT+'rpx;right:'+cutR+'rpx;bottom:'+cutB+'rpx'"> |
|
|
:style="'left:'+cutL+'rpx;top:'+cutT+'rpx;right:'+cutR+'rpx;bottom:'+cutB+'rpx'"> |
|
|
<view class="uni-cropper-view-box"> |
|
|
<view class="uni-cropper-view-box"> |
|
|
<view class="uni-cropper-dashed-h"></view> |
|
|
<view class="uni-cropper-dashed-h"></view> |
|
|
<view class="uni-cropper-dashed-v"></view> |
|
|
<view class="uni-cropper-dashed-v"></view> |
|
|
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
|
|
|
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
<view class="uni-cropper-point point-tr" data-drag="topTight"></view> |
|
|
<view class="uni-cropper-point point-tr" data-drag="topTight"></view> |
|
|
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view> |
|
|
|
|
|
|
|
|
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
|
|
|
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view> |
|
|
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view> |
|
|
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view> |
|
|
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view> |
|
|
|
|
|
|
|
|
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" |
|
|
|
|
|
@touchmove.stop="dragMove"></view> |
|
|
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view> |
|
|
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -80,16 +92,16 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// 获取手机信息 |
|
|
// 获取手机信息 |
|
|
let sysInfo = uni.getSystemInfoSync() |
|
|
|
|
|
let SCREEN_WIDTH = sysInfo.screenWidth |
|
|
|
|
|
|
|
|
const sysInfo = uni.getWindowInfo(); |
|
|
|
|
|
const SCREEN_WIDTH = sysInfo.screenWidth; |
|
|
let PAGE_X, // 手按下的x位置 |
|
|
let PAGE_X, // 手按下的x位置 |
|
|
PAGE_Y, // 手按下y的位置 |
|
|
PAGE_Y, // 手按下y的位置 |
|
|
T_PAGE_X, // 手移动的时候x的位置 |
|
|
T_PAGE_X, // 手移动的时候x的位置 |
|
|
T_PAGE_Y, // 手移动的时候Y的位置 |
|
|
T_PAGE_Y, // 手移动的时候Y的位置 |
|
|
CUT_L, // 初始化拖拽元素的left值 |
|
|
CUT_L, // 初始化拖拽元素的left值 |
|
|
CUT_T, // 初始化拖拽元素的top值 |
|
|
CUT_T, // 初始化拖拽元素的top值 |
|
|
CUT_R, // 初始化拖拽元素的 |
|
|
|
|
|
CUT_B, // 初始化拖拽元素的 |
|
|
|
|
|
|
|
|
CUT_R, // 初始化拖拽元素的right值 |
|
|
|
|
|
CUT_B, // 初始化拖拽元素的bottom值 |
|
|
IMG_RATIO, // 图片宽高比例 |
|
|
IMG_RATIO, // 图片宽高比例 |
|
|
IMG_REAL_W, // 图片实际的宽度 |
|
|
IMG_REAL_W, // 图片实际的宽度 |
|
|
IMG_REAL_H, // 图片实际的高度 |
|
|
IMG_REAL_H, // 图片实际的高度 |
|
|
|
