joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成图形涂色绘制

Browse Source
This commit is contained in:
joey
2025-08-20 10:49:20 +08:00
parent 64deb9f3be
commit c95bd601e8
12 changed files with 178 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/debug/debug.ts
+6 -8
View File
@@ -1,17 +1,15 @@
import config from '../../config/config';
const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
Page({
data: {
printConfig: {
header: 'wechat',
appName: '涂鸦丫小程序'
},
printConfig: defaultPrintConfig,
enableDebug: false
},
onLoad() {
const printConfig = getApp().getPrintConfig() || {
header: 'wechat',
appName: '涂鸦丫小程序'
};
const printConfig = getApp().getPrintConfig() || defaultPrintConfig;
const enableDebug = wx.getStorageSync('enableDebug') || false;
this.setData({ printConfig, enableDebug });
},
miniprogram/pages/debug/debug.wxml
+2 -2
View File
@@ -8,7 +8,7 @@
value="{{printConfig.header}}"
bind:change="onChangeHeader">
<van-cell
title="微信小程序头（wechat）（默认）"
title="微信小程序头（wechat）"
clickable
data-name="wechat"
bind:click="onClickHeaderSetting">
@@ -29,7 +29,7 @@
<van-radio slot="right-icon" name="LogoImage" />
</van-cell>
<van-cell
title="最小Header头（minimal）"
title="最小Header头（minimal）（默认）"
clickable
data-name="minimal"
bind:click="onClickHeaderSetting"
miniprogram/pages/shape/index.less
+1 -1
View File
@@ -8,7 +8,7 @@ page {
box-sizing: border-box;
.empty {
height: 190rpx;
height: 120rpx;
}
.wrapper {
miniprogram/pages/shape/index.ts
+60 -47
View File
@@ -14,7 +14,7 @@ Page({
data: {
shapeList: [] as ShapeCard[],
showSelectShapePopup: false,
currentShapeId: '',
selectedShapeIndex: -1,
showColorPopup: false,
currentIndex: 0,
currentColor: '',
@@ -94,75 +94,89 @@ Page({
},
openSelectShapePopup(e: any) {
const { key } = e.detail;
const { index } = e.detail;
this.setData({
showSelectShapePopup: true,
currentShapeId: key
selectedShapeIndex: index
});
},
closeSelectShapePopup() {
this.setData({
showSelectShapePopup: false,
currentShapeId: ''
selectedShapeIndex: -1
});
},
onChangeShape(e: any) {
const { shapes } = e.detail;
const { shapes, singleMode, selectedShapeIndex } = e.detail;
const prevShapeList: ShapeCard[] = this.data.shapeList || [];
// 1. 保留已选图形的 fillColor，不变
// 2. 新增的图形分配未被占用的颜色，且不重复
// 获取所有可用颜色
const colorList = WATER_COLORS.basic12.map(item => item.hex);
let newShapeList: ShapeCard[] = [];
// 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
if (singleMode) {
// 单选模式，只替换 selectedShapeIndex 对应的 shape，其他 shape 保持不变和原有颜色
newShapeList = prevShapeList.map((item, idx) => {
if (idx === selectedShapeIndex) {
// 替换为新选中的 shape，保留原有 fillColor
return {
...shapes[0],
fillColor: item.fillColor
};
} else {
// 其他 shape 不变
return item;
}
});
} else {
// 多选模式，原有逻辑
// 获取所有可用颜色
const colorList = WATER_COLORS.basic12.map(item => item.hex);
// 新的 shapeList
const newShapeList: ShapeCard[] = [];
// 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
// 记录已分配的颜色，避免重复
const assignedColors = [...usedColors];
// 记录已分配的颜色，避免重复
const assignedColors = [...usedColors];
// 先将 shapes 转为 Map，方便查找
const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));
// 先将 shapes 转为 Map，方便查找
const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));
// 随机打乱剩余可用颜色
function shuffle(arr: string[]) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
// 随机打乱剩余可用颜色
function shuffle(arr: string[]) {
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
return arr;
// 计算未被占用的颜色
let availableColors = colorList.filter(color => !assignedColors.includes(color));
availableColors = shuffle(availableColors);
shapes.forEach((item: ShapeCard) => {
if (prevShapeMap.has(item.id)) {
// 已存在，保留原有 fillColor
newShapeList.push({
...item,
fillColor: prevShapeMap.get(item.id)!.fillColor
});
} else {
// 新增，分配未被占用的颜色
const color = availableColors.shift() || colorList[0];
assignedColors.push(color);
newShapeList.push({
...item,
fillColor: color
});
}
});
}
// 计算未被占用的颜色
let availableColors = colorList.filter(color => !assignedColors.includes(color));
availableColors = shuffle(availableColors);
shapes.forEach((item: ShapeCard) => {
if (prevShapeMap.has(item.id)) {
// 已存在，保留原有 fillColor
newShapeList.push({
...item,
fillColor: prevShapeMap.get(item.id)!.fillColor
});
} else {
// 新增，分配未被占用的颜色
const color = availableColors.shift() || colorList[0];
assignedColors.push(color);
newShapeList.push({
...item,
fillColor: color
});
}
});
this.setData({
showSelectShapePopup: false,
currentShapeId: '',
selectedShapeIndex: -1,
shapeList: newShapeList
}, () => {
// 绘制canvas
@@ -216,7 +230,6 @@ Page({
},
onColorTap(e: any) {
const { index, fillColor } = e.detail;
console.log('shape Page onColorTap', index, fillColor);
this.setData({
showColorPopup: true,
currentColor: fillColor,
miniprogram/pages/shape/index.wxml
+3 -1
View File
@@ -34,6 +34,7 @@
</view>
<shape-picker
show="{{showSelectShapePopup}}"
selectedShapeIndex="{{selectedShapeIndex}}"
bind:onClose="closeSelectShapePopup"
bind:onChange="onChangeShape" />
<color-picker
@@ -43,7 +44,7 @@
bind:onChange="onChangeColor" />
<view id="previewWrapper" class="wrapper">
<text class="wrapper-title">预览打印效果</text>
<text class="wrapper-title">预览打印效果 {{currentShapeId}}</text>
<view
wx:if="{{!isPCDevtool}}"
id="canvasWrapper"
@@ -55,6 +56,7 @@
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
</view>
</view>
<view class="empty"></view>
</view>
<view class="bottom-btn-box">
<toy-button