console.log

lefengyang

3 days ago 5b125d5dfcb81014ca20d13e3dfd00b5ba3d0542

 ledApp/pages/addTemplate/addTemplate.vue

@@ -37,7 +37,16 @@
            </view>
            <view class="item">
               <uv-radio-group v-model="selectedPreset" placement="column" @change="changePreset" labelSize="26rpx">
                  <uv-radio class="spec_radio" v-for="(item, index) in presetList" :key="index" :label="'预制动画：'+item.name"
                  <uv-radio
                     class="spec_radio"
                     label="无"
                     name="__none__">
                  </uv-radio>
                  <uv-radio
                     class="spec_radio"
                     v-for="(item, index) in presetList"
                     :key="index"
                     :label="'预制动画：'+item.name+'（'+item.fpsTotal+'帧）'"
                     :name="item.name">
                  </uv-radio>
               </uv-radio-group>
@@ -103,6 +112,7 @@
            </view>
            <view class="item">
               <uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
               <uv-button text="复制" @click="copyFrame(index)" shape="circle" size="small" color="linear-gradient( 142deg, #FFB347 0%, #FF8C00 100%)"></uv-button>
            </view>
         </view>
      </view>
@@ -139,21 +149,49 @@
            <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 && !showMultiMoveControls">
               <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 && !showMultiMoveControls">
               <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="enterMultiMoveMode()"></uv-button>
               <uv-button type="primary" :plain="true" text="图片上传" @click="chooseImage()"></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>

            <!-- 多帧移动按钮组:操作对所有帧生效 -->
            <view class="controls" style="left: 30rpx;" v-if="showMultiMoveControls">
               <uv-button type="primary" :plain="true" text="返回" @click="exitMultiMoveMode()"></uv-button>
            </view>
            <view class="controls move_controls" v-if="showMultiMoveControls">
               <uv-button type="primary" :plain="true" text="左移" @click="multiShiftLeft()"></uv-button>
               <uv-button type="primary" :plain="true" text="上移" @click="multiShiftUp()"></uv-button>
               <uv-button type="primary" :plain="true" text="下移" @click="multiShiftDown()"></uv-button>
               <uv-button type="primary" :plain="true" text="右移" @click="multiShiftRight()"></uv-button>
               <uv-button type="primary" :plain="true" text="180°旋转" @click="multiRotate180()"></uv-button>
               <uv-button type="primary" :plain="true" text="左右镜像" @click="multiFlipHorizontal()"></uv-button>
               <uv-button type="primary" :plain="true" text="上下镜像" @click="multiFlipVertical()"></uv-button>
            </view>
            
            <!-- 文字生成图形 -->
            <canvas canvas-id="myCanvas" id="myCanvas" class="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
@@ -187,11 +225,21 @@
      <!-- 分辨率 -->
      <uv-picker ref="pickerRatio" :columns="columnsRatio" @confirm="confirmRatio"></uv-picker>
      
      <!-- 颜色 -->
      <!-- 颜色选择器 -->
      <uv-popup ref="pickerColor" mode="bottom" round="10" :closeable="true">
         <view class="color_list">
            <view class="color_item" v-for="(item, index) in colorList" :class="{ hover: color === item }" :key="index" :style="{ backgroundColor: item }" @click="clickColor(item)"></view>
         </view>
         <scroll-view scroll-y :show-scrollbar="false" class="color-picker-scroll">
            <view class="color-picker-wrapper">
               <view class="color-picker-inner">
                  <x-color-picker
                     v-model="color"
                     :show-alpha="false"
                     :save-history="true"
                     :options="pickerOptions"
                     @confirm="onColorConfirm"
                     @cancel="onColorCancel" />
               </view>
            </view>
         </scroll-view>
      </uv-popup>
      
      <!-- 添加文字弹窗 -->
@@ -299,17 +347,11 @@
            // columnsRatio: [
            //    ['12*24']
            // ],
            colorList: [
               '#FF0000',
               '#00FF00',
               '#0000FF',
               '#FFFF00',
               '#FFA500',
               '#800080',
               '#00FFFF',
               '#FFC0CB'
            ],
            fpsIndex: 0,
            color: '#FF0000',
            gridRect: null,
            pickerOptions: {
               width: 680,
            },
            fpsList: [],
            tId: '',
            tempInfo:{},
@@ -321,7 +363,9 @@
            previewWidth: 24,
            previewHeight: 12,
            showControls: false,
            scrollLeft: 0,
      showMoveControls: false, // 单帧移动模式按钮组开关
      showMultiMoveControls: false, // 多帧移动模式按钮组开关
         scrollLeft: 0,
            textType: 'overwrite',
            tempText: '',
            presetList: [],
