From a0473c315cebd9253373387e69b83d3fcbe852d4 Mon Sep 17 00:00:00 2001 From: chaxus Date: Sat, 7 Dec 2024 14:25:51 +0800 Subject: [PATCH] chore: update dependency version --- package.json | 24 +++++++++---------- packages/docs/cn/src/article/visual.md | 14 ++++++++++- .../ranuts/src/utils/visual/application.ts | 2 -- .../ranuts/src/utils/visual/render/index.ts | 2 +- .../ranuts/src/utils/visual/render/render.ts | 2 +- .../src/utils/visual/vertex/container.ts | 2 +- 6 files changed, 28 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 8c9259c50..16be17299 100644 --- a/package.json +++ b/package.json @@ -24,22 +24,22 @@ "author": "", "license": "ISC", "devDependencies": { - "@eslint/js": "^9.13.0", - "@types/node": "^22.7.7", - "@typescript-eslint/parser": "^8.10.0", - "eslint": "^9.13.0", + "@eslint/js": "^9.16.0", + "@types/node": "^22.10.1", + "@typescript-eslint/parser": "^8.17.0", + "eslint": "^9.16.0", "eslint-plugin-i": "^2.29.1", - "eslint-plugin-n": "^17.11.1", - "eslint-plugin-regexp": "^2.6.0", + "eslint-plugin-n": "^17.14.0", + "eslint-plugin-regexp": "^2.7.0", "jscpd": "^4.0.5", - "prettier": "^3.3.3", - "terser": "^5.36.0", - "typescript": "^5.6.3", - "typescript-eslint": "^8.10.0", - "vite": "^5.4.9", + "prettier": "^3.4.2", + "terser": "^5.37.0", + "typescript": "^5.7.2", + "typescript-eslint": "^8.17.0", + "vite": "^5.4.11", "vitest": "^1.6.0" }, "dependencies": { - "globals": "^15.11.0" + "globals": "^15.13.0" } } diff --git a/packages/docs/cn/src/article/visual.md b/packages/docs/cn/src/article/visual.md index ee963a833..a4fae5bf1 100644 --- a/packages/docs/cn/src/article/visual.md +++ b/packages/docs/cn/src/article/visual.md @@ -114,6 +114,8 @@ class Container extends Vertex { } ``` + + ## 四：基础图形的封装 在多数二维绘图业务场景中，复杂图形往往可以简化为基础图形的组合。核心的基础元素包括圆形、多边形以及贝塞尔曲线，它们是实现图形构建的基本单位。 @@ -248,8 +250,18 @@ class Graphics extends Container { }; } ``` +表示该图形是填充还是描边的。 + +接下来是绘制各种基础图形了，绘制图形的时候，我们会将图形的绘制数据和绘制方法进行分离处理。可以理解为。 + +1. 生成绘制图形的数据：`state` +2. 执行绘制图形的方法：`action` + +`Graphics` 类作为绘制各种图形的容器，会接收`state`和`action`,生成真正即将要绘制的数据，最后通过`render`方法，统一遍历所有的数据。进行绘制到页面上。 + +### 1.圆 -接下来是绘制各种基础图形了，先从最简单的圆形开始。`Graphics` 类事绘制各种图形的容器，因此所有的基础图形绘制方法都在 `Graphics` 类上。增加绘制圆形的方法： +首先在 `Graphics` 类上实现绘制方法： ```ts /** diff --git a/packages/ranuts/src/utils/visual/application.ts b/packages/ranuts/src/utils/visual/application.ts index e5a12d992..a6b799dcc 100644 --- a/packages/ranuts/src/utils/visual/application.ts +++ b/packages/ranuts/src/utils/visual/application.ts @@ -13,8 +13,6 @@ export class Application { const { view = document.createElement('canvas') } = options || {}; this.view = view; this.renderer = getRenderer(options); - // this.start(); - // this.render(); } public render = (): void => { this.renderer.render(this.stage); diff --git a/packages/ranuts/src/utils/visual/render/index.ts b/packages/ranuts/src/utils/visual/render/index.ts index 266a0f583..17e2ac5b9 100644 --- a/packages/ranuts/src/utils/visual/render/index.ts +++ b/packages/ranuts/src/utils/visual/render/index.ts @@ -1,6 +1,6 @@ import { RENDERER_TYPE } from '@/utils/visual/enums'; import { CanvasRenderer } from '@/utils/visual/render/canvasRenderer'; -import { WebGLRenderer } from '@/utils/visual/render/webGLRenderer'; +import { WebGLRenderer } from '@/utils/visual/render/webGlRenderer'; import type { Renderer } from '@/utils/visual/render/render'; import type { IApplicationOptions } from '@/utils/visual/types'; diff --git a/packages/ranuts/src/utils/visual/render/render.ts b/packages/ranuts/src/utils/visual/render/render.ts index 7aa0ea135..3bb8bcec1 100644 --- a/packages/ranuts/src/utils/visual/render/render.ts +++ b/packages/ranuts/src/utils/visual/render/render.ts @@ -10,7 +10,7 @@ export abstract class Renderer { public canvasEle: HTMLCanvasElement; public screen = new Rectangle(); constructor(options: IApplicationOptions) { - const { view } = options; + const { view = document.createElement('canvas') } = options; this.canvasEle = view; this.screen.width = view.width; this.screen.height = view.height; diff --git a/packages/ranuts/src/utils/visual/vertex/container.ts b/packages/ranuts/src/utils/visual/vertex/container.ts index 52353818d..39b8edbd4 100644 --- a/packages/ranuts/src/utils/visual/vertex/container.ts +++ b/packages/ranuts/src/utils/visual/vertex/container.ts @@ -3,7 +3,7 @@ import { Transform } from '@/utils/visual/math'; import { CONTAINER } from '@/utils/visual/enums'; import type { CanvasRenderer } from '@/utils/visual/render/canvasRenderer'; import type { Point } from '@/utils/visual/vertex/point'; -import type { WebGLRenderer } from '@/utils/visual/render/webGLRenderer'; +import type { WebGLRenderer } from '@/utils/visual/render/webGlRenderer'; import type { BatchRenderer } from '@/utils/visual/render/batchRenderer'; import type { Batch } from '@/utils/visual/render/utils/batch/index';