# qcanvas

**Repository Path**: aagg22/qcanvas

## Basic Information

- **Project Name**: qcanvas
- **Description**: Qcanvas是一个功能强大而使用简单的JS Canvas库，在线文档：http://lizhicheng99.gitee.io/qcanvas-api-1.0 https://zhicheng99.github.io/Qcanvas-API/ 能通过使用它实现在Canvas上画线、画矩形、画图片、实现动画、实现拖动、包括给元素注册各类事件等一系列功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: gitee
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-10-25
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Qcanvas

文档同步更新
http://lizhicheng99.gitee.io/qcanvas-api-1.0 
https://zhicheng99.github.io/Qcanvas-API/ 



框架引入方法
> ##### 方法一
> npm安装
>> 执行：npm install qcanvas
>> 页面引用： import {Qcanvas} from 'qcanvas';




> ##### 方法二
> 使用script标签直接引用

> 示例展示
https://zhicheng99.github.io/qcanvas/
部分示例载图

线
![](img/2.0/line.jpg)

文本
![](img/2.0/text.jpg)

矩形
![](img/2.0/rect.jpg)

圆
![](img/2.0/arc.jpg)

多边形
![](img/2.0/polygon.jpg)

图片
![](img/2.0/img.jpg)

精灵图
![](img/2.0/spirit.jpg)

修改元素层级
![](img/2.0/z-index.jpg)

layer中的元素层级
![](img/2.0/layer_z-index.jpg)

拖动限制范围 (现只支持Qarc、Qpolygon、Qrect实例)
![](img/2.0/range.jpg)

右键菜单
![](img/2.0/contextMenu.jpg)

二次曲线
![](img/2.0/quadraticCurve.jpg)

二次曲线控制点计算
![](img/2.0/quadraticCurve——handler.jpg)


三次曲线
![](img/2.0/bezierCurve.jpg)

三次曲线控制点计算
![](img/2.0/bezierCurve——handler.jpg)

折线连接元素（横向）
![](img/2.0/broken_horizontal.jpg)

折线连接元素（竖向）
![](img/2.0/broken_vertical.jpg)

折线连接元素（横向）拖动
![](img/2.0/broken_horizontal——drag.jpg)

折线连接元素（竖向）拖动
![](img/2.0/broken_vertical——drag.jpg)

rect缩放 旋转
![](img/2.0/resize_rotate.jpg)

rect缩放 旋转 算法
![](img/2.0/rect_resize_rotate.jpg)