miracl-canvas: 在html canvas上添加可移动、缩放、旋转图元的库

miracle-canvas

转自王鹏飞的个人网站
最近写了一个增强html canvas功能的库miracle-canvas,使用miracle-canvas可以在html canvas上添加可移动、缩放和旋转的图元,目前图元支持自定义形状和图片。

功能如下图所示:
miracl-canvas: 在html canvas上添加可移动、缩放、旋转图元的库

一. 安装

可以通过npm或者yarn安装:

npm install miracle-canvas

二.使用方式

1.引入miracle-canvas

import Miracle from "miracle-canvas";

const miracle = new Miracle(canvas);

2.添加图元

// 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.可以设置图元是否可见,控制点(平移、旋转、缩放)是否可见

// 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;

三.更新

这个库的基本功能才写完,后面我也会一直更新功能的,会增加更多类型的图元,也会增加自定义按钮事件,每次更新我会第一时间发布到npm,并同步到github上。这个库可能会有一些bug,如果有问题欢迎在下方留言,我会加快改进修正,在这里也提前说一声谢谢。

四.源码

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

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

npm包:https://www.npmjs.com/package/miracle-canvas?activeTab=dependents

上一篇:6-6 请按照要求实现接口 (10 分)


下一篇:119. Pascal's Triangle II (E)