lefengyang
3 days ago 1e99f64e661af444a0aef18d9076b453b45e66fc
ledApp/pages/addTemplate/addTemplate.vue
@@ -144,21 +144,33 @@
            <view class="back_btn" v-show="false" @click="popupAnimationClose">
               <uv-icon name="arrow-leftward" color="#333" size="30"></uv-icon>
            </view>
            <!-- 操作按钮 -->
            <view class="controls" style="left: 30rpx;">
            <!-- 主操作按钮(收回/操作) - 移动模式下隐藏 -->
            <view class="controls" style="left: 30rpx;" v-if="!showMoveControls">
               <uv-button type="success" :plain="true" :text="showControls ? '收回' : '操作'" @click="toggleControls"></uv-button>
            </view>
            <!-- 动画按钮 -->
            <view class="controls" v-if="showControls">
               <uv-button type="primary" :plain="true" text="分辨率" @click="changeRatio()"></uv-button>
            <!-- 主操作按钮组:颜色、移动、文字、清除、保存 -->
            <view class="controls" v-if="showControls && !showMoveControls">
               <uv-button type="primary" :plain="true" text="颜色" @click="changeColor()"></uv-button>
               <uv-button type="primary" :plain="true" text="左移" @click="shiftLeft()"></uv-button>
               <uv-button type="primary" :plain="true" text="右移" @click="shiftRight()"></uv-button>
               <uv-button type="primary" :plain="true" text="移动" @click="enterMoveMode()"></uv-button>
               <uv-button type="primary" :plain="true" text="文字" @click="addText()"></uv-button>
               <uv-button type="primary" :plain="true" text="清除" @click="clear()"></uv-button>
               <uv-button type="primary" :plain="true" text="保存" @click="clickSaveData"></uv-button>
            </view>
            <!-- 移动模式按钮组:返回、左移、上移、下移、右移、180度旋转、左右镜像翻转、上下镜像翻转 -->
            <view class="controls" style="left: 30rpx;" v-if="showMoveControls">
               <uv-button type="primary" :plain="true" text="返回" @click="exitMoveMode()"></uv-button>
            </view>
            <view class="controls move_controls" v-if="showMoveControls">
               <uv-button type="primary" :plain="true" text="左移" @click="shiftLeft()"></uv-button>
               <uv-button type="primary" :plain="true" text="上移" @click="shiftUp()"></uv-button>
               <uv-button type="primary" :plain="true" text="下移" @click="shiftDown()"></uv-button>
               <uv-button type="primary" :plain="true" text="右移" @click="shiftRight()"></uv-button>
               <uv-button type="primary" :plain="true" text="180°旋转" @click="rotate180()"></uv-button>
               <uv-button type="primary" :plain="true" text="左右镜像" @click="flipHorizontal()"></uv-button>
               <uv-button type="primary" :plain="true" text="上下镜像" @click="flipVertical()"></uv-button>
            </view>
            
            <!-- 文字生成图形 -->
            <canvas canvas-id="myCanvas" id="myCanvas" class="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
@@ -317,7 +329,7 @@
            color: '#FF0000',
            gridRect: null,
            pickerOptions: {
               width: '50%',
               width: 680,
            },
            fpsList: [],
            tId: '',
@@ -330,7 +342,8 @@
            previewWidth: 24,
            previewHeight: 12,
            showControls: false,
            scrollLeft: 0,
         showMoveControls: false, // 移动模式按钮组开关
         scrollLeft: 0,
            textType: 'overwrite',
            tempText: '',
            presetList: [],
@@ -730,6 +743,74 @@
               }
            }
         },
         shiftDown() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            const lastRowStart = (this.height - 1) * colCount
            const lastRow = this.pixelData.slice(lastRowStart, lastRowStart + colCount)
            for (let r = this.height - 1; r > 0; r--) {
               const currentStart = r * colCount
               const prevStart = (r - 1) * colCount
               for (let c = 0; c < colCount; c++) {
                  this.$set(this.pixelData, currentStart + c, this.pixelData[prevStart + c])
               }
            }
            for (let c = 0; c < colCount; c++) {
               this.$set(this.pixelData, c, lastRow[c])
            }
         },
         // 上移一像素:整体内容上移,首行补到末行
         shiftUp() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            const firstRow = this.pixelData.slice(0, colCount)
            for (let r = 0; r < this.height - 1; r++) {
               const currentStart = r * colCount
               const nextStart = (r + 1) * colCount
               for (let c = 0; c < colCount; c++) {
                  this.$set(this.pixelData, currentStart + c, this.pixelData[nextStart + c])
               }
            }
            const lastRowStart = (this.height - 1) * colCount
            for (let c = 0; c < colCount; c++) {
               this.$set(this.pixelData, lastRowStart + c, firstRow[c])
            }
         },
         // 180度旋转:整体一维数组反转即可实现180度旋转
         rotate180() {
            this.pixelData = this.pixelData.slice().reverse()
         },
         // 左右镜像翻转:每行内部反转
         flipHorizontal() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            const newData = this.pixelData.slice()
            for (let r = 0; r < this.height; r++) {
               const rowStart = r * colCount
               const reversedRow = newData.slice(rowStart, rowStart + colCount).reverse()
               for (let c = 0; c < colCount; c++) {
                  newData[rowStart + c] = reversedRow[c]
               }
            }
            this.pixelData = newData
         },
         // 上下镜像翻转:行顺序反转
         flipVertical() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            let newData = []
            for (let r = this.height - 1; r >= 0; r--) {
               const rowStart = r * colCount
               newData = newData.concat(this.pixelData.slice(rowStart, rowStart + colCount))
            }
            this.pixelData = newData
         },
         // 进入移动模式:隐藏主按钮组,显示移动按钮组
         enterMoveMode() {
            this.showMoveControls = true
            this.showControls = false
         },
         // 退出移动模式:恢复主按钮组
         exitMoveMode() {
            this.showMoveControls = false
            this.showControls = true
         },
         toggleControls() {
            this.showControls = !this.showControls;
         },
@@ -771,6 +852,9 @@
            this.$refs.popupAnimation.close();
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            this.pixelData = new Array(this.height * colCount).fill('')
            // 重置按钮组状态,下次打开回到主操作界面
            this.showMoveControls = false
            this.showControls = false
         },
         // 复制当前帧
         copyFrame(index) {
@@ -1241,8 +1325,7 @@
      box-sizing: border-box;
   }
   .color-picker-wrapper {
      zoom: 0.5;
      padding: 0 25%;
      //zoom: 0.5;
   }
   
   .action_btn {
@@ -1263,6 +1346,15 @@
      gap: 10rpx;
      z-index: 9;
   }
   // 移动模式按钮组:8个按钮需要换行排列
   .move_controls {
      flex-wrap: wrap;
      justify-content: flex-start;
      max-width: calc(100vw - 200rpx);
      ::v-deep .uv-button {
         margin: 4rpx 0;
      }
   }
   .exit_btn{
      position: absolute;
      right: 30rpx;