-
Notifications
You must be signed in to change notification settings - Fork 1
/
cropper.wxml
27 lines (27 loc) · 2.69 KB
/
cropper.wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<view class='image-cropper' catchtouchmove='_preventTouchMove'>
<view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove">
<view class='content'>
<view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle' style="height:{{height}}px;">
<view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
<view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .5s;transition-property:{{_cut_animation?'':'background'}}; outline: #fff solid 2rpx; outline-offset: -2rpx;">
<view class="border border-top-left" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-top-right" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-right-top" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-right-bottom" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-bottom-right" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-bottom-left" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-left-bottom" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-left-top" style="box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);"></view>
<view class="border border-top-left"></view>
<view class="border border-top-right"></view>
<view class="border border-bottom-left"></view>
<view class="border border-right-bottom"></view>
</view>
<view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
</view>
<image bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.5:0}}s; transform-origin: {{_scale_x}} {{_scale_y}} 0;" class='img' src='{{imgSrc}}'></image>
</view>
</view>