shapes

shape a baisc on EcmaScript development

development baisc Typescript

programming thought object oriented or functional formula

about

why use typescript learn docs typescript

why use object oriented shapes project dev? object orented Good fine-grained division of modules for object-oriented development programs Not knowing what object-oriented is does not affect the development of this project。 If you want to learn object-oriented development program, it is recommended to look at the Java language

learn project

project package use pnpm

1. install

pnpm i

2. development

npm run dev

3. production

npm run build

graphics model

basic graphic in project src core/Graphics.ts

import { Coordinate, DrawMode, GraphicsStyles } from '../interface/core';
/** @description build graphics model
 * @param type graphics type
 * @param name graphics name
 * @param styles graphics styles
 * @param centerPoint graphics baisc coordinate
 * @param drawMode context render stroke or fill
 * @returns {Graphics} Graphics
 */
export declare abstract class Graphics<S = Coordinate[]> {
    private readonly _type;
    private readonly _name;
    /** @description shape default content coordinate arry */
    private readonly _shape;
    private _drawMode;
    private readonly _styles;
    private readonly _centerPoint;
    constructor(type: symbol, shape: S, name: string, styles?: GraphicsStyles, centerPoint?: Coordinate, drawMode?: DrawMode);
    /** @description render graphics to view container */
    render(context: CanvasRenderingContext2D, animate?: boolean): void;
    /** @description apply canvasRenderingContext2d styles */
    private applyStyle;
    /** @description clear canvasRenderingContext2d rect */
    private clear;
    /** @description set graphics draw mode stroke or fill */
    set drawMode(mode: DrawMode);
    /** @description get graphics shape */
    get shape(): S;
    /** @description get by graphics name only */
    get name(): string;
    /** @description get graphics center point */
    get centerPoint(): Coordinate;
    /** @description get graphics type */
    get type(): symbol;
    /** @description get graphics draw mode stroke or fill */
    get drawMode(): DrawMode;
    /** @description draw graphics */
    protected abstract draw(context: CanvasRenderingContext2D): void;
    /** @description animate run use requestAnimationFrame */
    protected abstract update(context: CanvasRenderingContext2D, animate: boolean): boolean;
}

1. Circle

import { Circle } from './model/Circle'
// startPoint raduis  stroke fill CanvasRenderingContext2D.styles supper
const circle = new Circle({ x: 100, y: 200, z: 0 }, 50, 'stroke', styles);
const canvas: HTMLCanvasElement = document.getElementById('canvas');
const context: CanvasRenderingContext2D = canvas.getContext('2d');
circle.render(context);
// stroke circle in graphics circle view

2. Line

import { Line } from './model/Line'
// startPoint raduis  stroke fill CanvasRenderingContext2D.styles supper
const circle = new Circle({ x: 100, y: 200, z: 0 }, 50, 'stroke', styles);
const canvas: HTMLCanvasElement = document.getElementById('canvas');
const context: CanvasRenderingContext2D = canvas.getContext('2d');
circle.render(context);
// stroke circle in graphics circle view