@@ -380,11 +424,21 @@
            })
         },
         changePreset(val) {
            console.log('changePreset', val)
            // 选择"无":将动画帧复原为空白(保留当前屏幕规格/动画方式/帧数/速度)
            if (val === '__none__') {
               this.fpsList = []
               this.total = 1
               this.fpsData = []
               this.pixelData = []
               this.gridRect = null
               return
            }
            const preset = this.presetList.find(item => item.name === val)
            if (preset) {
               this.specVal = preset.screen
               this.modeVal = preset.mode
               this.total = preset.cycle
               this.total = preset.fpsTotal
               this.speed = preset.speed
               if (preset.fpsList) {
                  this.fpsList = JSON.parse(preset.fpsList)
@@ -599,9 +653,11 @@
         changeColor() {
            this.$refs.pickerColor.open();
         },
         clickColor(item) {
            console.log('confirmColor---', item);
            this.color = item;
         onColorConfirm(colorObj) {
            this.color = colorObj.hex;
            this.$refs.pickerColor.close();
         },
         onColorCancel() {
            this.$refs.pickerColor.close();
         },
         changeRatio() {
@@ -719,6 +775,138 @@
               }
            }
         },
         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.showMultiMoveControls = false
            this.showControls = false
         },
         // 退出移动模式:恢复主按钮组
         exitMoveMode() {
            this.showMoveControls = false
            this.showControls = true
         },
         // 进入多帧移动模式:隐藏主按钮组,显示多帧移动按钮组
         enterMultiMoveMode() {
            this.showMultiMoveControls = true
            this.showMoveControls = false
            this.showControls = false
         },
         // 退出多帧移动模式:恢复主按钮组
         exitMultiMoveMode() {
            this.showMultiMoveControls = false
            this.showControls = true
         },
         // 对所有已编辑帧执行同一种单帧变换
         // action: 单帧变换方法名(shiftLeft/shiftUp/shiftDown/shiftRight/rotate180/flipHorizontal/flipVertical)
         applyTransformToAllFrames(action) {
            const currentIndex = this.fpsIndex
            // 以编辑区当前显示的数据(可能包含未保存的修改)作为当前帧的数据源
            let currentData = this.pixelData ? this.pixelData.slice() : this.pixelData
            for (let i = 0; i < this.fpsList.length; i++) {
               if (i === currentIndex) continue
               const frame = this.fpsList[i]
               if (frame === null || frame === undefined) continue
               // 复用单帧变换逻辑:临时把该帧作为编辑数据执行变换后写回
               this.pixelData = frame.slice()
               this[action]()
               this.$set(this.fpsList, i, this.pixelData.slice())
            }
            // 对当前正在编辑的帧执行相同变换,刷新画布显示
            this.pixelData = currentData.slice()
            this[action]()
            // 当前帧此前已保存过则同步写回,保证所有帧数据一致;未编辑过的帧(null)仍由"保存"按钮写入
            const stored = this.fpsList[currentIndex]
            if (stored !== null && stored !== undefined) {
               this.$set(this.fpsList, currentIndex, this.pixelData.slice())
            }
         },
         // 多帧移动:所有帧同时左移
         multiShiftLeft() {
            this.applyTransformToAllFrames('shiftLeft')
         },
         // 多帧移动:所有帧同时上移
         multiShiftUp() {
            this.applyTransformToAllFrames('shiftUp')
         },
         // 多帧移动:所有帧同时下移
         multiShiftDown() {
            this.applyTransformToAllFrames('shiftDown')
         },
         // 多帧移动:所有帧同时右移
         multiShiftRight() {
            this.applyTransformToAllFrames('shiftRight')
         },
         // 多帧移动:所有帧同时180度旋转
         multiRotate180() {
            this.applyTransformToAllFrames('rotate180')
         },
         // 多帧移动:所有帧同时左右镜像
         multiFlipHorizontal() {
            this.applyTransformToAllFrames('flipHorizontal')
         },
         // 多帧移动:所有帧同时上下镜像
         multiFlipVertical() {
            this.applyTransformToAllFrames('flipVertical')
         },
         toggleControls() {
            this.showControls = !this.showControls;
         },
@@ -760,6 +948,30 @@
            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.showMultiMoveControls = false
            this.showControls = false
         },
         // 复制当前帧
         copyFrame(index) {
            uni.showModal({
               title: '提示',
               content: '确定要复制当前帧吗？',
               success: (res) => {
                  if (res.confirm) {
                     const source = this.fpsList[index];
                     const copy = source ? [...source] : null;
                     this.fpsList.splice(index + 1, 0, copy);
                     this.total = this.fpsList.length;
                     uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 1500
                     });
                  }
               }
            });
         },
         // 屏幕规格
         changeSpec(e) {
@@ -1045,6 +1257,112 @@
            });
         },
         
         // 选择图片(相册或拍照)
         chooseImage() {
            uni.chooseImage({
               count: 1,
               sizeType: ['compressed'],
               sourceType: ['album', 'camera'],
               success: (res) => {
                  console.log('chooseImage', JSON.stringify(res))
                  const tempFilePath = res.tempFilePaths[0]
                  uni.showLoading({ title: '转换中', mask: true })
                  this.imageToDotMatrix(tempFilePath).then(pixelArray => {
                     this.pixelData = pixelArray
                     uni.hideLoading()
                  }).catch(err => {
                     uni.hideLoading()
                     console.error('图片转点阵失败：', err)
                     uni.showToast({ title: '图片转点阵失败', icon: 'none' })
                  })
               }
            })
         },
         // 将图片转成点数据,参考generateDotMatrix的采样逻辑
         imageToDotMatrix(imagePath) {
            return new Promise((resolve, reject) => {
               // 先获取图片信息,得到原始宽高用于按比例缩放
               uni.getImageInfo({
                  src: imagePath,
                  success: (imgInfo) => {
                     console.log('getImageInfo', JSON.stringify(imgInfo))
                     const imgW = imgInfo.width
                     const imgH = imgInfo.height
                     if (!imgW || !imgH) {
                        reject(new Error('图片尺寸异常'))
                        return
                     }
                     // 等比缩放,使图片完整包含在画布内并居中
                     const scale = Math.min(this.canvasWidth / imgW, this.canvasHeight / imgH)
                     const drawW = imgW * scale
                     const drawH = imgH * scale
                     const drawX = (this.canvasWidth - drawW) / 2
                     const drawY = (this.canvasHeight - drawH) / 2

                     ctx = uni.createCanvasContext('myCanvas', this)
                     ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
                     // 将缩放后的图片绘制到画布
                     ctx.drawImage(imagePath, drawX, drawY, drawW, drawH)
                     ctx.draw(false, () => {
                        setTimeout(() => {
                           uni.canvasGetImageData({
                              canvasId: 'myCanvas',
                              x: 0,
                              y: 0,
                              width: this.canvasWidth,
                              height: this.canvasHeight,
                              success: (res) => {
                                 console.log('canvasGetImageData', JSON.stringify(res))
                                 const imageData = res.data
                                 const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
                                 const pixelArray = new Array(this.height * colCount).fill('')
                                 const cellWidth = this.canvasWidth / colCount
                                 const cellHeight = this.canvasHeight / this.height
                                 if (!imageData) {
                                    reject(new Error('读取图片像素数据异常'))
                                    return
                                 }
                                 // 按格子采样,判断每个格子是否为前景(暗)像素
                                 for (let y = 0; y < this.height; y++) {
                                    for (let x = 0; x < colCount; x++) {
                                       let darkPixels = 0
                                       let totalPixels = 0
                                       for (let py = 0; py < cellHeight; py++) {
                                          for (let px = 0; px < cellWidth; px++) {
                                             const pixelY = Math.floor(y * cellHeight + py)
                                             const pixelX = Math.floor(x * cellWidth + px)
                                             const idx = (pixelY * this.canvasWidth + pixelX) * 4
                                             const r = imageData[idx]
                                             const g = imageData[idx + 1]
                                             const b = imageData[idx + 2]
                                             const a = imageData[idx + 3]
                                             const brightness = 0.3 * r + 0.59 * g + 0.11 * b
                                             if (brightness < 128 && a > 128) {
                                                darkPixels++
                                             }
                                             totalPixels++
                                          }
                                       }
                                       const isDark = darkPixels / totalPixels > 0.3
                                       const arrayIndex = y * colCount + x
                                       pixelArray[arrayIndex] = isDark ? this.color : ''
                                    }
                                 }
                                 resolve(pixelArray)
                              },
                              fail: (err) => {
                                 reject(err)
                              }
                           })
                        }, 1000)
                     })
                  },
                  fail: (err) => {
                     reject(err)
                  }
               })
            })
         },
         openPreview() {
            if (this.fpsList.length === 0 || this.fpsList.every(f => f === null || f === undefined)) {
               uni.showToast({
@@ -1200,20 +1518,17 @@
      justify-content: center;
      margin-bottom: 15rpx;
   }
   .color_list {
      width: 100%;
   .color_picker_wrapper {
      padding: 30rpx 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30rpx;
   }
   .color-picker-scroll {
      max-height: 90vh;
      box-sizing: border-box;
      padding: 50rpx;
	
      .color_item {
         width: 30rpx;
         height: 30rpx;
         border-radius: 5rpx;
      }
   }
   .color-picker-wrapper {
      //zoom: 0.5;
   }
   
   .action_btn {
@@ -1234,6 +1549,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;
@@ -1399,7 +1723,11 @@

         }

         .item {}
         .item {
            flex-direction:row;
            gap:20rpx;
            display:flex;
         }
      }

      .temp_item {