R524809
126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
import GridDraw from '../shared/service/gridDraw';
|
||
import { createFocusPage } from '../shared/common/focusPageMixin';
|
||
import { GridDrawingData } from '../shared/service/gridDraw';
|
||
import { generateCompletePattern } from '../shared/utils/gridUtils';
|
||
import { getRandom3x3Shape } from '../shared/shapes/gridShapes3x3';
|
||
import { getRandom5x5Shape } from '../shared/shapes/gridShapes5x5';
|
||
import { getRandom7x7Shape } from '../shared/shapes/gridShapes7x7';
|
||
import { ShapeTemplate } from '../shared/types/gridTypes';
|
||
|
||
createFocusPage({
|
||
canvas: null as Canvas | null,
|
||
ctx: null as RenderingContext | null,
|
||
boxHeight: 0,
|
||
boxWidth: 0,
|
||
drawService: null as GridDraw | null,
|
||
gridData: null as GridDrawingData | null,
|
||
|
||
data: {
|
||
pageTitle: '格子仿画',
|
||
functionId: '',
|
||
hasContent: false,
|
||
showShareDialog: false,
|
||
currentMode: '3x3', // '3x3', '5x5', '7x7'
|
||
currentModeName: '3×3',
|
||
typeActions: [
|
||
{ name: '3×3', value: '3x3' },
|
||
{ name: '5×5', value: '5x5' },
|
||
{ name: '7×7', value: '7x7' },
|
||
],
|
||
},
|
||
|
||
onLoad(options: { id?: string }) {
|
||
const functionId = options.id || 'grid-drawing';
|
||
this.setData({
|
||
functionId,
|
||
});
|
||
this.initPageInfo(functionId, '格子仿画');
|
||
},
|
||
|
||
onReady() {
|
||
this.initCanvas({
|
||
createDrawService: (
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) => {
|
||
return new GridDraw(canvas, ctx, options);
|
||
},
|
||
drawServiceOptions: {
|
||
subTitle: '在网格中填充颜色，形成各种形状',
|
||
functionId: this.data.functionId,
|
||
},
|
||
onCanvasReady: () => {
|
||
// 初始随机生成
|
||
this.onRandom();
|
||
},
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 绘制Canvas内容
|
||
*/
|
||
async drawCanvas() {
|
||
if (!this.ctx || !this.drawService || !this.gridData) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 更新 Header 的 Title
|
||
if (this.drawService) {
|
||
this.drawService.options.title = this.data.currentModeName;
|
||
}
|
||
|
||
await this.drawService.draw(this.gridData);
|
||
this.setData({ hasContent: true });
|
||
} catch (error) {
|
||
console.error('绘制失败:', error);
|
||
this.setData({ hasContent: false });
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 随机生成
|
||
*/
|
||
onRandom() {
|
||
const mode = this.data.currentMode;
|
||
let shape: ShapeTemplate;
|
||
let config: GridConfig;
|
||
|
||
// 根据模式选择形状和配置
|
||
if (mode === '3x3') {
|
||
shape = getRandom3x3Shape();
|
||
config = { rows: 3, cols: 3 };
|
||
} else if (mode === '5x5') {
|
||
shape = getRandom5x5Shape();
|
||
config = { rows: 5, cols: 5 };
|
||
} else {
|
||
// 7x7
|
||
shape = getRandom7x7Shape();
|
||
config = { rows: 7, cols: 7 };
|
||
}
|
||
|
||
// 生成完整的格子数据
|
||
const cells = generateCompletePattern(shape);
|
||
|
||
this.gridData = {
|
||
config,
|
||
cells,
|
||
name: shape.name,
|
||
};
|
||
|
||
this.drawCanvas();
|
||
},
|
||
|
||
/** 选择类型 */
|
||
onSelectType(event: any) {
|
||
const { name, value } = event.detail;
|
||
this.setData({
|
||
currentMode: value,
|
||
currentModeName: name,
|
||
});
|
||
// 重新生成数据
|
||
this.onRandom();
|
||
},
|
||
});
|