feat:九九乘法表

This commit is contained in:
R524809
2026-01-16 18:02:16 +08:00
parent 7dd10c7902
commit 9c13b44806
25 changed files with 1388 additions and 13 deletions
+66 -1
View File
@@ -172,6 +172,58 @@ export class BaseDrawService {
ctx.setLineDash([]); // 重置为实线
}
/**
* 绘制线条(逻辑像素,尺寸除以3)
* @param x1 起点X坐标
* @param y1 起点Y坐标
* @param x2 终点X坐标
* @param y2 终点Y坐标
* @param options 可选参数
* @param options.isDashed 是否为虚线,默认为true(虚线)
* @param options.dashPattern 虚线模式,默认为[4, 4]
* @param options.color 线条颜色,默认为'#999'
* @param options.lineWidth 线条宽度,默认为1
*/
drawLine(
x1: number,
y1: number,
x2: number,
y2: number,
options?: {
isDashed?: boolean;
dashPattern?: number[];
color?: string;
lineWidth?: number;
},
): void {
const { ctx } = this;
const {
isDashed = true,
dashPattern = [4, 4],
color = '#999',
lineWidth = 1,
} = options || {};
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
// 设置虚线或实线
if (isDashed) {
ctx.setLineDash(dashPattern);
} else {
ctx.setLineDash([]);
}
// 绘制线条
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
// 重置为实线(避免影响后续绘制)
ctx.setLineDash([]);
}
/**
* 绘制网格线(逻辑像素,尺寸除以3)
* @param gridStartX 网格起始X坐标
@@ -287,7 +339,7 @@ export class BaseDrawService {
* 绘制符号(使用路径绘制)
* @param x 符号中心X坐标
* @param y 符号中心Y坐标
* @param symbol 符号类型:'+', '-', '×', '✓'
* @param symbol 符号类型:'+', '-', '=', '×', '✓'
* @param size 符号大小
*/
drawSymbol(x: number, y: number, symbol: string, size: number): void {
@@ -325,6 +377,19 @@ export class BaseDrawService {
ctx.stroke();
break;
case '=':
// 等号:两条横线
const equalsSpacing = size * 0.15; // 两条线之间的间距
ctx.beginPath();
// 上横线
ctx.moveTo(-strokeLength, -equalsSpacing);
ctx.lineTo(strokeLength, -equalsSpacing);
// 下横线
ctx.moveTo(-strokeLength, equalsSpacing);
ctx.lineTo(strokeLength, equalsSpacing);
ctx.stroke();
break;
case '×':
// 乘号:两条斜线
ctx.beginPath();