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/app.ts
+8 -12
View File
@@ -1,21 +1,20 @@
import config from './config/config';
const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
// app.ts
App<IAppOption>({
globalData: {
env: 'release',
printConfig: {
header: 'wechat',
appName: '涂鸦丫小程序'
}
printConfig: defaultPrintConfig
},
onLaunch() {
const accountInfo = wx.getAccountInfoSync();
const env = accountInfo.miniProgram.envVersion || 'release';
this.globalData.env = env;
if (env !== 'release') {
const printConfig = wx.getStorageSync('printConfig') || {
header: 'wechat',
appName: '涂鸦丫小程序'
};
const printConfig = wx.getStorageSync('printConfig') || defaultPrintConfig;
this.globalData.printConfig = printConfig;
}
},
@@ -29,10 +28,7 @@ App<IAppOption>({
},
getPrintConfig(): PrintConfig {
return this.globalData.printConfig || {
header: 'wechat',
appName: '涂鸦丫小程序'
};
return this.globalData.printConfig || defaultPrintConfig;
},
setPrintConfig(config: PrintConfig) {
miniprogram/components/shape-picker/shape-picker.ts
+29 -5
View File
@@ -10,9 +10,9 @@ Component({
type: Boolean,
value: false,
},
singleMode: {
type: Boolean,
value: false,
selectedShapeIndex: {
type: Number,
value: -1,
},
},
/**
@@ -20,6 +20,7 @@ Component({
*/
data: {
shapes: [] as (ShapeCard & { svgDataUrl: string })[],
singleMode: false,
totalSelected: 0,
},
lifetimes: {
@@ -36,8 +37,26 @@ Component({
this.setData({
shapes: shapesWithDataUrl
});
}
},
observers: {
selectedShapeIndex(newVal: number) {
this.setData({
singleMode: newVal !== -1
});
},
},
// pageLifetimes: {
// show: function () {
// console.log('show singleMode', this.data.singleMode);
// },
// hide: function () {
// console.log('hide singleMode', this.data.singleMode);
// },
// resize: function (size) {
// console.log('resize', size);
// }
// },
/**
* 组件的方法列表
*/
@@ -89,9 +108,14 @@ Component({
},
onChange() {
const { shapes } = this.data;
const { shapes, selectedShapeIndex, singleMode } = this.data;
const selectedShapes = shapes.filter(item => item.checked);
this.triggerEvent('onChange', { shapes: selectedShapes, singleMode: this.data.singleMode });
this.triggerEvent('onChange', {
shapes: selectedShapes,
singleMode,
selectedShapeIndex
});
},
},
});
miniprogram/components/shape-picker/shape-picker.wxml
+4 -3
View File
@@ -3,9 +3,10 @@
bind:close="onClose"
custom-class="shape-picker-popup">
<view class="shape-picker-container">
<text class="shape-picker-title"
>选择形状{{ singleMode ? '' : '（多选）' }}</text
>
<text class="shape-picker-title">
选择形状{{selectedShapeIndex}} {{ singleMode ? '（单选）' :
'（多选）' }}
</text>
<view class="shape-options-wrapper">
<view class="shape-options">
<view
miniprogram/config/config.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
printHeader: {
header: 'LogoImage',
appName: '涂鸦丫'
}
}
miniprogram/constants/shapes.ts
+1 -2
View File
@@ -23,8 +23,7 @@ const SHAPES: ShapeCard[] = [
id: 'obtuse-triangle',
name: '钝角三角形',
type: 'triangle',
// svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
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
+25 -12
View File
@@ -14,7 +14,7 @@ Page({
data: {
shapeList: [] as ShapeCard[],
showSelectShapePopup: false,
currentShapeId: '',
selectedShapeIndex: -1,
showColorPopup: false,
currentIndex: 0,
currentColor: '',
@@ -94,35 +94,48 @@ 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. 新增的图形分配未被占用的颜色，且不重复
let newShapeList: ShapeCard[] = [];
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 中的 fillColor）
const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
// 新的 shapeList
const newShapeList: ShapeCard[] = [];
// 记录已分配的颜色，避免重复
const assignedColors = [...usedColors];
@@ -159,10 +172,11 @@ Page({
});
}
});
}
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
miniprogram/service/drawShape.ts
+17 -4
View File
@@ -103,11 +103,24 @@ function drawParallelogram(ctx: RenderingContext, x: number, y: number, width: n
// 绘制菱形
function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
// 参考SVG: <polygon points="50,15 70,50 50,85 30,50"/>
// 以(x, y)为中心，size为半高，按SVG比例映射四个点
// SVG中心(50,50)，顶点(50,15)，右(70,50)，下(50,85)，左(30,50)
// 计算比例
// 顶点: (0, -0.7*size)
// 右: (0.4*size, 0)
// 下: (0, 0.7*size)
// 左: (-0.4*size, 0)
const topY = y - size * 0.7;
const rightX = x + size * 0.4;
const bottomY = y + size * 0.7;
const leftX = x - size * 0.4;
ctx.beginPath();
ctx.moveTo(x, y - size);
ctx.lineTo(x + size, y);
ctx.lineTo(x, y + size);
ctx.lineTo(x - size, y);
ctx.moveTo(x, topY); // 顶点
ctx.lineTo(rightX, y); // 右
ctx.lineTo(x, bottomY); // 下
ctx.lineTo(leftX, y); // 左
ctx.closePath();
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
miniprogram/service/shapeDrawService.ts
+41 -61
View File
@@ -226,89 +226,69 @@ class ShapeDrawService {
const { canvas, ctx, shapes } = this;
if (shapes.length <= 0) return;
const minY = this.headerType === 'minimal' ? 532 : 622;
// 固定可渲染的总行数
const ROW_COUNT = 6;
// 每行之间的垂直间距
const VERTICAL_GAP = 120;
// 图形大小
const shapeSize = 180;
const minGap = 40; // 图形之间最小间距
const bottomMargin = 20;
// 计算内容区起始Y坐标，保证在532或622以下
const contentTop = minY + 20; // 距离minY线之后20px开始绘制
const contentHeight = canvas.height - contentTop - bottomMargin;
// 左右边距
const leftMargin = 160;
const rightMargin = 160;
// 以 drawLegend 画完后的分割线作为基准，内容区顶部间距 50
const legendBottomY = this.currentY;
const topGap = 60;
const contentTop = legendBottomY + topGap;
// 左右各留100像素边距
const contentLeft = 100;
const contentWidth = canvas.width - shapeSize;
// 可用宽度
const contentWidth = canvas.width - leftMargin - rightMargin;
// 计算一共要绘制多少个图形
const repeatCount = 8;
const totalShapes = shapes.length * repeatCount;
// 每行最多能放多少个图形（考虑最小间距40）
const minGap = 40;
const maxPerRow = Math.floor((contentWidth + minGap) / (shapeSize + minGap));
// 总共要绘制多少个图形（每行都填满）
const totalShapes = maxPerRow * ROW_COUNT;
// 生成所有要绘制的图形（打乱顺序，保证随机性）
let allShapes: ShapeCard[] = [];
for (let i = 0; i < repeatCount; i++) {
for (let i = 0; i < Math.ceil(totalShapes / shapes.length); i++) {
allShapes = allShapes.concat(shapes);
}
allShapes = allShapes.slice(0, totalShapes);
// 洗牌算法彻底打乱
for (let i = allShapes.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[allShapes[i], allShapes[j]] = [allShapes[j], allShapes[i]];
}
// 计算每行最多能放多少个图形（考虑最小间距和边距）
const maxPerRow = Math.floor((contentWidth + minGap) / (shapeSize + minGap));
const rowCount = Math.ceil(totalShapes / maxPerRow);
// 计算实际间距（保证左右边距为80，且间距不小于minGap）
const actualPerRow = Math.min(maxPerRow, totalShapes);
const actualGap = actualPerRow > 1
? Math.max(minGap, (contentWidth - actualPerRow * shapeSize) / (actualPerRow - 1))
: 0;
// 计算每行的Y坐标 - 固定上边距，不使用垂直居中
const totalRows = rowCount;
let startY = contentTop; // 直接使用contentTop，不进行垂直居中计算
// 生成所有图形的位置
let positions: { x: number, y: number }[] = [];
let shapeIdx = 0;
const canvasHeight = this.canvas.height;
for (let row = 0; row < totalRows; row++) {
// 本行实际要放多少个图形
const shapesInThisRow = Math.min(actualPerRow, totalShapes - shapeIdx);
for (let row = 0; row < ROW_COUNT; row++) {
// 本行起始Y
const y = contentTop + row * (shapeSize + VERTICAL_GAP) + shapeSize / 2;
// 本行实际间距
const gap = shapesInThisRow > 1
? Math.max(minGap, (contentWidth - shapesInThisRow * shapeSize) / (shapesInThisRow - 1))
const gap = maxPerRow > 1
? Math.max(minGap, (contentWidth - maxPerRow * shapeSize) / (maxPerRow - 1))
: 0;
// 本行起始X
let startX = contentLeft;
// 居中对齐
if (shapesInThisRow > 1) {
const rowWidth = shapesInThisRow * shapeSize + (shapesInThisRow - 1) * gap;
startX = contentLeft + (contentWidth - rowWidth) / 2;
// 本行起始X（水平居中）
let startX = leftMargin;
if (maxPerRow > 1) {
const rowWidth = maxPerRow * shapeSize + (maxPerRow - 1) * gap;
startX = leftMargin + (contentWidth - rowWidth) / 2;
} else {
startX = contentLeft + (contentWidth - shapeSize) / 2;
startX = leftMargin + (contentWidth - shapeSize) / 2;
}
// 计算当前行的Y坐标
const currentRowY = startY + row * (shapeSize + minGap) + shapeSize / 2;
// 检查当前行是否会超出下边界
if (currentRowY + shapeSize / 2 > canvasHeight - bottomMargin) {
break; // 停止生成更多行
}
for (let col = 0; col < shapesInThisRow; col++) {
for (let col = 0; col < maxPerRow; col++) {
positions.push({
x: startX + col * (shapeSize + gap) + shapeSize / 2,
y: currentRowY
y: y
});
shapeIdx++;
if (shapeIdx >= totalShapes) break;
}
}
if (shapeIdx >= totalShapes) break;
}
// 修正：只保留前 totalShapes 个位置，防止多出一行
positions = positions.slice(0, totalShapes);
// 再次彻底打乱位置顺序，保证排列无规律
for (let i = positions.length - 1; i > 0; i--) {
@@ -317,14 +297,14 @@ class ShapeDrawService {
}
// 记录实际绘制的图形数量
console.log(`绘制图形：计划${totalShapes}个，实际${positions.length}个，边界限制：距离下边${bottomMargin}px`);
console.log(`绘制图形：计划${totalShapes}个，实际${positions.length}个；每行${maxPerRow}个，共${ROW_COUNT}行；边距 左右=${leftMargin}/${rightMargin}，顶部=${topGap}（基于legend底线）`);
// 绘制所有图形
positions.forEach((pos, index) => {
const shape = allShapes[index];
// 随机旋转角度
const rotation = (Math.random() - 0.5) * 0.5; // ±0.25弧度
// 随机旋转角度，范围为±90度（即最大180度）
const rotation = (Math.random() - 0.5) * Math.PI; // ±90度 = ±π/2 弧度，Math.PI为180度
ctx.save();
ctx.translate(pos.x, pos.y);