# es-shape-mode

> javascript graphical application

Latest version **1.0.4** (published 2022-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install es-shape-mode
pnpm add es-shape-mode
yarn add es-shape-mode
bun add es-shape-mode
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-03-30 |
| First published | 2022-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 219.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | boboco |
| Maintainers | boboco |
| Keywords | webgl, graphical |

## Links

- npm: https://www.npmjs.com/package/es-shape-mode
- Repository: https://github.com/whaijungit/shape
- Homepage: https://github.com/whaijungit/shape#readme
- Issues: https://github.com/whaijungit/shape/issues
- npm.io page: https://npm.io/package/es-shape-mode

## Dependencies (1)

- [three](https://npm.io/package/three.md) ^0.139.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2022-03-30

## README

# shapes

shape a baisc on EcmaScript development

development baisc Typescript

programming thought object oriented or functional formula

## about

why use typescript learn docs [typescript](https://www.typescriptlang.org/)

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](https://www.oracle.com/java/) language

## learn project

project package use `pnpm`

1. install

```shell
pnpm i
```

2. development

```shell
npm run dev
```

3. production

```shell
npm run build
```

## graphics model

basic graphic in project src `core/Graphics.ts`

```typescript
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

```typescript
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 
```typescript
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
```

---
_Source: https://npm.io/package/es-shape-mode · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._