分类:JavaScript
日期:2021年4月18日

miracle-canvas

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

功能如下图所示:

一. 安装

可以通过npm或者yarn安装:

npm install miracle-canvas

也可以通过cdn引入:

<script src="https://cdn.jsdelivr.net/gh/pengfeiw/miracle-canvas@1.0.6/src/bundle.js"></script>

二.使用方式

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;

三. codepen

四.更新

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

  • v1.0.6支持了自定义按钮,增加Miracle.limitInCanvas属性可以限制图元在canvas内,修复了一些bug,也增加cdn引入库使用,具体内容查看github。
  • v1.0.7支持触屏操作图元,支持手机等触屏设备,在实例化Miracle时,设置其支持触屏,修复框选bug。
  • v1.0.8修复canvas.toDataUrl错误,修复activeCollection undefined错误。
  • v1.0.9优化触屏操作,禁用触屏模式下的boxSelect操作。

五.源码

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

留言(0
发表评论
邮箱地址不会被公开。*表示必填项。
评论(支持部分html标签)*
姓名*
站点