68 lines
4.4 KiB
Plaintext
68 lines
4.4 KiB
Plaintext
<view wx:if="{{show}}">
|
||
<view class="container l-class" catchtouchmove="doNothing" style="z-index: {{zIndex}};">
|
||
<!-- 图片裁剪容器 -->
|
||
<view class="clip-wrapper" bind:touchstart="clipTouchStart" bind:touchmove="clipTouchMove" bind:touchend="clipTouchEnd">
|
||
<!-- 裁剪区域容器 -->
|
||
<!-- 分为三部分top、middle、footer，采用flex布局 -->
|
||
<!-- top：裁剪容器顶部占位区域 -->
|
||
<!-- middle：裁剪框所在区域 -->
|
||
<!-- footer：裁剪容器底部占位区域 -->
|
||
<!-- top、middle区域高度需计算，footer区域自适应 -->
|
||
<view class="clip-content">
|
||
<view class="clip-content-top bg-transparent" style="height: {{cutY}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
|
||
<view class="clip-content-middle" style="height: {{clipHeight}}px;">
|
||
<!-- 此容器为裁剪框所在容器 -->
|
||
<!-- 分为三部分left、center、right，采用flex布局 -->
|
||
<!-- left：裁剪框左侧占位区域 -->
|
||
<!-- center：裁剪框所在区域 -->
|
||
<!-- right：裁剪框右侧占位区域 -->
|
||
<!-- left、right需根据center区域的宽度而改变宽度 -->
|
||
<view class="clip-content-middle-left bg-transparent" style="width: {{cutX}}px;transition-property: {{cutAnimation ? '' : 'background'}}"></view>
|
||
<view class="clip-content-middle-center" style="width: {{clipWidth}}px;height: {{clipHeight}}px;transition-property: {{cutAnimation ? '' : 'background'}}">
|
||
<view
|
||
class="clip-edge clip-edge-{{index < 2 ? 'top' : 'bottom'}}-{{index === 0 || index === 2 ? 'left' : 'right'}}"
|
||
wx:for="{{4}}"
|
||
wx:for-index="index"
|
||
wx:key="index"
|
||
style="left: {{index === 0 || index === 2 ? 0 : 'auto'}};right: {{index === 1 || index === 3 ? 0 : 'auto'}};top: {{index < 2 ? 0 : 'auto'}};bottom: {{index > 1 ? 0 : 'auto'}}"
|
||
></view>
|
||
</view>
|
||
<view class="clip-content-middle-right flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
|
||
</view>
|
||
<view class="clip-content-footer flex-auto bg-transparent" style="transition-property: {{cutAnimation ? '' : 'background'}}"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 图片容器 -->
|
||
<image
|
||
class="cropper-image"
|
||
binderror="imageLoad"
|
||
bindload="imageLoad"
|
||
bind:touchstart="imageTouchStart"
|
||
bind:touchmove="imageTouchMove"
|
||
bind:touchend="imageTouchEnd"
|
||
src="{{imageUrl}}"
|
||
mode="widthFix"
|
||
wx:if="{{imageUrl}}"
|
||
style="width: {{imageWidth ? imageWidth + 'px' : 'auto'}};height: {{imageHeight ? imageHeight + 'px' : 'auto'}};transform: translate3d({{imageLeft - imageWidth / 2}}px, {{imageTop - imageHeight / 2}}px,0) scale({{scale}}) rotate({{angle}}deg); transition-duration: {{cutAnimation ? 0.35 : 0}}s;"
|
||
/>
|
||
<!-- 图片绘制容器 -->
|
||
<canvas
|
||
canvas-id="image-clipper"
|
||
id="image-clipper"
|
||
:disable-scroll="true"
|
||
style="width: {{CANVAS_WIDTH * scaleRatio}}px; height:{{CANVAS_HEIGHT * scaleRatio}}px;"
|
||
class="clipper-canvas"
|
||
></canvas>
|
||
<!-- 底部工具栏容器 -->
|
||
<view class="footer-tools">
|
||
<view class="tools-icon">
|
||
<image src="{{checkImageIcon}}" mut-bind:tap="uploadImage" wx:if="{{checkImage}}" class="tools-icon-image" />
|
||
<image src="{{rotateAlongIcon}}" mut-bind:tap="rotate" data-type="along" wx:if="{{rotateAlong}}" class="tools-icon-image" />
|
||
<image src="{{rotateInverseIcon}}" mut-bind:tap="rotate" data-type="inverse" wx:if="{{rotateInverse}}" class="tools-icon-image" />
|
||
<image src="{{sureIcon}}" mut-bind:tap="getImageData" wx:if="{{sure}}" class="tools-icon-image" />
|
||
<image src="{{closeIcon}}" mut-bind:tap="close" wx:if="{{close}}" class="tools-icon-image" />
|
||
</view>
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</view> |