复制帧功能

lefengyang

2026-08-27 6ff51a2017246dd3a77e4005f77352e7a803e0de

 ledApp/pages/addTemplate/addTemplate.vue

@@ -31,6 +31,22 @@
               </uv-upload>
            </view>
         </view>
         <view class="temp_item" v-if="!isEditMode">
            <view class="title">
               预制动画
            </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+'（'+item.fpsTotal+'帧）'"
                     :name="item.name">
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
         <view class="temp_item">
            <view class="title">
               屏幕规格
@@ -91,13 +107,29 @@
            </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>

      <view class="footer_none"></view>
      <view class="footer_btn">
         <uv-button text="保存" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" @click="clickTempleteAdd()"></uv-button>
         <uv-button text="预览" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" customStyle="width:40vw;" @click="openPreview"></uv-button>
         <uv-button text="保存" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" customStyle="width:40vw;" @click="clickTempleteAdd()"></uv-button>
      </view>

      <!-- 预览浮层 -->
      <view class="preview_overlay" v-if="previewShow" @click.self="closePreview">
         <view class="preview_title">预览动画</view>
         <view class="preview_matrix">
            <view class="preview_grid" :style="{
               gridTemplateRows: 'repeat(' + previewHeight + ', auto)',
               gridTemplateColumns: 'repeat(' + previewWidth + ', auto)'
            }">
               <view class="preview_cell" v-for="(cell, idx) in currentPreviewFrame" :key="idx" :style="{ backgroundColor: cell || '#1a1a1a' }"></view>
            </view>
         </view>
         <view class="preview_close_btn" @click="closePreview">关闭</view>
      </view>

      <!-- 动画帧数 -->
@@ -109,30 +141,50 @@
      <!-- 动画弹出框 -->
      <uv-popup ref="popupAnimation" mode="center" @change="changeAnimation" :safeAreaInsetTop="false" :safeAreaInsetBottom="false" :zoom="false" duration="0">
         <view class="animation_pixel">
            <view class="back_btn" @click="popupAnimationClose">
            <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;">
               <uv-button type="success" :plain="true" :text="showControls ? '收回' : '操作'" @click="toggleControls"></uv-button>
            </view>

            <!-- 动画按钮 -->
            <view class="controls">
            <view class="controls" v-if="showControls">
               <uv-button type="primary" :plain="true" text="分辨率" @click="changeRatio()"></uv-button>
               <uv-button type="primary" :plain="true" text="颜色" @click="changeColor()"></uv-button>
               <uv-button type="primary" :plain="true" text="添加文字" @click="addText()"></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="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>
            
            <!-- 文字生成图形 -->
            <canvas canvas-id="myCanvas" id="myCanvas" class="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
            <!-- canvasWidth:{{ canvasWidth }} | canvasHeight:{{ canvasHeight }} -->

            <view class="pixel_grid" @touchstart.prevent="handleTouchStart" @touchmove.prevent="handleTouchMove"
               @touchend.prevent="handleTouchEnd" @touchcancel.prevent="handleTouchEnd" 
               :style="{
                  gridTemplateRows: `repeat(${height}, 1fr)`,
                  gridTemplateColumns: `repeat(${width}, 1fr)`
               }">
               <view class="pixel_cell" v-for="(cell, cellIndex) in pixelData" :key="cellIndex">
                  <view class="pixel_cell_item" :style="{ backgroundColor: cell }"></view>
            <!-- 点阵图 -->
            <scroll-view scroll-x @scroll="handleScroll">
               <view
                  class="pixel_grid"
                  @touchstart.prevent="handleTouchStart"
                  @touchmove.prevent="handleTouchMove"
                  @touchend.prevent="handleTouchEnd"
                  @touchcancel.prevent="handleTouchEnd"
                  :style="{
                     gridTemplateRows: `repeat(${height}, 1fr)`,
                     gridTemplateColumns: `repeat(${width * (modeVal == 2 ? 10 : 1)}, 1fr)`,
                     width: modeVal == 2 ? '1000vw': '100vw',
                  }">
                  <view class="pixel_cell" v-for="(cell, cellIndex) in pixelData" :key="cellIndex">
                     <view class="pixel_cell_item" :style="{ backgroundColor: cell }"></view>
                  </view>
               </view>
               <view style="height:20vh;"></view>
            </scroll-view>
            <view class="exit_btn">
               <uv-button type="success" :plain="true" text="退出" @click="popupAnimationClose"></uv-button>
            </view>
         </view>
      </uv-popup>
