https://github.com/pengfeiw/miracle-canvas

You can add movable、resizable、zoomable、rotatable object(text、shape and image, etc) on html canvas with this library.
https://github.com/pengfeiw/miracle-canvas

canvas typescript

Last synced: 13 days ago
JSON representation

You can add movable、resizable、zoomable、rotatable object(text、shape and image, etc) on html canvas with this library.

• Host: GitHub
• URL: https://github.com/pengfeiw/miracle-canvas
• Owner: pengfeiw
• Created: 2021-04-18T01:37:46.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-18T08:22:17.000Z (over 3 years ago)
• Last Synced: 2024-11-30T22:18:20.735Z (2 months ago)
• Topics: canvas, typescript
• Language: TypeScript
• Homepage: https://pengfeixc.com/blogs/javascript/miracle-canvas
• Size: 127 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# miracle-canvas

You can add movable、resizable、zoomable、rotatable object(text、shape and image, etc) on html canvas with this library.

![](https://cdn.jsdelivr.net/gh/pengfeiw/[email protected]/image/miracle-canvas.gif)

blog: [https://pengfeixc.com/blog/607c137a6d87a10eb2594fad](http://pengfeixc.com/blog/607c137a6d87a10eb2594fad)

github code: [https://github.com/pengfeiw/miracle-canvas](https://github.com/pengfeiw/miracle-canvas)

github demo: [https://github.com/pengfeiw/miracle-canvas-demo](https://github.com/pengfeiw/miracle-canvas-demo) 

### install

You can install the library with npm:

```bash

npm install miracle-canvas

```

with yarn:

```bash

yarn add miracle-canvas

```

with cdn:

```js

// you can change the version number in src, below is version 1.0.6

```

### how to use

1. First set canvas with miracle:

```javascript

import {Miracle} from "miracle-canvas";

const miracle = new Miracle(canvas);

```

2. Add some entity(shape、image etc):

```javascript

import {MiracleEntity, MiracleGraphic, MiracleControl} from "./miracle/index";

const {Circle, PolyShape, Image} = MiracleEntity;

const {ImageControl} = MiracleControl;

const {Point} = MiracleGraphic;

// create a rectangle

const rect = new PolyShape([

    new Point(150, 30),

    new Point(200, 30),

    new Point(200, 120),

    new Point(150, 120)

], false);

rect.filled = false;  // set filled false

rect.closed = true;

// create a circle

const circle = new Circle(new Point(400, 400), 50);

circle.strokeStyle = "green";

// create a triangle

const triangle = new PolyShape([

    new Point(100, 100),

    new Point(150, 150),

    new Point(100, 200)

]);

triangle.filled = true; // set filled true

triangle.closed = true;

triangle.fillStyle = "gray";

// create image with specific size

const img = new Image(new Point(200, 300), "/image.png", {

    height: 150,

    width: 180

});

// add the above entities

miracle.addEntity(circle, rect, triangle, img);

```

3. You can also set the visible of entity and the control point.

```javascript

// set the visible of entity

triangle.visible = false;

// set visible of operate control 

miracle.xLocked = false;

miracle.yLocked = false;

miracle.diagLocked = false;

miracle.rotateLocked = false;

```

4. Add custom control, only support `ImageControl` now.

```typescript

import {MiracleControl} from "./miracle/index";

const {ImageControl} = MiracleControl;

// create the button

const btn = new ImageControl("/clear.png", {width: 30, height: 30}, ControlBase.lt, -15, -30);

btn.mouseUpHandler = () => {

    window.alert("you click the button.");

};

// add the button to Entity

rect.addControl(btn);

```

5. if used with cdn. You access the class moudule under the `GlobalMiracle`:

```typescript

GlobalMiracle.Miracle;

GlobalMiracle.MiracleEntity;

GlobalMiracle.MiracleGraphic;

GlobalMiracle.MiracleControl;

```

### codepen

    See the Pen miracle-canvas by Pengfei Wang

    (@AhCola) on CodePen.