From c7bbc2936d13523042187b112e72ea9b5b5566a2 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Thu, 27 Aug 2026 21:23:40 +0800
Subject: [PATCH] 颜色选择器
---
ledApp/pages/addTemplate/addTemplate.vue | 79 ++++++++++++++++++++++++---------------
1 files changed, 49 insertions(+), 30 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index cb3dbf1..f37ee97 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -151,9 +151,10 @@
<!-- 动画按钮 -->
<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="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="shiftDown()"></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>
@@ -192,11 +193,21 @@
<!-- 分辨率 -->
<uv-picker ref="pickerRatio" :columns="columnsRatio" @confirm="confirmRatio"></uv-picker>
- <!-- 颜色 -->
+ <!-- 颜色选择器 -->
<uv-popup ref="pickerColor" mode="bottom" round="10" :closeable="true">
- <view class="color_list">
- <view class="color_item" v-for="(item, index) in colorList" :class="{ hover: color === item }" :key="index" :style="{ backgroundColor: item }" @click="clickColor(item)"></view>
- </view>
+ <scroll-view scroll-y :show-scrollbar="false" class="color-picker-scroll">
+ <view class="color-picker-wrapper">
+ <view class="color-picker-inner">
+ <x-color-picker
+ v-model="color"
+ :show-alpha="false"
+ :save-history="true"
+ :options="pickerOptions"
+ @confirm="onColorConfirm"
+ @cancel="onColorCancel" />
+ </view>
+ </view>
+ </scroll-view>
</uv-popup>
<!-- 添加文字弹窗 -->
@@ -304,17 +315,11 @@
// columnsRatio: [
// ['12*24']
// ],
- colorList: [
- '#FF0000',
- '#00FF00',
- '#0000FF',
- '#FFFF00',
- '#FFA500',
- '#800080',
- '#00FFFF',
- '#FFC0CB'
- ],
- fpsIndex: 0,
+ color: '#FF0000',
+ gridRect: null,
+ pickerOptions: {
+ width: 680,
+ },
fpsList: [],
tId: '',
tempInfo:{},
@@ -604,9 +609,11 @@
changeColor() {
this.$refs.pickerColor.open();
},
- clickColor(item) {
- console.log('confirmColor---', item);
- this.color = item;
+ onColorConfirm(colorObj) {
+ this.color = colorObj.hex;
+ this.$refs.pickerColor.close();
+ },
+ onColorCancel() {
this.$refs.pickerColor.close();
},
changeRatio() {
@@ -724,6 +731,21 @@
}
}
},
+ 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])
+ }
+ },
toggleControls() {
this.showControls = !this.showControls;
},
@@ -1225,20 +1247,17 @@
justify-content: center;
margin-bottom: 15rpx;
}
- .color_list {
- width: 100%;
+ .color_picker_wrapper {
+ padding: 30rpx 0;
display: flex;
justify-content: center;
- flex-wrap: wrap;
- gap: 30rpx;
+ }
+ .color-picker-scroll {
+ max-height: 90vh;
box-sizing: border-box;
- padding: 50rpx;
-
- .color_item {
- width: 30rpx;
- height: 30rpx;
- border-radius: 5rpx;
- }
+ }
+ .color-picker-wrapper {
+ //zoom: 0.5;
}
.action_btn {
--
Gitblit v1.10.0