增加左移和右移

lefengyang

2026-08-17 6164b0c02518d3a8fb83a22dc7752f2a180714ad

 ledApp/pages/addTemplate/addTemplate.vue

@@ -124,7 +124,7 @@
      <!-- 动画弹出框 -->
      <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>
            <!-- 操作按钮 -->
@@ -136,7 +136,9 @@
            <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>
@@ -162,7 +164,11 @@
                     <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>
      
@@ -564,7 +570,7 @@
               const cellHeight = rect.height / this.height
               const colIndex = Math.floor(x / cellWidth)
               const rowIndex = Math.floor(y / cellHeight)
               console.log('colCount', colCount, 'colIndex', colIndex)
               console.log('colCount', colCount, 'rowIndex', rowIndex, 'colIndex', colIndex)
               if (
                  colIndex >= 0 && colIndex < colCount &&
                  rowIndex >= 0 && rowIndex < this.height
@@ -619,6 +625,28 @@
            // 将所有像素点设置为空字符串
            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;
         },
@@ -1094,12 +1122,18 @@
   }
   .controls {
      position: absolute;
      bottom: 10px;
      left: 130px;
      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;
@@ -1119,7 +1153,7 @@
         top: -9999px;
      }
      .pixel_grid {
         height: 85vh;
         height: 80vh;
         border-bottom: 1px solid #eee;
         display: grid;
         gap: 1px;