From 5b125d5dfcb81014ca20d13e3dfd00b5ba3d0542 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Tue, 15 Sep 2026 15:33:02 +0800
Subject: [PATCH] console.log
---
ledApp/pages/addTemplate/addTemplate.vue | 373 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 336 insertions(+), 37 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index cb3dbf1..2edb378 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -39,6 +39,11 @@
<uv-radio-group v-model="selectedPreset" placement="column" @change="changePreset" labelSize="26rpx">
<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+'帧）'"
@@ -144,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>
@@ -192,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>
<!-- 添加文字弹窗 -->
@@ -304,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:{},
@@ -326,7 +363,9 @@
previewWidth: 24,
previewHeight: 12,
showControls: false,
- scrollLeft: 0,
+ showMoveControls: false, // 单帧移动模式按钮组开关
+ showMultiMoveControls: false, // 多帧移动模式按钮组开关
+ scrollLeft: 0,
textType: 'overwrite',
tempText: '',
presetList: [],
@@ -385,6 +424,16 @@
})
},
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
@@ -604,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() {
@@ -724,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;
},
@@ -765,6 +948,10 @@
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) {
@@ -1070,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({
@@ -1225,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 {
@@ -1259,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;
--
Gitblit v1.10.0