From a775b1e78446fb0ceef8f65af411422cc3213aa9 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Tue, 15 Sep 2026 15:12:22 +0800
Subject: [PATCH] 图片转点阵图
---
ledApp/pages/addTemplate/addTemplate.vue | 998 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 876 insertions(+), 122 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index 0a208de..40d8b14 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -31,6 +31,27 @@
</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"
+ label="无"
+ name="__none__">
+ </uv-radio>
+ <uv-radio
+ class="spec_radio"
+ v-for="(item, index) in presetList"
+ :key="index"
+ :label="'预制动画：'+item.name+'（'+item.fpsTotal+'帧）'"
+ :name="item.name">
+ </uv-radio>
+ </uv-radio-group>
+ </view>
+ </view>
<view class="temp_item">
<view class="title">
屏幕规格
@@ -91,13 +112,29 @@
</view>
<view class="item">
<uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
+ <uv-button text="复制" @click="copyFrame(index)" shape="circle" size="small" color="linear-gradient( 142deg, #FFB347 0%, #FF8C00 100%)"></uv-button>
</view>
</view>
</view>
<view class="footer_none"></view>
<view class="footer_btn">
- <uv-button text="保存" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" @click="clickTempleteAdd()"></uv-button>
+ <uv-button text="预览" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" customStyle="width:40vw;" @click="openPreview"></uv-button>
+ <uv-button text="保存" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)" shape="circle" customStyle="width:40vw;" @click="clickTempleteAdd()"></uv-button>
+ </view>
+
+ <!-- 预览浮层 -->
+ <view class="preview_overlay" v-if="previewShow" @click.self="closePreview">
+ <view class="preview_title">预览动画</view>
+ <view class="preview_matrix">
+ <view class="preview_grid" :style="{
+ gridTemplateRows: 'repeat(' + previewHeight + ', auto)',
+ gridTemplateColumns: 'repeat(' + previewWidth + ', auto)'
+ }">
+ <view class="preview_cell" v-for="(cell, idx) in currentPreviewFrame" :key="idx" :style="{ backgroundColor: cell || '#1a1a1a' }"></view>
+ </view>
+ </view>
+ <view class="preview_close_btn" @click="closePreview">关闭</view>
</view>
<!-- 动画帧数 -->
@@ -109,30 +146,78 @@
<!-- 动画弹出框 -->
<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>
- <!-- 动画按钮 -->
- <view class="controls">
- <uv-button type="primary" :plain="true" text="分辨率" @click="changeRatio()"></uv-button>
+ <!-- 主操作按钮(收回/操作) - 移动模式下隐藏 -->
+ <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 && !showMultiMoveControls">
<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="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>
+ <!-- canvasWidth:{{ canvasWidth }} | canvasHeight:{{ canvasHeight }} -->
- <view class="pixel_grid" @touchstart.prevent="handleTouchStart" @touchmove.prevent="handleTouchMove"
- @touchend.prevent="handleTouchEnd" @touchcancel.prevent="handleTouchEnd"
- :style="{
- gridTemplateRows: `repeat(${height}, 1fr)`,
- gridTemplateColumns: `repeat(${width}, 1fr)`
- }">
- <view class="pixel_cell" v-for="(cell, cellIndex) in pixelData" :key="cellIndex">
- <view class="pixel_cell_item" :style="{ backgroundColor: cell }"></view>
+ <!-- 点阵图 -->
+ <scroll-view scroll-x @scroll="handleScroll">
+ <view
+ class="pixel_grid"
+ @touchstart.prevent="handleTouchStart"
+ @touchmove.prevent="handleTouchMove"
+ @touchend.prevent="handleTouchEnd"
+ @touchcancel.prevent="handleTouchEnd"
+ :style="{
+ gridTemplateRows: `repeat(${height}, 1fr)`,
+ gridTemplateColumns: `repeat(${width * (modeVal == 2 ? 10 : 1)}, 1fr)`,
+ width: modeVal == 2 ? '1000vw': '100vw',
+ }">
+ <view class="pixel_cell" v-for="(cell, cellIndex) in pixelData" :key="cellIndex">
+ <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>
@@ -140,10 +225,47 @@
<!-- 分辨率 -->
<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>
+ <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>
+
+ <!-- 添加文字弹窗 -->
+ <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>
@@ -154,7 +276,8 @@
import {
templeteAdd,
templeteInfo,
- templeteEdit
+ templeteEdit,
+ templeteList
} from '@/api/api.js'
let ctx = null
export default {
@@ -179,6 +302,10 @@
{
name: '动画帧切换',
val: 1
+ },
+ {
+ name: '滚动动画',
+ val: 2
}
],
modeVal: 0,
@@ -220,22 +347,37 @@
// columnsRatio: [
// ['12*24']
// ],
- colorList: [
- '#FF0000',
- '#00FF00',
- '#0000FF',
- '#FFFF00',
- '#FFA500',
- '#800080',
- '#00FFFF',
- '#FFC0CB'
- ],
- fpsIndex: 0,
+ color: '#FF0000',
+ gridRect: null,
+ pickerOptions: {
+ width: 680,
+ },
fpsList: [],
tId: '',
tempInfo:{},
- titleName: '新增模版'
-
+ titleName: '新增模版',
+ previewShow: false,
+ previewFrames: [],
+ previewFrameIndex: 0,
+ previewTimer: null,
+ previewWidth: 24,
+ previewHeight: 12,
+ showControls: false,
+ showMoveControls: false, // 单帧移动模式按钮组开关
+ showMultiMoveControls: false, // 多帧移动模式按钮组开关
+ scrollLeft: 0,
+ textType: 'overwrite',
+ tempText: '',
+ presetList: [],
+ selectedPreset: '',
+ isEditMode: false,
+ }
+ },
+ computed: {
+ currentPreviewFrame() {
+ if (this.previewFrames.length === 0) return [];
+ const frame = this.previewFrames[this.previewFrameIndex % this.previewFrames.length];
+ return frame || [];
}
},
onLoad(opt) {
@@ -244,9 +386,12 @@
this.tId = opt.id
this.getTempleteInfo()
this.titleName = '编辑模版'
+ this.isEditMode = true
}
else{
this.titleName = '新增模版'
+ this.isEditMode = false
+ this.getPresetList()
}
},
onShow() {
@@ -254,23 +399,55 @@
},
onHide() {
this.$refs.popupAnimation.close();
+ this.stopPreviewAnimation();
if (typeof plus !== 'undefined') {
plus.screen.lockOrientation('portrait')
}
},
onUnload() {
+ this.stopPreviewAnimation();
if (typeof plus !== 'undefined') {
plus.screen.lockOrientation('portrait')
}
},
methods: {
- // 跳转到编辑动画页面
- goToAnimaiton(index){
- this.fpsIndex = index
- uni.navigateTo({
- url: '/pages/animation/animation?index='+index
+ getPresetList() {
+ templeteList({
+ userId: 1,
+ pageNum: 1,
+ pageSize: 99
+ }).then(res => {
+ console.log('预制动画列表-------', res.rows)
+ if(res.code == 200){
+ this.presetList = res.rows || []
+ }
})
},
+ 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
+ this.modeVal = preset.mode
+ this.total = preset.fpsTotal
+ this.speed = preset.speed
+ if (preset.fpsList) {
+ this.fpsList = JSON.parse(preset.fpsList)
+ }
+ }
+ },
+ handleScroll(e){
+ this.scrollLeft = e.detail.scrollLeft
+ },
// 获取编辑详情
getTempleteInfo(){
templeteInfo(this.tId).then(res=>{
@@ -383,6 +560,15 @@
return this.mergeRowsToString(item)
});
this.fpsTotal = this.total
+ } else if (this.modeVal == 2) {
+ const scrollFrames = this.generateScrollFrames(this.fpsData[0]);
+ const parsedData = scrollFrames.map(item => {
+ return this.toSnakeData(item, this.specWidth);
+ });
+ this.animationData = parsedData.map(item => {
+ return this.mergeRowsToString(item);
+ });
+ this.fpsTotal = scrollFrames.length;
}
console.log('animationData--------', this.animationData)
@@ -467,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() {
@@ -482,10 +670,10 @@
console.log('ratio---', ratio[0]);
this.height = Number(ratio[0]);
this.width = Number(ratio[1]);
- this.canvasWidth = this.width * 10;
+ this.canvasWidth = this.width * (this.modeVal == 2 ? 10 * 10 : 10);
this.canvasHeight = this.height * 10;
- // 重新初始化一维数组
- this.pixelData = new Array(this.height * this.width).fill('')
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+ this.pixelData = new Array(this.height * colCount).fill('')
console.log('pixelData---', this.pixelData);
},
// 预先获取像素网格的位置信息
@@ -503,14 +691,16 @@
getCellByTouch(touch, cb) {
this.getGridRect(rect => {
if (!rect) return
- const x = touch.clientX - rect.left
+ const x = touch.clientX + this.scrollLeft
const y = touch.clientY - rect.top
- const cellWidth = rect.width / this.width
+ 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, 'rowIndex', rowIndex, 'colIndex', colIndex, x, cellWidth)
if (
- colIndex >= 0 && colIndex < this.width &&
+ colIndex >= 0 && colIndex < colCount &&
rowIndex >= 0 && rowIndex < this.height
) {
cb({
@@ -550,7 +740,8 @@
handleClick(rowIndex, colIndex) {
console.log(rowIndex, colIndex)
// 计算一维数组的索引
- const index = rowIndex * this.width + colIndex
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+ const index = rowIndex * colCount + colIndex
// 如果当前像素有颜色，则清除；如果没有颜色，则添加当前选择的颜色
const currentColor = this.pixelData[index]
const newColor = currentColor ? '' : this.color
@@ -558,8 +749,166 @@
},
clear() {
ctx && ctx.clearRect(0, 0, 1000, 1000)
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
// 将所有像素点设置为空字符串
- this.pixelData = new Array(this.height * this.width).fill('')
+ 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])
+ }
+ }
+ },
+ 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;
},
// 模版动画弹出框
changeAnimation(e){
@@ -580,10 +929,15 @@
popupAnimationOpen(index){
this.$refs.popupAnimation.open();
this.fpsIndex = index
+ this.canvasWidth = this.width * (this.modeVal == 2 ? 10 * 10 : 10);
if(this.fpsList[this.fpsIndex] == null){
console.log('第一次编辑-----null')
- this.pixelData = new Array(this.height * this.width).fill('')
+ let pointCount = this.height * this.width
+ if (this.modeVal == 2) {
+ pointCount *= 10
+ }
+ this.pixelData = new Array(pointCount).fill('')
}else{
console.log('已编辑过-----')
this.pixelData = this.fpsList[this.fpsIndex]
@@ -592,7 +946,32 @@
// 关闭模版动画
popupAnimationClose(){
this.$refs.popupAnimation.close();
- this.pixelData = new Array(this.height * this.width).fill('')
+ 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) {
+ uni.showModal({
+ title: '提示',
+ content: '确定要复制当前帧吗？',
+ success: (res) => {
+ if (res.confirm) {
+ const source = this.fpsList[index];
+ const copy = source ? [...source] : null;
+ this.fpsList.splice(index + 1, 0, copy);
+ this.total = this.fpsList.length;
+ uni.showToast({
+ title: '复制成功',
+ icon: 'success',
+ duration: 1500
+ });
+ }
+ }
+ });
},
// 屏幕规格
changeSpec(e) {
@@ -617,6 +996,51 @@
const rowStrings = rows.map(r => r.join('')) // 每行合并
return rowStrings.join('') // 所有行合并
},
+ // 生成滚动动画帧数据（modeVal==2）
+ // 从点阵图左侧开始，按照设定分辨率窗口提取动画帧，每帧左移3个像素，剩余全空时停止
+ generateScrollFrames(data) {
+ const cols = this.specWidth;
+ const rows = this.specHeight;
+ const totalCols = this.specWidth * 10;
+ const step = 3;
+
+ let grid = [];
+ for (let r = 0; r < rows; r++) {
+ grid.push(data.slice(r * totalCols, (r + 1) * totalCols));
+ }
+
+ const frames = [];
+ let offset = 0;
+
+ while (offset < totalCols) {
+ let remainingEmpty = true;
+ for (let r = 0; r < rows; r++) {
+ for (let c = offset; c < totalCols; c++) {
+ if (grid[r][c] !== '' && grid[r][c] !== '000000') {
+ remainingEmpty = false;
+ break;
+ }
+ }
+ if (!remainingEmpty) break;
+ }
+
+ if (remainingEmpty) break;
+
+ let frame = [];
+ for (let r = 0; r < rows; r++) {
+ let row = grid[r].slice(offset, offset + cols);
+ while (row.length < cols) {
+ row.push('000000');
+ }
+ frame = frame.concat(row);
+ }
+
+ frames.push(frame);
+ offset += step;
+ }
+
+ return frames;
+ },
// 生成一帧动画其他帧数据
generateFrames(data, frameCount = 24) {
const cols = this.specWidth; // 每行 24 个
@@ -661,7 +1085,8 @@
changeMode(e) {
this.fpsList = []
this.fpsData = []
- if (e == 0) {
+ this.gridRect = null
+ if (e == 0 || e == 2) {
this.total = 1
} else {
this.total = 2
@@ -734,26 +1159,37 @@
})
},
// 生成点阵数据
- generateDotMatrix(char) {
+ generateDotMatrix(char, startCol = null) {
return new Promise((resolve, reject) => {
// 使用 uni-app 的 canvas context
ctx = uni.createCanvasContext('myCanvas', this);
// 设置字体样式
- ctx.setFontSize(this.canvasHeight * 0.9);
+ ctx.setFontSize(this.canvasHeight);
ctx.setFillStyle('#000')
- ctx.setTextAlign('center')
ctx.setTextBaseline('middle')
// 绘制文字
- // 计算文字位置
- // 水平居中
- const x = this.canvasWidth / 2;
// 垂直居中，稍微向上偏移一点
- const y = this.canvasHeight / 2;
-
- // 绘制文字
- ctx.fillText(char, x, y);
+ const y = this.canvasHeight / 2 + 10;
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+
+ 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;
+ ctx.fillText(char, x, y);
+ } else {
+ // 其他模式：文字水平居中
+ ctx.setTextAlign('center')
+ const x = this.canvasWidth / 2;
+ ctx.fillText(char, x, y);
+ }
// 绘制到画布
ctx.draw(false, () => {
@@ -765,18 +1201,19 @@
width: this.canvasWidth,
height: this.canvasHeight,
success: (res) => {
- console.log(res)
+ console.log('canvasGetImageData', res)
const imageData = res.data;
// 生成一维数组
- const pixelArray = new Array(this.height * this.width).fill('')
-
+ const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
+ const pixelArray = new Array(this.height * colCount).fill('')
+
// 计算每个格子的像素大小
- const cellWidth = this.canvasWidth / this.width;
+ const cellWidth = this.canvasWidth / colCount;
const cellHeight = this.canvasHeight / this.height;
// 生成一维数组
for (let y = 0; y < this.height; y++) {
- for (let x = 0; x < this.width; x++) {
+ for (let x = 0; x < colCount; x++) {
let blackPixels = 0;
let totalPixels = 0;
@@ -794,7 +1231,7 @@
// 计算亮度
const brightness = 0.3 * r + 0.59 * g + 0.11 * b;
-
+
// 如果亮度小于阈值且透明度大于阈值，则认为是黑色
if (brightness < 128 && a > 128) {
blackPixels++;
@@ -802,11 +1239,11 @@
totalPixels++;
}
}
-
+
// 如果黑色像素占比超过阈值，则设置为当前选择的颜色
const isBlack = blackPixels / totalPixels > 0.3;
- const arrayIndex = y * this.width + x;
- pixelArray[arrayIndex] = isBlack ? this.color : ''; // 改为颜色值或空字符串
+ const arrayIndex = y * colCount + x;
+ pixelArray[arrayIndex] = isBlack ? this.color : '';
}
}
@@ -820,38 +1257,247 @@
});
},
- // 修改添加文字方法
- 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'
- });
+ // 选择图片(相册或拍照)
+ 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) => {
+ 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({
+ title: '请先编辑动画帧',
+ icon: 'none'
+ });
+ return;
+ }
+ this.previewWidth = this.modeVal == 2 ? this.specWidth : this.width;
+ this.previewHeight = this.height;
+ this.previewFrames = this.buildPreviewFrames();
+ this.previewFrameIndex = 0;
+ this.previewShow = true;
+ this.$nextTick(() => {
+ this.startPreviewAnimation();
+ });
+ },
+ closePreview() {
+ this.stopPreviewAnimation();
+ this.previewShow = false;
+ },
+ buildPreviewFrames() {
+ if (this.modeVal == 0) {
+ const data = this.fpsList[0];
+ if (!data) return [];
+ return this.generatePreviewFrames(data, 24);
+ } else if (this.modeVal == 2) {
+ const data = this.fpsList[0];
+ if (!data) return [];
+ return this.generateScrollFrames(data);
+ } else {
+ const frames = [];
+ for (let i = 0; i < this.total; i++) {
+ if (this.fpsList[i] && this.fpsList[i] !== null) {
+ frames.push(this.fpsList[i]);
+ } else {
+ frames.push(new Array(this.width * this.height).fill(''));
}
}
- });
+ return frames;
+ }
+ },
+ generatePreviewFrames(data, frameCount) {
+ const cols = this.width;
+ const rows = this.height;
+ const frames = [];
+ let grid = [];
+ for (let r = 0; r < rows; r++) {
+ grid.push(data.slice(r * cols, (r + 1) * cols));
+ }
+ for (let f = 0; f < frameCount; f++) {
+ let frame = [];
+ for (let r = 0; r < rows; r++) {
+ let row = grid[r].slice();
+ let shifted = row.slice(f % cols).concat(row.slice(0, f % cols));
+ frame = frame.concat(shifted);
+ }
+ frames.push(frame);
+ }
+ return frames;
+ },
+ startPreviewAnimation() {
+ this.stopPreviewAnimation();
+ if (!this.speed || this.speed <= 0 || this.previewFrames.length === 0) return;
+ const interval = this.speed * 2.8;
+ console.log('interval', interval)
+ this.previewTimer = setInterval(() => {
+ this.previewFrameIndex = (this.previewFrameIndex + 1) % this.previewFrames.length;
+ }, interval);
+ },
+ stopPreviewAnimation() {
+ if (this.previewTimer) {
+ clearInterval(this.previewTimer);
+ this.previewTimer = null;
+ }
+ },
+ 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]);
+ }
+ }
},
}
}
@@ -871,30 +1517,52 @@
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;
}
- .controls {
+ .action_btn {
position: absolute;
bottom: 10px;
left: 50px;
+ z-index: 10;
+ background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
+ padding: 12px 24px;
+ border-radius: 30px;
+ box-shadow: 0 4px 12px rgba(38, 141, 255, 0.4);
+ }
+ .controls {
+ position: absolute;
+ bottom: 10rpx;
+ left: 100rpx;
display: flex;
- gap: 20px;
+ 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;
+ bottom: 10rpx;
+ z-index: 9999;
+ }
.animation_pixel{
width: 100vw;
height: 100vh;
@@ -914,11 +1582,8 @@
top: -9999px;
}
.pixel_grid {
- position: fixed;
- left: 0;
- top: var(--status-bar-height);
- right: 0;
- bottom: 0;
+ height: 80vh;
+ border-bottom: 1px solid #eee;
display: grid;
gap: 1px;
box-sizing: border-box;
@@ -957,18 +1622,58 @@
bottom: 0;
background: #fff;
padding: 30rpx 40rpx;
+ display: flex;
+ justify-content: space-between;
}
- .footer_btn2 {
+
+ .preview_overlay {
position: fixed;
+ top: 0;
left: 0;
right: 0;
bottom: 0;
- background: #fff;
- padding: 30rpx 40rpx;
+ background: rgba(0, 0, 0, 0.85);
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: space-between;
- box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+ justify-content: center;
+ z-index: 9999;
+ }
+ .preview_title {
+ color: #fff;
+ font-size: 34rpx;
+ margin-bottom: 40rpx;
+ }
+ .preview_matrix {
+ background: #000;
+ padding: 20rpx;
+ border-radius: 16rpx;
+ box-shadow: 0 0 30rpx rgba(0, 150, 255, 0.3);
+ }
+ .preview_grid {
+ display: grid;
+ gap: 2rpx;
+ background: #111;
+ padding: 4rpx;
+ border-radius: 8rpx;
+ }
+ .preview_cell {
+ width: 22rpx;
+ height: 22rpx;
+ border-radius: 50%;
+ background: #1a1a1a;
+ box-shadow: inset 0 0 4rpx rgba(0, 0, 0, 0.5);
+ }
+ .preview_close_btn {
+ margin-top: 60rpx;
+ width: 300rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+ text-align: center;
+ color: #fff;
+ background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
+ border-radius: 40rpx;
+ font-size: 30rpx;
}
.temp_btn {
@@ -1017,7 +1722,11 @@
}
- .item {}
+ .item {
+ flex-direction:row;
+ gap:20rpx;
+ display:flex;
+ }
}
.temp_item {
@@ -1059,4 +1768,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