<template>
|
<view>
|
<!-- <uv-navbar title="动画编辑" :autoBack="true" bgColor="rgba(0,0,0,0)" :placeholder="false"></uv-navbar> -->
|
<view class="back_btn" @click="clickBack">
|
<uv-icon name="arrow-leftward" color="#333" size="26rpx"></uv-icon>
|
</view>
|
<view class="controls">
|
<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="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>
|
|
<!-- 修改像素网格显示 -->
|
<!-- <view class="pixel-grid" @touchstart.prevent="handleTouchStart" @touchmove.prevent="handleTouchMove">
|
<view class="pixel-row" v-for="(row, rowIndex) in Math.ceil(pixelData.length / width)" :key="rowIndex">
|
<view class="pixel-cell" v-for="(item, colIndex) in width" :key="colIndex">
|
<view v-if="pixelData[rowIndex * width + colIndex]" class="pixel-cell-item" :style="{ backgroundColor: pixelData[rowIndex * width + colIndex] }">
|
{{rowIndex,colIndex}}
|
</view>
|
</view>
|
</view>
|
</view> -->
|
|
<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>
|
</view>
|
</view>
|
|
<!-- 分辨率 -->
|
<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-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color> -->
|
|
</view>
|
</template>
|
|
<script>
|
let ctx = null
|
|
export default {
|
data() {
|
return {
|
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
|
}
|
},
|
onLoad(opt) {
|
// App端强制横屏
|
if (typeof plus !== 'undefined') {
|
plus.screen.lockOrientation('landscape-primary')
|
}
|
if (opt.fps) {
|
this.fpsIndex = opt.fps
|
}
|
|
},
|
onShow() {
|
// 改为一维数组初始化
|
this.pixelData = new Array(this.height * this.width).fill('')
|
},
|
onHide() {
|
console.log('离开页面恢复竖屏------onHide')
|
// 离开页面恢复竖屏
|
if (typeof plus !== 'undefined') {
|
plus.screen.lockOrientation('portrait')
|
}
|
},
|
onUnload() {
|
console.log('离开页面恢复竖屏------onUnload')
|
// 离开页面恢复竖屏
|
if (typeof plus !== 'undefined') {
|
plus.screen.lockOrientation('portrait')
|
}
|
},
|
methods: {
|
clickBack() {
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
clickSaveData() {
|
const parsed = this.pixelData.map(item => {
|
if (item) {
|
return item.replace("#", "");
|
} else {
|
return "000000";
|
}
|
});
|
console.log('parsed-------------', parsed.join(''))
|
//const snakeRows = this.toSnakeData(parsed, this.width)
|
//console.log('snakeRows-------------', snakeRows)
|
//const snakeString = this.mergeRowsToString(snakeRows)
|
//console.log('snakeString-------------', snakeString)
|
|
// uni.setStorageSync('fpsParams', {
|
// shouldRefresh: true,
|
// fpsIndex: Number(this.fpsIndex),
|
// //data: snakeString
|
// data: parsed
|
// });
|
|
uni.setStorage({
|
key: 'fpsParams',
|
data: {
|
shouldRefresh: true,
|
fpsIndex: Number(this.fpsIndex),
|
data: parsed
|
},
|
success: () => {
|
console.log('存储成功');
|
uni.navigateBack({
|
delta: 1,
|
});
|
},
|
fail: (err) => {
|
console.error('存储失败：', err);
|
}
|
});
|
|
|
},
|
// 偶数行数据反转
|
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('') // 所有行合并
|
},
|
getData() {
|
uni.switchTab({
|
url: '/pages/template/template',
|
success() {
|
console.log('跳转成功');
|
},
|
fail(err) {
|
console.error('跳转失败：', err);
|
}
|
});
|
},
|
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 * 10;
|
this.canvasHeight = this.height * 10;
|
// 重新初始化一维数组
|
this.pixelData = new Array(this.height * this.width).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
|
const y = touch.clientY - rect.top
|
const cellWidth = rect.width / this.width
|
const cellHeight = rect.height / this.height
|
const colIndex = Math.floor(x / cellWidth)
|
const rowIndex = Math.floor(y / cellHeight)
|
if (
|
colIndex >= 0 && colIndex < this.width &&
|
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 index = rowIndex * this.width + 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)
|
// 将所有像素点设置为空字符串
|
this.pixelData = new Array(this.height * this.width).fill('')
|
},
|
// 生成点阵数据
|
generateDotMatrix(char) {
|
return new Promise((resolve, reject) => {
|
|
// 使用 uni-app 的 canvas context
|
ctx = uni.createCanvasContext('myCanvas', this);
|
|
// 设置字体样式
|
ctx.setFontSize(this.canvasHeight * 0.9);
|
ctx.setFillStyle('#000')
|
ctx.setTextAlign('center')
|
ctx.setTextBaseline('middle')
|
// 绘制文字
|
// 计算文字位置
|
// 水平居中
|
const x = this.canvasWidth / 2;
|
// 垂直居中，稍微向上偏移一点
|
const y = this.canvasHeight / 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(res)
|
const imageData = res.data;
|
// 生成一维数组
|
const pixelArray = new Array(this.height * this.width).fill('')
|
|
// 计算每个格子的像素大小
|
const cellWidth = this.canvasWidth / this.width;
|
const cellHeight = this.canvasHeight / this.height;
|
|
// 生成一维数组
|
for (let y = 0; y < this.height; y++) {
|
for (let x = 0; x < this.width; 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 * this.width + x;
|
pixelArray[arrayIndex] = isBlack ? this.color :
|
''; // 改为颜色值或空字符串
|
}
|
}
|
|
resolve(pixelArray);
|
},
|
fail: (err) => {
|
reject(err);
|
}
|
});
|
});
|
});
|
},
|
|
// 修改添加文字方法
|
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'
|
});
|
}
|
}
|
}
|
});
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.back_btn {
|
position: fixed;
|
left: 10rpx;
|
top: 26rpx;
|
z-index: 9999;
|
}
|
|
.pixel_grid {
|
position: fixed;
|
left: 0;
|
top: var(--status-bar-height);
|
right: 0;
|
bottom: 0;
|
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;
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.controls {
|
position: absolute;
|
bottom: 15rpx;
|
left: 20rpx;
|
display: flex;
|
gap: 20rpx;
|
z-index: 9;
|
}
|
|
.canvas {
|
margin: 100rpx auto 0;
|
background: #ccc;
|
position: absolute;
|
z-index: 1;
|
left: -9999px;
|
top: -9999px;
|
}
|
|
.pixel-grid {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
z-index: 8;
|
background: #fff;
|
touch-action: none;
|
-webkit-touch-callout: none;
|
-webkit-user-select: none;
|
user-select: none;
|
|
.pixel-row {
|
display: flex;
|
flex: 1;
|
|
.pixel-cell {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1rpx solid #eee;
|
box-sizing: border-box;
|
|
.pixel-cell-item {
|
width: 50%;
|
aspect-ratio: 1/1;
|
color: #333 !important;
|
;
|
font-size: 10rpx;
|
}
|
}
|
}
|
}
|
</style>
|
