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/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,90 +226,70 @@ 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--) {
const j = Math.floor(Math.random() * (i + 1));
@@ -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);