<view style="height: 100vh;" class="flex_column" catch:tap="hideBarsHandler">
  <!-- 涂鸦区 -->
  <view style="flex: 1; position: relative;" catch:touchstart="hideBarsHandler">
    <image src="{{cover}}" mode="aspectFit" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 100%;" />
    <canvas style="width: 100%; height: 100%;;" id="myCanvas" canvas-id="myCanvas" type="2d" bindtouchstart="startTouchClick" bindtouchmove="moveClick" bindtouchend="endTouchClick" binderror="errorClick"></canvas>
  </view>
  <!-- 涂鸦工具区 -->
  <view style="padding: 30rpx 32rpx 50rpx;">
    <view class="space" style="padding-bottom: 20rpx; color: #FFF; font-size: 30rpx; line-height: 56rpx;">
      <view catch:tap="restore">回退</view>
      <view style="width: 30rpx;"></view>
      <view catch:tap="preview">预览</view>
      <view style="flex: 1;"></view>
      <view catch:tap="showBarsHandler">笔力</view>
      <view style="width: 30rpx;"></view>
      <view catch:tap="rubberHandler">橡皮擦</view>
      <view style="width: 30rpx;"></view>
      <view catch:tap="clearRect">清除</view>
    </view>
    <scroll-view scroll-x style="height: 90rpx;">
      <view style="white-space: nowrap;">
        <block wx:for="{{colors}}" wx:key="index">
          <view style="background-color: {{item}};" class="colorBtn {{selectColor == item && 'select'}}" catch:tap="colorChange" data-color="{{item}}"></view>
        </block>
      </view>
    </scroll-view>
  </view>
</view>
 
<view class="bars {{showBars && 'show'}}" wx:if="{{showBars}}">
  <view class="space vertical_center">
    <view style="width: 136rpx;">字号：</view>
    <slider style="flex: 1;" value="{{selectSize}}" step="1" min="1" max="20" block-size="12" activeColor="#a88cf8" bindchange="sizeHandler" />
    <view style="width: 50rpx; text-align: right;">{{selectSize}}</view>
  </view>
</view>