@@ -147,6 +199,33 @@
         </view>
      </uv-popup>
      
      <!-- 添加文字弹窗 -->
      <uv-popup ref="popupText" mode="center" round="10" :safeAreaInsetTop="false" :safeAreaInsetBottom="false" :zoom="false" duration="0">
         <view class="text_popup">
            <view class="text_popup_title">添加文字</view>
            <view class="text_popup_item">
               <view class="text_popup_label">文字</view>
               <view class="text_popup_input">
                  <uv-input placeholder="请输入文字" border="none" v-model="tempText" fontSize="16px"
                     customStyle="background: #ECEFF6;padding:8px 10px;border-radius: 6px;"></uv-input>
               </view>
            </view>
            <view class="text_popup_item">
               <view class="text_popup_label">类型</view>
               <view class="text_popup_type">
                  <uv-radio-group v-model="textType" placement="row" labelSize="16px" style="gap:10px;">
                     <uv-radio label="覆盖" name="overwrite"></uv-radio>
                     <uv-radio label="追加" name="append"></uv-radio>
                  </uv-radio-group>
               </view>
            </view>
            <view class="text_popup_btn">
               <uv-button type="info" text="取消" @click="closeTextPopup"></uv-button>
               <uv-button type="primary" text="确定" @click="confirmAddText" customStyle=""></uv-button>
            </view>
         </view>
      </uv-popup>
		
   </view>
</template>

@@ -154,7 +233,8 @@
   import {
      templeteAdd,
      templeteInfo,
      templeteEdit
      templeteEdit,
      templeteList
   } from '@/api/api.js'
   let ctx = null
   export default {
@@ -179,6 +259,10 @@
               {
                  name: '动画帧切换',
                  val: 1
               },
               {
                  name: '滚动动画',
                  val: 2
               }
            ],
            modeVal: 0,
