From 73acf7e66ac578d727a5ed5f33c8affa5f22171e Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Tue, 01 Sep 2026 10:58:48 +0800
Subject: [PATCH] fix
---
ledApp/pages/addTemplate/addTemplate.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 103 insertions(+), 11 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index e846fb3..838a0f0 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/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;
--
Gitblit v1.10.0