libo
/
ztb-saas-mini
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

no message

feature/v2.1
xpz2018 4 years ago
parent
0ba04d912c
commit
bce3b3d88f
3 changed files with 53 additions and 49 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      components/image-cropper/index.wxml
  2. 10
      components/image-cropper/index.wxss
  3. 4
      project.config.json

88
components/image-cropper/index.wxml
View File

@ -1,41 +1,51 @@
<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: .3s;transition-property:{{_cut_animation?'':'background'}};">
<view class="border border-top-left"></view>
<view class="border border-top-right"></view>
<view class="border border-right-top"></view>
<view class="border border-right-bottom"></view>
<view class="border border-bottom-right"></view>
<view class="border border-bottom-left"></view>
<view class="border border-left-bottom"></view>
<view class="border border-left-top"></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 bindload="imageLoad" 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?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
</view>
<canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
<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: .3s;transition-property:{{_cut_animation?'':'background'}};">
<view class="border border-top-left"></view>
<view class="border border-top-right"></view>
<view class="border border-right-top"></view>
<view class="border border-right-bottom"></view>
<view class="border border-bottom-right"></view>
<view class="border border-bottom-left"></view>
<view class="border border-left-bottom"></view>
<view class="border border-left-top"></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 bindload="imageLoad" 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?.4:0}}s;"
class='img' src='{{imgSrc}}'></image>
</view>
<canvas canvas-id='image-cropper' disable-scroll="true"
style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px"
class='image-cropper-canvas'></canvas>
<view class="crop-list" wx:if="{{srcList.length >= 2}}">
<scroll-view scroll-x="{{true}}" scroll-with-animation="{{true}}" scroll-left="{{scrollLeft}}">
<view class="{{srcList.length >= 4 ? 'start': 'center'}}" style="position: relative;display:flex;align-items: center;">
<view wx:for="{{srcList}}" wx:key="index">
<image class="crop-image {{imageIndex == index ? 'img_border': ''}}" src="{{item}}" mode="aspectFill"></image>
</view>
</view>
</scroll-view>
</view>
<view class="crop-btns">
<view class="crop-close" catchtap="close"></view>
<view class="crop-around" catchtap="rotate"></view>
<view class="crop-reset" catchtap="reset"></view>
<view class="crop-btn" catchtap="cropImage"></view>
</view>
<view class="crop-list" wx:if="{{srcList.length >= 2}}">
<scroll-view scroll-x="{{true}}" scroll-with-animation="{{true}}" scroll-left="{{scrollLeft}}">
<view class="{{srcList.length >= 4 ? 'start': 'center'}}"
style="position: relative;display:flex;align-items: center;">
<view wx:for="{{srcList}}" wx:key="index">
<image class="crop-image {{imageIndex == index ? 'img_border': ''}}" src="{{item}}" mode="aspectFill"></image>
</view>
</view>
</scroll-view>
</view>
<view class="crop-btns">
<view class="btn crop-close" catchtap="close"></view>
<view class="btn crop-around" catchtap="rotate"></view>
<view class="btn crop-reset" catchtap="reset"></view>
<view class="btn crop-btn" catchtap="cropImage"></view>
</view>
</view>
</view>

10
components/image-cropper/index.wxss
View File

@ -192,12 +192,6 @@
user-select: none;
}
.image-cropper .crop-rotate .lineation>view {
flex: 1;
height: 100%;
display: inline-block;
}
.image-cropper .crop-rotate .lineation .number {
width: 100%;
height: 32px;
@ -227,7 +221,7 @@
z-index: 999;
}
.image-cropper .crop-btns>view {
.image-cropper .crop-btns .btn {
flex: 1;
height: 100%;
background-color: transparent;
@ -238,7 +232,7 @@
position: relative;
}
.image-cropper .crop-btns>view:after {
.image-cropper .crop-btns .btn:after {
position: absolute;
top: 0;
bottom: 0;

4
project.config.json
View File

@ -4,7 +4,7 @@
"ignore": []
},
"setting": {
"urlCheck": false,
"urlCheck": true,
"es6": true,
"enhance": true,
"postcss": true,
@ -39,7 +39,7 @@
"minifyWXSS": true
},
"compileType": "miniprogram",
"libVersion": "2.17.0",
"libVersion": "2.17.3",
"appid": "wx8214a7f3614a3340",
"projectname": "ztb-saas-mini",
"debugOptions": {

Write Preview
Loading…
Cancel
Save