@@ -234,8 +318,27 @@
            fpsList: [],
            tId: '',
            tempInfo:{},
            titleName: '新增模版'
				
            titleName: '新增模版',
            previewShow: false,
            previewFrames: [],
            previewFrameIndex: 0,
            previewTimer: null,
            previewWidth: 24,
            previewHeight: 12,
            showControls: false,
            scrollLeft: 0,
            textType: 'overwrite',
            tempText: '',
            presetList: [],
            selectedPreset: '',
            isEditMode: false,
         }
      },
      computed: {
         currentPreviewFrame() {
            if (this.previewFrames.length === 0) return [];
            const frame = this.previewFrames[this.previewFrameIndex % this.previewFrames.length];
            return frame || [];
         }
      },
      onLoad(opt) {
@@ -244,9 +347,12 @@
            this.tId = opt.id
            this.getTempleteInfo()
            this.titleName = '编辑模版'
            this.isEditMode = true
         }
         else{
            this.titleName = '新增模版'
            this.isEditMode = false
            this.getPresetList()
         }
      },
      onShow() {
@@ -254,23 +360,45 @@
      },
      onHide() {
         this.$refs.popupAnimation.close();
         this.stopPreviewAnimation();
         if (typeof plus !== 'undefined') {
            plus.screen.lockOrientation('portrait')
         }
      },
      onUnload() {
         this.stopPreviewAnimation();
         if (typeof plus !== 'undefined') {
            plus.screen.lockOrientation('portrait')
         }
      },
      methods: {
         // 跳转到编辑动画页面
         goToAnimaiton(index){
            this.fpsIndex = index
            uni.navigateTo({
              url: '/pages/animation/animation?index='+index
         getPresetList() {
            templeteList({
               userId: 1,
               pageNum: 1,
               pageSize: 99
            }).then(res => {
               console.log('预制动画列表-------', res.rows)
               if(res.code == 200){
                  this.presetList = res.rows || []
               }
            })
         },
         changePreset(val) {
            const preset = this.presetList.find(item => item.name === val)
            if (preset) {
               this.specVal = preset.screen
               this.modeVal = preset.mode
               this.total = preset.fpsTotal
               this.speed = preset.speed
               if (preset.fpsList) {
                  this.fpsList = JSON.parse(preset.fpsList)
               }
            }
         },
         handleScroll(e){
            this.scrollLeft = e.detail.scrollLeft
         },
         // 获取编辑详情
         getTempleteInfo(){
            templeteInfo(this.tId).then(res=>{
@@ -383,6 +511,15 @@
                  return this.mergeRowsToString(item)
               });
               this.fpsTotal = this.total
            } else if (this.modeVal == 2) {
               const scrollFrames = this.generateScrollFrames(this.fpsData[0]);
               const parsedData = scrollFrames.map(item => {
                  return this.toSnakeData(item, this.specWidth);
               });
               this.animationData = parsedData.map(item => {
                  return this.mergeRowsToString(item);
               });
               this.fpsTotal = scrollFrames.length;
            }
            console.log('animationData--------', this.animationData)
            
@@ -482,10 +619,10 @@
            console.log('ratio---', ratio[0]);
            this.height = Number(ratio[0]);
            this.width = Number(ratio[1]);
            this.canvasWidth = this.width * 10;
            this.canvasWidth = this.width * (this.modeVal == 2 ? 10 * 10 : 10);
            this.canvasHeight = this.height * 10;
            // 重新初始化一维数组
            this.pixelData = new Array(this.height * this.width).fill('')
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            this.pixelData = new Array(this.height * colCount).fill('')
            console.log('pixelData---', this.pixelData);
         },
         // 预先获取像素网格的位置信息
@@ -503,14 +640,16 @@
         getCellByTouch(touch, cb) {
            this.getGridRect(rect => {
               if (!rect) return
               const x = touch.clientX - rect.left
               const x = touch.clientX + this.scrollLeft
               const y = touch.clientY - rect.top
               const cellWidth = rect.width / this.width
               const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
               const cellWidth = rect.width / colCount
               const cellHeight = rect.height / this.height
               const colIndex = Math.floor(x / cellWidth)
               const rowIndex = Math.floor(y / cellHeight)
               //console.log('colCount', colCount, 'rowIndex', rowIndex, 'colIndex', colIndex, x, cellWidth)
               if (
                  colIndex >= 0 && colIndex < this.width &&
                  colIndex >= 0 && colIndex < colCount &&
                  rowIndex >= 0 && rowIndex < this.height
               ) {
                  cb({
@@ -550,7 +689,8 @@
         handleClick(rowIndex, colIndex) {
            console.log(rowIndex, colIndex)
            // 计算一维数组的索引
            const index = rowIndex * this.width + colIndex
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            const index = rowIndex * colCount + colIndex
            // 如果当前像素有颜色，则清除；如果没有颜色，则添加当前选择的颜色
            const currentColor = this.pixelData[index]
            const newColor = currentColor ? '' : this.color
@@ -558,8 +698,34 @@
         },
         clear() {
            ctx && ctx.clearRect(0, 0, 1000, 1000)
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            // 将所有像素点设置为空字符串
            this.pixelData = new Array(this.height * this.width).fill('')
            this.pixelData = new Array(this.height * colCount).fill('')
         },
         shiftLeft() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            for (let r = 0; r < this.height; r++) {
               const rowStart = r * colCount
               const row = this.pixelData.slice(rowStart, rowStart + colCount)
               const shifted = row.slice(1).concat(row.slice(0, 1))
               for (let c = 0; c < colCount; c++) {
                  this.$set(this.pixelData, rowStart + c, shifted[c])
               }
            }
         },
         shiftRight() {
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            for (let r = 0; r < this.height; r++) {
               const rowStart = r * colCount
               const row = this.pixelData.slice(rowStart, rowStart + colCount)
               const shifted = row.slice(colCount - 1).concat(row.slice(0, colCount - 1))
               for (let c = 0; c < colCount; c++) {
                  this.$set(this.pixelData, rowStart + c, shifted[c])
               }
            }
         },
         toggleControls() {
            this.showControls = !this.showControls;
         },
         // 模版动画弹出框
         changeAnimation(e){
@@ -580,10 +746,15 @@
         popupAnimationOpen(index){
            this.$refs.popupAnimation.open();
            this.fpsIndex = index
            this.canvasWidth = this.width * (this.modeVal == 2 ? 10 * 10 : 10);
            
            if(this.fpsList[this.fpsIndex] == null){
               console.log('第一次编辑-----null')
               this.pixelData = new Array(this.height * this.width).fill('')
               let pointCount = this.height * this.width
               if (this.modeVal == 2) {
                  pointCount *= 10
               }
               this.pixelData = new Array(pointCount).fill('')
            }else{
               console.log('已编辑过-----')
               this.pixelData = this.fpsList[this.fpsIndex]
@@ -592,7 +763,28 @@
         // 关闭模版动画
         popupAnimationClose(){
            this.$refs.popupAnimation.close();
            this.pixelData = new Array(this.height * this.width).fill('')
            const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
            this.pixelData = new Array(this.height * colCount).fill('')
         },
         // 复制当前帧
         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) {
@@ -617,6 +809,51 @@
            const rowStrings = rows.map(r => r.join('')) // 每行合并
            return rowStrings.join('') // 所有行合并
         },
         // 生成滚动动画帧数据（modeVal==2）
         // 从点阵图左侧开始，按照设定分辨率窗口提取动画帧，每帧左移3个像素，剩余全空时停止
         generateScrollFrames(data) {
            const cols = this.specWidth;
            const rows = this.specHeight;
            const totalCols = this.specWidth * 10;
            const step = 3;

            let grid = [];
            for (let r = 0; r < rows; r++) {
               grid.push(data.slice(r * totalCols, (r + 1) * totalCols));
            }

            const frames = [];
            let offset = 0;

            while (offset < totalCols) {
               let remainingEmpty = true;
               for (let r = 0; r < rows; r++) {
                  for (let c = offset; c < totalCols; c++) {
                     if (grid[r][c] !== '' && grid[r][c] !== '000000') {
                        remainingEmpty = false;
                        break;
                     }
                  }
                  if (!remainingEmpty) break;
               }

               if (remainingEmpty) break;

               let frame = [];
               for (let r = 0; r < rows; r++) {
                  let row = grid[r].slice(offset, offset + cols);
                  while (row.length < cols) {
                     row.push('000000');
                  }
                  frame = frame.concat(row);
               }

               frames.push(frame);
               offset += step;
            }

            return frames;
         },
         // 生成一帧动画其他帧数据
         generateFrames(data, frameCount = 24) {
            const cols = this.specWidth; // 每行 24 个
@@ -661,7 +898,8 @@
         changeMode(e) {
            this.fpsList = []
            this.fpsData = []
            if (e == 0) {
            this.gridRect = null
            if (e == 0 || e == 2) {
               this.total = 1
            } else {
               this.total = 2
@@ -734,26 +972,37 @@
            })
         },
         // 生成点阵数据
         generateDotMatrix(char) {
         generateDotMatrix(char, startCol = null) {
            return new Promise((resolve, reject) => {
         
               // 使用 uni-app 的 canvas context
               ctx = uni.createCanvasContext('myCanvas', this);
         
               // 设置字体样式
               ctx.setFontSize(this.canvasHeight * 0.9);
               ctx.setFontSize(this.canvasHeight);
               ctx.setFillStyle('#000')
               ctx.setTextAlign('center')
               ctx.setTextBaseline('middle')
               // 绘制文字
               // 计算文字位置
               // 水平居中
               const x = this.canvasWidth / 2;
               // 垂直居中，稍微向上偏移一点
               const y = this.canvasHeight / 2;
			
               // 绘制文字
               ctx.fillText(char, x, y);
               const y = this.canvasHeight / 2 + 10;
               const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
					
               if (startCol !== null) {
                  ctx.setTextAlign('left')
                  const cellWidth = this.canvasWidth / colCount;
                  const x = startCol * cellWidth;
                  ctx.fillText(char, x, y);
               } else if (this.modeVal == 2) {
                  // 滚动动画：文字靠左对齐
                  ctx.setTextAlign('left')
                  const x = 20;
                  ctx.fillText(char, x, y);
               } else {
                  // 其他模式：文字水平居中
                  ctx.setTextAlign('center')
                  const x = this.canvasWidth / 2;
                  ctx.fillText(char, x, y);
               }
         
               // 绘制到画布
               ctx.draw(false, () => {
@@ -765,18 +1014,19 @@
                     width: this.canvasWidth,
                     height: this.canvasHeight,
                     success: (res) => {
                        console.log(res)
                        console.log('canvasGetImageData', res)
                        const imageData = res.data;
                        // 生成一维数组
                        const pixelArray = new Array(this.height * this.width).fill('')
			
                        const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
                        const pixelArray = new Array(this.height * colCount).fill('')

                        // 计算每个格子的像素大小
                        const cellWidth = this.canvasWidth / this.width;
                        const cellWidth = this.canvasWidth / colCount;
                        const cellHeight = this.canvasHeight / this.height;
         
                        // 生成一维数组
                        for (let y = 0; y < this.height; y++) {
                           for (let x = 0; x < this.width; x++) {
                           for (let x = 0; x < colCount; x++) {
                              let blackPixels = 0;
                              let totalPixels = 0;
         
@@ -794,7 +1044,7 @@
         
                                    // 计算亮度
                                    const brightness = 0.3 * r + 0.59 * g + 0.11 * b;
			

                                    // 如果亮度小于阈值且透明度大于阈值，则认为是黑色
                                    if (brightness < 128 && a > 128) {
                                       blackPixels++;
@@ -802,11 +1052,11 @@
                                    totalPixels++;
                                 }
                              }
			

                              // 如果黑色像素占比超过阈值，则设置为当前选择的颜色
                              const isBlack = blackPixels / totalPixels > 0.3;
                              const arrayIndex = y * this.width + x;
                              pixelArray[arrayIndex] = isBlack ? this.color : ''; // 改为颜色值或空字符串
                              const arrayIndex = y * colCount + x;
                              pixelArray[arrayIndex] = isBlack ? this.color : '';
                           }
                        }
         
@@ -820,38 +1070,142 @@
            });
         },
         
         // 修改添加文字方法
         async addText() {
            uni.showModal({
               title: '添加文字',
               content: '',
               editable: true,
               placeholderText: '请输入文字',
               success: async (res) => {
                  if (res.confirm) {
                     const text = res.content;
                     if (text.length > 0) {
                        try {
                           // 生成点阵数据
                           const dotMatrix = await this.generateDotMatrix(text);
                           console.log('点阵数据：', dotMatrix);
                           this.pixelData = dotMatrix
                        } catch (error) {
                           console.error('生成点阵失败：', error);
                           uni.showToast({
                              title: '生成点阵失败',
                              icon: 'none'
                           });
                        }
                     } else {
                        uni.showToast({
                           title: '请输入文字',
                           icon: 'none'
                        });
                     }
         openPreview() {
            if (this.fpsList.length === 0 || this.fpsList.every(f => f === null || f === undefined)) {
               uni.showToast({
                  title: '请先编辑动画帧',
                  icon: 'none'
               });
               return;
            }
            this.previewWidth = this.modeVal == 2 ? this.specWidth : this.width;
            this.previewHeight = this.height;
            this.previewFrames = this.buildPreviewFrames();
            this.previewFrameIndex = 0;
            this.previewShow = true;
            this.$nextTick(() => {
               this.startPreviewAnimation();
            });
         },
         closePreview() {
            this.stopPreviewAnimation();
            this.previewShow = false;
         },
         buildPreviewFrames() {
            if (this.modeVal == 0) {
               const data = this.fpsList[0];
               if (!data) return [];
               return this.generatePreviewFrames(data, 24);
            } else if (this.modeVal == 2) {
               const data = this.fpsList[0];
               if (!data) return [];
               return this.generateScrollFrames(data);
            } else {
               const frames = [];
               for (let i = 0; i < this.total; i++) {
                  if (this.fpsList[i] && this.fpsList[i] !== null) {
                     frames.push(this.fpsList[i]);
                  } else {
                     frames.push(new Array(this.width * this.height).fill(''));
                  }
               }
            });
               return frames;
            }
         },
         generatePreviewFrames(data, frameCount) {
            const cols = this.width;
            const rows = this.height;
            const frames = [];
            let grid = [];
            for (let r = 0; r < rows; r++) {
               grid.push(data.slice(r * cols, (r + 1) * cols));
            }
            for (let f = 0; f < frameCount; f++) {
               let frame = [];
               for (let r = 0; r < rows; r++) {
                  let row = grid[r].slice();
                  let shifted = row.slice(f % cols).concat(row.slice(0, f % cols));
                  frame = frame.concat(shifted);
               }
               frames.push(frame);
            }
            return frames;
         },
         startPreviewAnimation() {
            this.stopPreviewAnimation();
            if (!this.speed || this.speed <= 0 || this.previewFrames.length === 0) return;
            const interval = this.speed * 2.8;
            console.log('interval', interval)
            this.previewTimer = setInterval(() => {
               this.previewFrameIndex = (this.previewFrameIndex + 1) % this.previewFrames.length;
            }, interval);
         },
         stopPreviewAnimation() {
            if (this.previewTimer) {
               clearInterval(this.previewTimer);
               this.previewTimer = null;
            }
         },
         addText() {
            this.tempText = '';
            this.textType = 'overwrite';
            this.$refs.popupText.open();
         },
         closeTextPopup() {
            this.$refs.popupText.close();
         },
         async confirmAddText() {
            const text = this.tempText;
            if (!text || text.length === 0) {
               uni.showToast({
                  title: '请输入文字',
                  icon: 'none'
               });
               return;
            }
				
            try {
               if (this.textType === 'overwrite') {
                  const dotMatrix = await this.generateDotMatrix(text);
                  this.pixelData = dotMatrix;
               } else {
                  const colCount = this.width * (this.modeVal == 2 ? 10 : 1);
                  const rightmostCol = this.findRightmostNonEmptyCol(colCount);
                  const startCol = rightmostCol === -1 ? 0 : rightmostCol + 2;
                  const dotMatrix = await this.generateDotMatrix(text, startCol);
                  this.mergePixelData(dotMatrix);
               }
               this.$refs.popupText.close();
            } catch (error) {
               console.error('生成点阵失败：', error);
               uni.showToast({
                  title: '生成点阵失败',
                  icon: 'none'
               });
            }
         },
         findRightmostNonEmptyCol(colCount) {
            for (let col = colCount - 1; col >= 0; col--) {
               let isEmpty = true;
               for (let row = 0; row < this.height; row++) {
                  const index = row * colCount + col;
                  if (this.pixelData[index] !== '' && this.pixelData[index] !== null && this.pixelData[index] !== undefined) {
                     isEmpty = false;
                     break;
                  }
               }
               if (!isEmpty) {
                  return col;
               }
            }
            return -1;
         },
         mergePixelData(dotMatrix) {
            for (let i = 0; i < dotMatrix.length; i++) {
               if (dotMatrix[i] !== '' && dotMatrix[i] !== null && dotMatrix[i] !== undefined) {
                  this.$set(this.pixelData, i, dotMatrix[i]);
               }
            }
         },
      }
   }
@@ -887,14 +1241,30 @@
      }
   }
   
   .controls {
   .action_btn {
      position: absolute;
      bottom: 10px;
      left: 50px;
      z-index: 10;
      background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
      padding: 12px 24px;
      border-radius: 30px;
      box-shadow: 0 4px 12px rgba(38, 141, 255, 0.4);
   }
   .controls {
      position: absolute;
      bottom: 10rpx;
      left: 100rpx;
      display: flex;
      gap: 20px;
      gap: 10rpx;
      z-index: 9;
   }
   .exit_btn{
      position: absolute;
      right: 30rpx;
      bottom: 10rpx;
      z-index: 9999;
   }
   .animation_pixel{
      width: 100vw;
      height: 100vh;
@@ -914,11 +1284,8 @@
         top: -9999px;
      }
      .pixel_grid {
         position: fixed;
         left: 0;
         top: var(--status-bar-height);
         right: 0;
         bottom: 0;
         height: 80vh;
         border-bottom: 1px solid #eee;
         display: grid;
         gap: 1px;
         box-sizing: border-box;
@@ -957,18 +1324,58 @@
      bottom: 0;
      background: #fff;
      padding: 30rpx 40rpx;
      display: flex;
      justify-content: space-between;
   }
   .footer_btn2 {

   .preview_overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      padding: 30rpx 40rpx;
      background: rgba(0, 0, 0, 0.85);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      justify-content: center;
      z-index: 9999;
   }
   .preview_title {
      color: #fff;
      font-size: 34rpx;
      margin-bottom: 40rpx;
   }
   .preview_matrix {
      background: #000;
      padding: 20rpx;
      border-radius: 16rpx;
      box-shadow: 0 0 30rpx rgba(0, 150, 255, 0.3);
   }
   .preview_grid {
      display: grid;
      gap: 2rpx;
      background: #111;
      padding: 4rpx;
      border-radius: 8rpx;
   }
   .preview_cell {
      width: 22rpx;
      height: 22rpx;
      border-radius: 50%;
      background: #1a1a1a;
      box-shadow: inset 0 0 4rpx rgba(0, 0, 0, 0.5);
   }
   .preview_close_btn {
      margin-top: 60rpx;
      width: 300rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
      border-radius: 40rpx;
      font-size: 30rpx;
   }

   .temp_btn {
@@ -1017,7 +1424,11 @@

         }

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

      .temp_item {
@@ -1059,4 +1470,49 @@
      background: url('/static/img/bg_2.jpg') no-repeat center top;
      background-size: 100% auto;
   }
	
   .text_popup {
      width: 600rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx 30rpx;
      box-sizing: border-box;
		
      .text_popup_title {
         font-size: 16px;
         font-weight: bold;
         color: #333;
         text-align: center;
         margin-bottom: 15px;
      }
		
      .text_popup_item {
         display: flex;
         align-items: center;
         margin-bottom: 15px;
			
         .text_popup_label {
            width: 50px;
            font-size: 16px;
            color: #666;
            flex-shrink: 0;
         }
			
         .text_popup_input {
            flex: 1;
            font-size: 16px;
         }
			
         .text_popup_type {
            flex: 1;
         }
      }
		
      .text_popup_btn {
         display: flex;
         margin-top: 20px;
         justify-content: center;
         gap: 20px;
      }
   }
</style>