image-cropper.wxml 2.3 KB

123456789101112131415161718192021222324
  1. <view class='image-cropper' catchtouchmove='_preventTouchMove'>
  2. <view class='main' bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove" bindtap="_click">
  3. <view class='content'>
  4. <view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
  5. <view class='content_middle' style="height:{{height}}px;">
  6. <view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
  7. <view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
  8. <view class="border border-top-left"></view>
  9. <view class="border border-top-right"></view>
  10. <view class="border border-right-top"></view>
  11. <view class="border border-right-bottom"></view>
  12. <view class="border border-bottom-right"></view>
  13. <view class="border border-bottom-left"></view>
  14. <view class="border border-left-bottom"></view>
  15. <view class="border border-left-top"></view>
  16. </view>
  17. <view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
  18. </view>
  19. <view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
  20. </view>
  21. <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>
  22. </view>
  23. <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>
  24. </view>