ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-04-18 19:32:25  阅读:338  来源: 互联网

标签:triangle canvas false Point 缩放 miracle new 图元


miracle-canvas

转自王鹏飞的个人网站
最近写了一个增强html canvas功能的库miracle-canvas,使用miracle-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

标签:triangle,canvas,false,Point,缩放,miracle,new,图元
来源: https://blog.csdn.net/AHcola233/article/details/115838015

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有