<template>
|
<view class="page_bg">
|
|
<uv-navbar :title="titleName" :autoBack="true" :placeholder="true" leftIconColor="#fff" bgColor="rgba(0,0,0,0)" titleStyle="color:#fff"></uv-navbar>
|
|
<view class="temp">
|
<view class="temp_item">
|
<view class="title">
|
模版名称
|
</view>
|
<view class="item">
|
<uv-input placeholder="请输入名称" border="none" v-model="tempName" fontSize="27rpx"
|
customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
封面图片
|
</view>
|
<view class="item item_pic">
|
<uv-upload :fileList="fileList1" name="1" :maxCount="1" width="200rpx" height="200rpx"
|
:previewFullImage="false" @afterRead="afterRead" @delete="deletePic">
|
<!-- <image v-if="fileList1.length != 0"
|
:src="baseURL + fileList1[0]?.url"
|
mode="aspectFill"
|
style="width: 200rpx;height: 200rpx;"
|
></image>
|
<view class="item_pic_btn" v-else>
|
<uv-icon name="camera-fill" color="#ccc" size="60rpx"></uv-icon>
|
</view> -->
|
</uv-upload>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
屏幕规格
|
</view>
|
<view class="item">
|
<uv-radio-group v-model="specVal" placement="column" @change="changeSpec" labelSize="26rpx">
|
<uv-radio class="spec_radio" v-for="(item, index) in specList" :key="index" :label="item.name"
|
:name="item.name">
|
</uv-radio>
|
</uv-radio-group>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
动画方式
|
</view>
|
<view class="item">
|
<uv-radio-group v-model="modeVal" placement="column" @change="changeMode" labelSize="26rpx">
|
<uv-radio class="spec_radio" v-for="(item, index) in modeList" :key="index" :label="item.name"
|
:name="item.val">
|
</uv-radio>
|
</uv-radio-group>
|
</view>
|
</view>
|
|
<view class="temp_item">
|
<view class="title">
|
动画帧数
|
</view>
|
<view class="item" @click="clickTotal">
|
<uv-input placeholder="请输入" readonly border="none" v-model="total" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx"
|
customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<view class="temp_item">
|
<view class="title">
|
动画速度
|
</view>
|
<view class="item" @click="clickSpeed">
|
<uv-input placeholder="请输入" readonly border="none" v-model="speed" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx"
|
customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view>
|
<!-- <view class="temp_item" v-if="modeVal == 1">
|
<view class="title">
|
循环次数
|
</view>
|
<view class="item">
|
<uv-input placeholder="请输入" readonly border="none" v-model="cycle" suffixIcon="arrow-right"
|
suffixIconStyle="color: #bbb" fontSize="26rpx" customStyle="background: #ECEFF6;padding:18rpx 20rpx;border-radius: 10rpx;"></uv-input>
|
</view>
|
</view> -->
|
<view class="temp_item1" v-for="(item,index) in total" :key="index">
|
<view class="title">
|
动画第{{item}}帧
|
</view>
|
<view class="item">
|
<uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 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" 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>
|
|
<!-- 动画帧数 -->
|
<uv-picker ref="pickerTotal" :columns="columnsTotal" @confirm="confirmTotal"></uv-picker>
|
|
<!-- 动画速度 -->
|
<uv-picker ref="pickerSpeed" :columns="columnsSpeed" @confirm="confirmSpeed"></uv-picker>
|
|
<!-- 动画弹出框 -->
|
<uv-popup ref="popupAnimation" mode="center" @change="changeAnimation" :safeAreaInsetTop="false" :safeAreaInsetBottom="false" :zoom="false" duration="0">
|
<view class="animation_pixel">
|
<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;">
|
<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="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>
|
|
<!-- 文字生成图形 -->
|
<canvas canvas-id="myCanvas" id="myCanvas" class="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
|
<!-- canvasWidth:{{ canvasWidth }} | canvasHeight:{{ canvasHeight }} -->
|
|
<!-- 点阵图 -->
|
<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>
|
|
<!-- 分辨率 -->
|
<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>
|
</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>
|
|
<script>
|
import {
|
templeteAdd,
|
templeteInfo,
|
templeteEdit
|
} from '@/api/api.js'
|
let ctx = null
|
export default {
|
data() {
|
return {
|
tempName: '',
|
pic: '',
|
specList: [{
|
name: '12*24'
|
}, {
|
name: '16*24'
|
}, {
|
name: '18*24'
|
}],
|
specVal: '12*24',
|
specWidth: 24,
|
specHeight: 12,
|
modeList: [{
|
name: '单个动画帧',
|
val: 0
|
},
|
{
|
name: '动画帧切换',
|
val: 1
|
},
|
{
|
name: '滚动动画',
|
val: 2
|
}
|
],
|
modeVal: 0,
|
columnsTotal: [
|
[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
|
28, 29, 30
|
]
|
],
|
total: 1, //动画总帧数
|
columnsSpeed: [
|
[10, 20, 30, 40, 50, 60, 70, 80, 90]
|
],
|
speed: 10,
|
cycle: 1,
|
fpsData: [],
|
fpsIndex: 1, //第几帧
|
fpsIds: [],
|
|
baseURL: '',
|
fileList1: [],
|
animationData: [],
|
fpsTotal: 1,
|
|
|
|
// 模版动画
|
pixelData: [],
|
canvasData: [],
|
canvasWidth: 240,
|
canvasHeight: 120,
|
width: 24,
|
height: 12,
|
color: '#FF0000',
|
gridRect: null, // 存储像素网格的位置信息
|
lastCell: null, // 防止重复绘制
|
columnsRatio: [
|
['12*24', '16*32', '24*48', '32*64', '40*80']
|
],
|
// columnsRatio: [
|
// ['12*24']
|
// ],
|
colorList: [
|
'#FF0000',
|
'#00FF00',
|
'#0000FF',
|
'#FFFF00',
|
'#FFA500',
|
'#800080',
|
'#00FFFF',
|
'#FFC0CB'
|
],
|
fpsIndex: 0,
|
fpsList: [],
|
tId: '',
|
tempInfo:{},
|
titleName: '新增模版',
|
previewShow: false,
|
previewFrames: [],
|
previewFrameIndex: 0,
|
previewTimer: null,
|
previewWidth: 24,
|
previewHeight: 12,
|
showControls: false,
|
scrollLeft: 0,
|
textType: 'overwrite',
|
tempText: '',
|
}
|
},
|
computed: {
|
currentPreviewFrame() {
|
if (this.previewFrames.length === 0) return [];
|
const frame = this.previewFrames[this.previewFrameIndex % this.previewFrames.length];
|
return frame || [];
|
}
|
},
|
onLoad(opt) {
|
this.baseURL = uni.$uv.http.config.baseURL
|
if(opt.id){
|
this.tId = opt.id
|
this.getTempleteInfo()
|
this.titleName = '编辑模版'
|
}
|
else{
|
this.titleName = '新增模版'
|
}
|
},
|
onShow() {
|
|
},
|
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: {
|
handleScroll(e){
|
this.scrollLeft = e.detail.scrollLeft
|
},
|
// 获取编辑详情
|
getTempleteInfo(){
|
templeteInfo(this.tId).then(res=>{
|
console.log('获取编辑详情-------',res)
|
if(res.code == 200){
|
this.tempInfo = res.data
|
this.tempName = this.tempInfo.name
|
this.fileList1.push({
|
url: this.baseURL + this.tempInfo.pic
|
})
|
|
this.specVal = this.tempInfo.screen
|
this.modeVal = this.tempInfo.mode
|
|
this.total = this.tempInfo.cycle
|
this.fpsTotal = this.tempInfo.fpsTotal
|
this.speed = this.tempInfo.speed
|
|
this.fpsList = JSON.parse(this.tempInfo.fpsList)
|
|
}
|
else{
|
uni.showToast({
|
title: res.msg,
|
duration: 2000,
|
icon: 'none'
|
});
|
}
|
})
|
},
|
// 添加模版提交接口
|
clickTempleteAdd() {
|
|
if (!this.tempName) {
|
uni.showToast({
|
title: '请输入模版名称',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
if (this.fileList1.length == 0) {
|
uni.showToast({
|
title: '请上传封面图片',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
|
if (this.fpsList.length == 0) {
|
uni.showToast({
|
title: '请编辑动画帧',
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
} else {
|
for (let i = 0; i < this.fpsList.length; i++) {
|
if (this.fpsList[i] === null) {
|
uni.showToast({
|
title: `请编辑第 ${i+1} 个动画帧`,
|
duration: 2000,
|
icon: 'none'
|
});
|
return
|
}
|
}
|
}
|
console.log('this.fpsList=========',this.fpsList)
|
|
uni.showLoading({
|
title: '添加中',
|
mask: true
|
});
|
|
|
// 遍历二维数组
|
this.fpsData = this.fpsList.map(inner =>
|
inner.map(item => {
|
if (item === "") {
|
return "000000"; // 空的改成000000
|
} else if (item.includes("#")) {
|
return item.replace("#", ""); // 去掉#
|
} else {
|
return item; // 保持原样
|
}
|
})
|
);
|
|
console.log('this.fpsData=========',this.fpsData)
|
|
// 动画方式
|
if (this.modeVal == 0) { //一帧动画
|
let frames = this.generateFrames(this.fpsData[0], 24);
|
const parsedData = frames.map(item => {
|
return this.toSnakeData(item, this.specWidth)
|
});
|
this.animationData = parsedData.map(item => {
|
return this.mergeRowsToString(item)
|
});
|
this.fpsTotal = 24
|
} else if (this.modeVal == 1) {
|
console.log('modeVal--------1')
|
const parsedData = this.fpsData.map(item => {
|
return this.toSnakeData(item, this.specWidth)
|
});
|
console.log('modeVal--------1',parsedData)
|
this.animationData = parsedData.map(item => {
|
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)
|
|
// 判断this.fileList1[0].url里是否有 this.baseURL
|
if (this.fileList1[0].url.includes(this.baseURL)) {
|
this.fileList1[0].url = this.fileList1[0].url.replace(this.baseURL, "");
|
}
|
|
console.log('url----',this.fileList1[0].url);
|
|
// 判断如果有id就编辑
|
if(this.tId){
|
const putData = {
|
id: this.tId,
|
name: this.tempName,
|
userId: uni.getStorageSync('userId'),
|
screen: this.specVal, //屏幕
|
mode: this.modeVal,
|
cycle: this.total,
|
fpsTotal: this.fpsTotal, //总帧数
|
speed: this.speed, //速度
|
pic: this.fileList1[0].url,
|
fpsData: JSON.stringify(this.animationData),
|
fpsList: JSON.stringify(this.fpsList)
|
}
|
console.log('putData-----', putData)
|
templeteEdit(putData).then(res => {
|
console.log('编辑动画模版', res)
|
uni.hideLoading();
|
if (res.code == 200) {
|
uni.navigateBack({
|
delta: 1
|
});
|
} else {
|
uni.showToast({
|
title: res.msg,
|
duration: 1500,
|
icon: 'none',
|
mask: true
|
});
|
}
|
})
|
}
|
else{
|
const addData = {
|
name: this.tempName,
|
userId: uni.getStorageSync('userId'),
|
screen: this.specVal, //屏幕
|
mode: this.modeVal,
|
cycle: this.total,
|
fpsTotal: this.fpsTotal, //总帧数
|
speed: this.speed, //速度
|
pic: this.fileList1[0].url,
|
fpsData: JSON.stringify(this.animationData),
|
fpsList: JSON.stringify(this.fpsList)
|
}
|
console.log('addData-----', addData)
|
templeteAdd(addData).then(res => {
|
console.log('添加动画模版', res)
|
uni.hideLoading();
|
if (res.code == 200) {
|
uni.navigateBack({
|
delta: 1
|
});
|
} else {
|
uni.showToast({
|
title: res.msg,
|
duration: 1500,
|
icon: 'none',
|
mask: true
|
});
|
}
|
})
|
}
|
|
},
|
// 保存动画
|
clickSaveData() {
|
this.fpsList[this.fpsIndex] = this.pixelData;
|
this.$refs.popupAnimation.close();
|
},
|
changeColor() {
|
this.$refs.pickerColor.open();
|
},
|
clickColor(item) {
|
console.log('confirmColor---', item);
|
this.color = item;
|
this.$refs.pickerColor.close();
|
},
|
changeRatio() {
|
this.$refs.pickerRatio.open();
|
},
|
// 分辨率
|
confirmRatio(e) {
|
console.log('confirmRatio---', e.value[0]);
|
const ratio = e.value[0].split('*');
|
console.log('ratio---', ratio[0]);
|
this.height = Number(ratio[0]);
|
this.width = Number(ratio[1]);
|
this.canvasWidth = this.width * (this.modeVal == 2 ? 10 * 10 : 10);
|
this.canvasHeight = this.height * 10;
|
const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
|
this.pixelData = new Array(this.height * colCount).fill('')
|
console.log('pixelData---', this.pixelData);
|
},
|
// 预先获取像素网格的位置信息
|
getGridRect(cb) {
|
if (this.gridRect) {
|
cb(this.gridRect)
|
} else {
|
uni.createSelectorQuery().in(this).select('.pixel_grid').boundingClientRect(rect => {
|
this.gridRect = rect
|
cb(rect)
|
}).exec()
|
}
|
},
|
// 计算触摸点对应的格子
|
getCellByTouch(touch, cb) {
|
this.getGridRect(rect => {
|
if (!rect) return
|
const x = touch.clientX - rect.left + 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, 'rowIndex', rowIndex, 'colIndex', colIndex)
|
if (
|
colIndex >= 0 && colIndex < colCount &&
|
rowIndex >= 0 && rowIndex < this.height
|
) {
|
cb({
|
rowIndex,
|
colIndex
|
})
|
}
|
})
|
},
|
handleTouchStart(e) {
|
// 阻止默认行为
|
e.preventDefault && e.preventDefault();
|
|
if (!e.touches.length) return
|
this.getCellByTouch(e.touches[0], cell => {
|
this.lastCell = cell
|
this.handleClick(cell.rowIndex, cell.colIndex)
|
})
|
},
|
handleTouchMove(e) {
|
// 阻止默认行为
|
e.preventDefault && e.preventDefault();
|
|
if (!e.touches.length) return
|
this.getCellByTouch(e.touches[0], cell => {
|
// 只在格子变化时才触发
|
if (!this.lastCell || this.lastCell.rowIndex !== cell.rowIndex || this.lastCell.colIndex !==
|
cell.colIndex) {
|
this.lastCell = cell
|
this.handleClick(cell.rowIndex, cell.colIndex)
|
}
|
})
|
},
|
handleTouchEnd() {
|
this.lastCell = null
|
},
|
handleClick(rowIndex, colIndex) {
|
console.log(rowIndex, 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
|
this.$set(this.pixelData, index, newColor)
|
},
|
clear() {
|
ctx && ctx.clearRect(0, 0, 1000, 1000)
|
const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
|
// 将所有像素点设置为空字符串
|
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;
|
},
|
// 模版动画弹出框
|
changeAnimation(e){
|
//console.log('打开关闭模版动画弹窗触发---',e)
|
// ios设备不支持弹出框横屏切换
|
if(e.show){
|
if (typeof plus !== 'undefined') {
|
plus.screen.lockOrientation('landscape-primary')
|
}
|
}
|
else{
|
if (typeof plus !== 'undefined') {
|
plus.screen.lockOrientation('portrait-primary')
|
}
|
}
|
},
|
// 打开模版动画
|
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')
|
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]
|
}
|
},
|
// 关闭模版动画
|
popupAnimationClose(){
|
this.$refs.popupAnimation.close();
|
const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
|
this.pixelData = new Array(this.height * colCount).fill('')
|
},
|
// 屏幕规格
|
changeSpec(e) {
|
const ratio = e.split('*');
|
this.specHeight = Number(ratio[0]);
|
this.specWidth = Number(ratio[1]);
|
},
|
// 偶数行数据反转
|
toSnakeData(pixelData, cols = 24) {
|
const rows = []
|
for (let i = 0; i < pixelData.length; i += cols) {
|
let row = pixelData.slice(i, i + cols)
|
if ((rows.length + 1) % 2 === 0) {
|
row.reverse() // 偶数行反转
|
}
|
rows.push(row)
|
}
|
return rows
|
},
|
// 二维数组转字符串
|
mergeRowsToString(rows) {
|
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 个
|
const rows = this.specHeight; // 共 12 行
|
const frames = [];
|
// 拆分成 12 行
|
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 = [];
|
// 每行左移 f 次
|
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;
|
},
|
|
clickSpeed() {
|
this.$refs.pickerSpeed.open();
|
},
|
confirmSpeed(e) {
|
console.log('confirmSpeed', e.value[0]);
|
this.speed = e.value[0]
|
},
|
clickTotal() {
|
if (this.total != 1) {
|
this.$refs.pickerTotal.open();
|
}
|
},
|
confirmTotal(e) {
|
console.log('confirmTotal', e.value[0]);
|
this.total = e.value[0]
|
this.adjustFpsData()
|
},
|
changeMode(e) {
|
this.fpsList = []
|
this.fpsData = []
|
this.gridRect = null
|
if (e == 0 || e == 2) {
|
this.total = 1
|
} else {
|
this.total = 2
|
}
|
this.adjustFpsData()
|
},
|
adjustFpsData() {
|
// 如果 fpsData 太长 → 截取
|
if (this.fpsList.length > this.total) {
|
this.fpsList = this.fpsList.slice(0, this.total);
|
}
|
// 如果 fpsData 太短 → 补齐 null
|
else if (this.fpsList.length < this.total) {
|
const missing = this.total - this.fpsList.length;
|
this.fpsList = this.fpsList.concat(new Array(missing).fill(null));
|
}
|
|
// 如果 fpsList 太长 → 截取
|
if (this.fpsData.length > this.total) {
|
this.fpsData = this.fpsData.slice(0, this.total);
|
}
|
// 如果 fpsList 太短 → 补齐 null
|
else if (this.fpsData.length < this.total) {
|
const missing = this.total - this.fpsData.length;
|
this.fpsData = this.fpsData.concat(new Array(missing).fill(null));
|
}
|
},
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1)
|
},
|
// 新增图片
|
async afterRead(event) {
|
console.log('event---', event)
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file)
|
let fileListLen = this[`fileList${event.name}`].length
|
lists.map((item) => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: 'uploading',
|
message: '上传中'
|
})
|
})
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url)
|
this.avatar = result
|
let item = this[`fileList${event.name}`][fileListLen]
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
status: 'success',
|
message: '',
|
url: result
|
}))
|
fileListLen++
|
}
|
},
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: this.baseURL + '/common/uploadFileByAnny', // 仅为示例，非真实的接口地址
|
filePath: url,
|
name: 'file',
|
success: (res) => {
|
console.log('图片-----', JSON.parse(res.data))
|
setTimeout(() => {
|
resolve(JSON.parse(res.data).fileName)
|
}, 1000)
|
}
|
});
|
})
|
},
|
// 生成点阵数据
|
generateDotMatrix(char, startCol = null) {
|
return new Promise((resolve, reject) => {
|
|
// 使用 uni-app 的 canvas context
|
ctx = uni.createCanvasContext('myCanvas', this);
|
|
// 设置字体样式
|
ctx.setFontSize(this.canvasHeight);
|
ctx.setFillStyle('#000')
|
ctx.setTextBaseline('middle')
|
// 绘制文字
|
// 垂直居中，稍微向上偏移一点
|
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, () => {
|
// 获取画布数据
|
uni.canvasGetImageData({
|
canvasId: 'myCanvas',
|
x: 0,
|
y: 0,
|
width: this.canvasWidth,
|
height: this.canvasHeight,
|
success: (res) => {
|
console.log('canvasGetImageData', 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;
|
|
// 生成一维数组
|
for (let y = 0; y < this.height; y++) {
|
for (let x = 0; x < colCount; x++) {
|
let blackPixels = 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) {
|
blackPixels++;
|
}
|
totalPixels++;
|
}
|
}
|
|
// 如果黑色像素占比超过阈值，则设置为当前选择的颜色
|
const isBlack = blackPixels / totalPixels > 0.3;
|
const arrayIndex = y * colCount + x;
|
pixelArray[arrayIndex] = isBlack ? this.color : '';
|
}
|
}
|
|
resolve(pixelArray);
|
},
|
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]);
|
}
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
-webkit-text-size-adjust: 100%;
|
text-size-adjust: 100%;
|
}
|
.item_pic_btn{
|
width: 200rpx;
|
height: 200rpx;
|
background: #eee;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 15rpx;
|
}
|
.color_list {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
gap: 30rpx;
|
box-sizing: border-box;
|
padding: 50rpx;
|
|
.color_item {
|
width: 30rpx;
|
height: 30rpx;
|
border-radius: 5rpx;
|
}
|
}
|
|
.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: 10rpx;
|
z-index: 9;
|
}
|
.exit_btn{
|
position: absolute;
|
right: 30rpx;
|
bottom: 10rpx;
|
z-index: 9999;
|
}
|
.animation_pixel{
|
width: 100vw;
|
height: 100vh;
|
position: relative;
|
.back_btn{
|
position: absolute;
|
left: 30px;
|
top: 20px;
|
z-index: 9999;
|
}
|
.canvas {
|
margin: 100rpx auto 0;
|
background: #ccc;
|
position: absolute;
|
z-index: 1;
|
left: -9999px;
|
top: -9999px;
|
}
|
.pixel_grid {
|
height: 80vh;
|
border-bottom: 1px solid #eee;
|
display: grid;
|
gap: 1px;
|
box-sizing: border-box;
|
background: #eee;
|
touch-action: none;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
user-select: none;
|
|
.pixel_cell {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
background: #fff;
|
|
.pixel_cell_item {
|
width: 50%;
|
height: 50%;
|
aspect-ratio: 1/1;
|
font-size: 10rpx;
|
}
|
}
|
}
|
|
}
|
// -------------
|
.footer_none {
|
height: 200rpx;
|
}
|
|
.footer_btn {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
padding: 30rpx 40rpx;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.preview_overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.85);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
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 {
|
position: fixed;
|
left: 30rpx;
|
bottom: 60rpx;
|
right: 30rpx;
|
box-sizing: border-box;
|
height: 96rpx;
|
background: linear-gradient(142deg, #6FD2FF 0%, #268DFF 100%);
|
border-radius: 385rpx 385rpx 385rpx 385rpx;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
line-height: 96rpx;
|
text-align: center;
|
}
|
|
.spec_radio {
|
margin-top: 30rpx;
|
|
&:first-child {
|
margin-top: 10rpx;
|
}
|
}
|
|
.temp {
|
padding: 0 30rpx;
|
|
.temp_item1 {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
|
box-shadow: 8rpx 8rpx 23rpx 0rpx rgba(67, 147, 248, 0.1), -8rpx -8rpx 23rpx 0rpx rgba(255, 255, 255, 0.4);
|
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
border: 2rpx solid #FFFFFF;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-top: 24rpx;
|
|
.title {
|
flex-shrink: 0;
|
font-size: 30rpx;
|
color: rgba(0, 0, 0, 0.9);
|
line-height: 40rpx;
|
|
}
|
|
.item {}
|
}
|
|
.temp_item {
|
display: flex;
|
align-items: flex-start;
|
justify-content: flex-start;
|
flex-direction: column;
|
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
|
box-shadow: 8rpx 8rpx 23rpx 0rpx rgba(67, 147, 248, 0.1), -8rpx -8rpx 23rpx 0rpx rgba(255, 255, 255, 0.4);
|
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
border: 2rpx solid #FFFFFF;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-top: 24rpx;
|
|
.title {
|
flex-shrink: 0;
|
font-size: 30rpx;
|
color: rgba(0, 0, 0, 0.9);
|
line-height: 40rpx;
|
}
|
|
.item {
|
margin-top: 20rpx;
|
width: 100%;
|
font-size: 30rpx;
|
display: flex;
|
flex-direction: column;
|
&.item_pic {
|
margin-top: 25rpx;
|
}
|
}
|
}
|
}
|
|
.page_bg {
|
width: 100%;
|
min-height: calc(100vh - var(--window-bottom));
|
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>
|
