多帧移动

lefengyang

3 days ago ae667df60092e883cb92f92f092ff878a2360107

多帧移动

 ledApp/pages/addTemplate/addTemplate.vue

@@ -145,20 +145,21 @@
                    <uv-icon name="arrow-leftward" color="#333" size="30"></uv-icon>
                </view>
                <!-- 主操作按钮(收回/操作) - 移动模式下隐藏 -->
                <view class="controls" style="left: 30rpx;" v-if="!showMoveControls">
                <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 && !showMoveControls">
                <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="enterMoveMode()"></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="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度旋转、左右镜像翻转、上下镜像翻转 -->
                <!-- 单帧移动按钮组:返回、左移、上移、下移、右移、180度旋转、左右镜像翻转、上下镜像翻转 -->
                <view class="controls" style="left: 30rpx;" v-if="showMoveControls">
                    <uv-button type="primary" :plain="true" text="返回" @click="exitMoveMode()"></uv-button>
                </view>
@@ -172,6 +173,20 @@
                    <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>
                <!-- canvasWidth:{{ canvasWidth }} | canvasHeight:{{ canvasHeight }} -->
@@ -342,7 +357,8 @@
                previewWidth: 24,
                previewHeight: 12,
                showControls: false,
            showMoveControls: false, // 移动模式按钮组开关
        showMoveControls: false, // 单帧移动模式按钮组开关
        showMultiMoveControls: false, // 多帧移动模式按钮组开关
            scrollLeft: 0,
                textType: 'overwrite',
                tempText: '',
@@ -804,6 +820,7 @@
            // 进入移动模式:隐藏主按钮组,显示移动按钮组
            enterMoveMode() {
                this.showMoveControls = true
                this.showMultiMoveControls = false
                this.showControls = false
            },
            // 退出移动模式:恢复主按钮组
@@ -811,6 +828,69 @@
                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;
            },
@@ -854,6 +934,7 @@
                this.pixelData = new Array(this.height * colCount).fill('')
                // 重置按钮组状态,下次打开回到主操作界面
                this.showMoveControls = false
                this.showMultiMoveControls = false
                this.showControls = false
            },
            // 复制当前帧