From 1401779a92bb5fede53ca74d4fceacecb8c4c462 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Thu, 20 Aug 2026 02:06:10 +0800
Subject: [PATCH] 预制动画功能
---
ledApp/pages/addTemplate/addTemplate.vue | 251 ++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 213 insertions(+), 38 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index 9b9bbc7..3f36ce9 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -31,6 +31,18 @@
</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"
+ :name="item.name">
+ </uv-radio>
+ </uv-radio-group>
+ </view>
+ </view>
<view class="temp_item">
<view class="title">
屏幕规格
@@ -129,14 +141,16 @@
</view>
<!-- 操作按钮 -->
<view class="controls" style="left: 30rpx;">
- <uv-button type="success" :plain="true" :text="showControls ? '返回' : '操作'" @click="toggleControls"></uv-button>
+ <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>
<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>
@@ -180,6 +194,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>
@@ -187,7 +228,8 @@
import {
templeteAdd,
templeteInfo,
- templeteEdit
+ templeteEdit,
+ templeteList
} from '@/api/api.js'
let ctx = null
export default {
@@ -280,6 +322,11 @@
previewHeight: 12,
showControls: false,
scrollLeft: 0,
+ textType: 'overwrite',
+ tempText: '',
+ presetList: [],
+ selectedPreset: '',
+ isEditMode: false,
}
},
computed: {
@@ -295,9 +342,12 @@
this.tId = opt.id
this.getTempleteInfo()
this.titleName = '编辑模版'
+ this.isEditMode = true
}
else{
this.titleName = '新增模版'
+ this.isEditMode = false
+ this.getPresetList()
}
},
onShow() {
@@ -317,6 +367,30 @@
}
},
methods: {
+ 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.cycle
+ this.speed = preset.speed
+ if (preset.fpsList) {
+ this.fpsList = JSON.parse(preset.fpsList)
+ }
+ }
+ },
handleScroll(e){
this.scrollLeft = e.detail.scrollLeft
},
@@ -561,14 +635,14 @@
getCellByTouch(touch, cb) {
this.getGridRect(rect => {
if (!rect) return
- const x = touch.clientX - rect.left + this.scrollLeft
+ const x = touch.clientX + this.scrollLeft
const y = touch.clientY - rect.top
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, 'colIndex', colIndex)
+ //console.log('colCount', colCount, 'rowIndex', rowIndex, 'colIndex', colIndex, x, cellWidth)
if (
colIndex >= 0 && colIndex < colCount &&
rowIndex >= 0 && rowIndex < this.height
@@ -623,6 +697,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;
},
@@ -851,7 +947,7 @@
})
},
// 生成点阵数据
- generateDotMatrix(char) {
+ generateDotMatrix(char, startCol = null) {
return new Promise((resolve, reject) => {
// 使用 uni-app 的 canvas context
@@ -864,8 +960,14 @@
// 绘制文字
// 垂直居中，稍微向上偏移一点
const y = this.canvasHeight / 2 + 10;
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
- if (this.modeVal == 2) {
+ 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;
@@ -1019,38 +1121,66 @@
this.previewTimer = null;
}
},
- // 修改添加文字方法
- 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'
- });
- }
+ 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]);
+ }
+ }
},
}
}
@@ -1099,7 +1229,7 @@
.controls {
position: absolute;
bottom: 10rpx;
- left: 110rpx;
+ left: 100rpx;
display: flex;
gap: 10rpx;
z-index: 9;
@@ -1311,4 +1441,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>
\ No newline at end of file
--
Gitblit v1.10.0