6.18

2025-06-18 18:23:59 +08:00
parent b496603f7c
commit 5aaa605a13
16 changed files with 1067 additions and 215 deletions
@@ -8,12 +8,14 @@ Page({
  data: {
    hasChoosedImg: false,
    canvasWidth: 0,
+    showBars: false,
    canvasHeight: 0, // canvas的完整高度
    canvasHeightLen: 0, // canvas的临时高度（用在操作栏影响画布高度时）
    windowHeight: 0, // 屏幕高度
    prevPosition: [0, 0], // 手指触摸的所在位置
    background: '', // 背景图片，即导入的图片
-
+    colors: ["#FFFFFF", "#000000", "#ff0000", "#ffff00", "#00CC00", "#99CCFF", "#0000ff", "#ff00ff"],
+    selectColor:"#99CCFF",
    btnInfo: [
      {
        type: 'width',
@@ -37,7 +39,7 @@ Page({
    r: 33,
    g: 33,
    b: 33,
-    w: 10,
+    selectSize:5,
    clear: false, // 是否开启清空栏
    eraser: false, // 是否开启橡皮擦
    saving: false, // 是否在保存状态
@@ -62,22 +64,34 @@ Page({
    })
    // 选照片
    this.chooseImg();
-    // 检查权限，保存时提示弹窗用
-    wx.getSetting({
-      success(res) {
-        if (res.authSetting['scope.writePhotosAlbum']) {
-          that.setData({
-            scope: true,
-          })
-        }
-      }
-    })
+    
  },

  tapBtn: function (e) {
    utils.tapBtn(e, this, 2);
  },
-
+  showBarsHandler() {
+    this.setData({
+      showBars: !this.data.showBars
+    })
+  },
+  sizeHandler(e) {
+    const size = e.detail.value;
+    this.setData({
+      selectSize: size
+    })
+  },
+  hideBarsHandler() {
+    this.setData({
+      showBars: false
+    })
+  },
+  colorChange(e) {
+    const color = e.currentTarget.dataset.color;
+    this.setData({
+      selectColor: color
+    })
+  },
  addImg: function (e) {
    this.chooseImg();
  },
@@ -130,8 +144,8 @@ Page({
      ctx.clearRect(e.touches[0].x, e.touches[0].y, 30, 30);
      ctx.draw(true);
    } else {
-      ctx.setStrokeStyle("rgb(" + this.data.r + ', ' + this.data.g + ', ' + this.data.b + ')');
-      ctx.setLineWidth(this.data.w);
+      ctx.setStrokeStyle(this.data.selectColor);
+      ctx.setLineWidth(this.data.selectSize);
      ctx.setLineCap('round');
      ctx.setLineJoin('round');
      ctx.moveTo(this.data.prevPosition[0], this.data.prevPosition[1]);
@@ -1,5 +1,5 @@
 {
-"navigationBarTitleText": "涂鸦",
+ "navigationBarTitleText": "涂鸦",
  "navigationBarBackgroundColor": "#9cf",
  "navigationBarTextStyle": "white",
    "usingComponents": {}
@@ -1,14 +1,15 @@
 <!--painting-2.wxml-->
+<view class="page" style="background-color: #000;height:100vh;" catch:tap="hideBarsHandler">
 <canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="touchStart"
  bindtouchmove="touchMove" bindtouchend="touchEnd" wx:if="{{hasChoosedImg}}"
  style="height: {{(canvasHeightLen == 0) ? canvasHeight : canvasHeightLen}}px; width: {{canvasWidth}}px; background: url('{{background}}');background-position: 0 0; background-size: {{canvasWidth}}px {{canvasHeight}}px" 
 />
-<view class="failText" wx:if="{{!hasChoosedImg}}" bindtap="addImg">没有选择照片，点击重新选择</view>
-<view class="bottom">
+<view class="failText" wx:if="{{!hasChoosedImg}}" bindtap="addImg" catch:touchstart="hideBarsHandler">没有选择照片，点击重新选择</view>
+<!-- <view class="bottom">
  <block wx:for="{{btnInfo}}" wx:key="{{index}}">
    <view class="list-item" data-type="{{item.type}}" style="background: {{item.background}}" bindtap="tapBtn"></view>
  </block>
-</view>
+</view> -->
 <view class="choose-box" wx:if="{{width}}">
 <view class="color-box" style="background: {{'rgb(' + r + ', ' + g + ', ' + b + ')'}}; height: {{w}}px; border-radius: {{w/2}}px"></view>
  <slider min="1" max="50" step="1" show-value="true" value="{{w}}" bindchange="changeWidth"/>
@@ -19,7 +20,35 @@
  <slider min="0" max="255" step="1" show-value="true" activeColor="green" value="{{g}}" data-color="g" bindchange="changeColor"/>
  <slider min="0" max="255" step="1" show-value="true" activeColor="blue" value="{{b}}" data-color="b" bindchange="changeColor"/>
 </view>
-<view class="choose-box-flex" wx:if="{{clear}}">
+ <!-- 涂鸦工具区 -->
+ <view style="padding: 30rpx 32rpx 50rpx;position: fixed;bottom:0;width:100%;box-sizing: border-box;" >
+    <view class="space" style="padding-bottom: 20rpx; color: #FFF; font-size: 30rpx; line-height: 56rpx;display: flex;width:100%">
+      <view catch:tap="tapBtn" data-type="save">确定</view>
+      <view style="width: 30rpx;"></view>
+      <!-- <view >上传</view> -->
+      <view style="flex: 1;"></view>
+      <view catch:tap="showBarsHandler">笔力</view>
+      <view style="width: 30rpx;"></view>
+      <view catch:tap="chooseEraser">橡皮擦</view>
+      <view style="width: 30rpx;"></view>
+      <view catch:tap="clearCanvas">清除</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 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>
+<!-- <view class="choose-box-flex" wx:if="{{clear}}">
  <view class="choose-item" bindtap="chooseEraser">
    <view class="choose-img" style='background: url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-5.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px; border: {{eraser ? "2px solid #888" : "2px solid transparent"}}'></view>
    <view>橡皮擦</view>
@@ -28,4 +57,5 @@
    <view class="choose-img" style='background: url("http://ov8a2tdri.bkt.clouddn.com/wx-app/icon-4.png") white no-repeat; background-size: 26px 26px;background-position: 2px 2px;'></view>
    <view>清空</view>
  </view>
-</view>
+</view> -->
+</view>
@@ -2,13 +2,60 @@
 page {
    background: rgba(153, 204, 255, 0.1);
  }
-  
+  .page {
+      display: flex;
+      flex-direction: column;
+  }
  .failText {
    margin-top: 200rpx;
    text-align: center;
    color: #888;
  }
-  
+  .colorBtn {
+    width: 50rpx;
+    height: 50rpx;
+    border-radius: 50%;
+    margin-right: 20rpx;
+    display: inline-block;
+    border: 6rpx solid #242424;
+  }
+   
+  .colorBtn.select {
+    border: 6rpx solid #FFF;
+  }
+   
+  .bars {
+    right: 1rem;
+    width: 400rpx;
+    padding: 20rpx;
+    bottom: 7.5rem;
+    color: #a88cf8;
+    font-size: 32rpx;
+    font-weight: bold;
+    position: absolute;
+    border-radius: 8rpx;
+    background-color: #242424;
+    box-shadow: 0 0 1.5rem 0 #FFFFFF20;
+  }
+   
+  slider {
+    margin: 20rpx 20rpx 20rpx 0 !important;
+  }
+   
+  .flex_column {
+    display: flex;
+    flex-direction: column !important;
+  }
+   
+  .vertical_center {
+    display: flex;
+    align-items: center;
+  }
+   
+  .space {
+    display: flex;
+    justify-content: space-between;
+  }
  .bottom {
    width: 750rpx;
    height: 100rpx;