R524809
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
/**
|
||
* 绘制内容区域的参数接口
|
||
*/
|
||
interface DrawNumberContentParams {
|
||
ctx: RenderingContext;
|
||
selectedNumber: number;
|
||
canvasWidth: number; // 逻辑像素宽度（已除以3）
|
||
startY: number; // 起始Y坐标
|
||
}
|
||
|
||
/**
|
||
* 绘制数字涂色内容区域服务
|
||
* 随机绘制1-10的数字，尺寸除以3
|
||
*/
|
||
export function drawNumberContent({
|
||
ctx,
|
||
selectedNumber,
|
||
canvasWidth,
|
||
startY,
|
||
}: DrawNumberContentParams): void {
|
||
const rows = 6;
|
||
const radius = 26; // 约26.67
|
||
const fontSize = 24; // 24
|
||
|
||
const startYPos = startY + 10 + radius; // 约47.33
|
||
const startX1 = 100 + radius; // 约112.22
|
||
const startX2 = 60 + radius; // 约75.56
|
||
const spaceWidthFirst = (canvasWidth - startX1 * 2) / (5 - 1);
|
||
const spaceWidthSecond = (canvasWidth - startX2 * 2) / (6 - 1);
|
||
const spaceHeight = 18; // 18
|
||
|
||
ctx.moveTo(startX1, startYPos);
|
||
for (let i = 0; i < rows; i++) {
|
||
const cols = i % 2 === 0 ? 5 : 6;
|
||
|
||
for (let j = 0; j < cols; j++) {
|
||
const y = startYPos + i * (spaceHeight + radius * 2);
|
||
const x =
|
||
i % 2 === 0
|
||
? startX1 + j * spaceWidthFirst
|
||
: startX2 + j * spaceWidthSecond;
|
||
|
||
// 随机生成1-10的数字，但确保包含选中的数字
|
||
let number: number;
|
||
if (i === 0 && j === 0) {
|
||
// 第一个位置固定为选中的数字
|
||
number = selectedNumber;
|
||
} else {
|
||
// 其他位置随机，但增加选中数字出现的概率
|
||
const random = Math.random();
|
||
if (random < 0.3) {
|
||
// 30%概率是选中的数字
|
||
number = selectedNumber;
|
||
} else {
|
||
// 70%概率是其他随机数字
|
||
number = Math.floor(Math.random() * 10) + 1;
|
||
}
|
||
}
|
||
|
||
// 绘制圆形背景（线宽除以3）
|
||
ctx.fillStyle = '#fff';
|
||
ctx.strokeStyle = '#000';
|
||
ctx.lineWidth = 1; // 约1.33
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
|
||
// 绘制数字（字体大小除以3）
|
||
ctx.fillStyle = '#333';
|
||
ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
|
||
ctx.textBaseline = 'middle';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(String(number), x, y, radius * 2);
|
||
}
|
||
}
|
||
}
|