OkayPainter轻量级 Canvas 绘图库
OkayPainter 是一个轻量级的Canvas框架库,提供了Canvas基本图形图像、动画、层、鼠标键盘事件管理机制。
使用OkayPainter
OkayPainter 码云地址:https://gitee.com/djxfire/OkayPainter ,也可以使用 npm install okaypainter
下载。 在 dist 目录下找到okay-painter.min.js
引入OkayPainter
在使用 引入OkayPainter 前,需要在 HTML 中加载对应 JavaScript 文件:
<script type = "javascript" src = "okay-painter.min.js"></script>
创建画布
在使用OkayPainter时,我们必须新建一个Canvas对象,并且需要一个DOM容器:
<div id = "canvas" style = "width:500px;height:600px;"></div>
let canvas = new okay.Canvas({ ele: 'canvas' })
Canvas类只接受ID属性作为参数。至此我们已经在ID为canvas的DIV里创建了canvas节点,输出结果为:
<div id = "canvas" style = "width:500px;height:600px;"> <canvas width = "500" height="600" tabindex="0" style = "outline:none;"> </div>
在画布中添加元素
OkayPainter提供多种基本图形。我们可以直接通过canvas的addChild添加元素,以下添加了一个圆:
let canvas = new okay.Canvas({ ele: 'canvas' }) let circle = new okay.Circle(100) circle.setPosition(300, 300) circle.setColor(new okay.Color(255,0,0,255)) canvas.addChild(circle) canvas.paint()
创建了一个圆心在(300,300)位置,半径为100,颜色为红色的圆。
为元素添加事件
我们可以直接通过元素的Node.addEventListener
方法为元素添加事件,以下为元素添加点击事件:
let canvas = new okay.Canvas({ ele: 'canvas' }) let circle = new okay.Circle(100) circle.setPosition(300, 300) circle.setColor(new okay.Color(255,0,0,255)) canvas.addChild(circle) circle.addEventListener(okay.Event.Type.EVENT_MOUSE_DOWN, (event, obj) => { alert('点击了圆') }) canvas.paint()
当用户点击圆时将执行alert
为元素添加动画
我们可以直接通过元素的Node.runAction
运行动画效果,以下为元素添加平移动画:
let canvas = new okay.Canvas({ ele: 'canvas', canAction:true }) let circle = new okay.Circle(100) circle.setPosition(300, 300) circle.setColor(new okay.Color(255,0,0,255)) canvas.addChild(circle) circle.addEventListener(okay.Event.Type.EVENT_MOUSE_DOWN, (event, obj) => { let mvAction = new okay.ActionMove(new okay.Point(100, 100),3) circle.runAction(mvAction) }) canvas.paint()
上述例子点击圆时圆将在3秒内移动到点(100,100)处。
评论
p5.jsJavaScript 绘图库
p5.js是一套具有类似Processing编程语言的可视化JavaScript库,是当代Web的Processing,能够比得上甚至优于D3.js、EaselJS、Three.js、Rapha&am
p5.jsJavaScript 绘图库
0
DISLIN绘图库
DISLIN是一个高级别,易于使用的绘图库,支持曲线,条形图,饼图,三维彩色图,曲面,轮廓,和地图显示。支持多种输出格式,如X11的,VGA,PostScript,PDF格式,CGM,HPGL,TIF
DISLIN绘图库
0
Sigma.jsJS 绘图库
sigma.js是一个开源的轻量级JS库,用来绘制各种图形,使用的是HTMLCanvas元素。示例代码:var sigRoot = document.getElementById('sig');var
Sigma.jsJS 绘图库
0
Fabric.jsJavaScript 绘图库
Fabric.js是一个在服务器端运行的Node.js扩展模块,用于在Web上绘制各种图形的JS库。示例代码:var fabric = require('fabric').fabric, can
Fabric.jsJavaScript 绘图库
0