OkayPaiter是一个轻量级的Cavas框架库，提供了Cavas基本图形图像、动画、层、鼠标键盘事件管理机制。
使用OkayPaiterOkayPaiter码云地址：https://gitee.com/djxfire/OkayPaiter ，也可以使用 pmistallokaypaiter下载。在dist目录下找到okay-paiter.mi.js
引入OkayPaiter在使用引入OkayPaiter前，需要在HTML中加载对应JavaScript文件：
<script type = "javascript" src = "okay-paiter.mi.js"></script>创建画布在使用OkayPaiter时，我们必须新建一个Cavas对象，并且需要一个DOM容器:
<div id = "cavas" style = "width:500px;height:600px;"></div> let cavas = ew okay.Cavas({ ele: 'cavas'})Cavas类只接受ID属性作为参数。至此我们已经在ID为cavas的DIV里创建了cavas节点，输出结果为：
<div id = "cavas" style = "width:500px;height:600px;"> <cavas width = "500" height="600" tabidex="0" style = "outlie:oe;"></div>在画布中添加元素OkayPaiter提供多种基本图形。我们可以直接通过cavas的addChild添加元素，以下添加了一个圆：
let cavas = ew okay.Cavas({ ele: 'cavas'})let circle = ew okay.Circle(100)circle.setPositio(300, 300)circle.setColor(ew okay.Color(255,0,0,255))cavas.addChild(circle)cavas.pait()创建了一个圆心在（300,300）位置，半径为100，颜色为红色的圆。
为元素添加事件我们可以直接通过元素的Node.addEvetListeer方法为元素添加事件，以下为元素添加点击事件：
let cavas = ew okay.Cavas({ ele: 'cavas'})let circle = ew okay.Circle(100)circle.setPositio(300, 300)circle.setColor(ew okay.Color(255,0,0,255))cavas.addChild(circle)circle.addEvetListeer(okay.Evet.Type.EVENT_MOUSE_DOWN, (evet, obj) => { alert('点击了圆')})cavas.pait()当用户点击圆时将执行alert
为元素添加动画我们可以直接通过元素的Node.ruActio运行动画效果，以下为元素添加平移动画：
let cavas = ew okay.Cavas({ ele: 'cavas', caActio:true})let circle = ew okay.Circle(100)circle.setPositio(300, 300)circle.setColor(ew okay.Color(255,0,0,255))cavas.addChild(circle)circle.addEvetListeer(okay.Evet.Type.EVENT_MOUSE_DOWN, (evet, obj) => { let mvActio = ew okay.ActioMove(ew okay.Poit(100, 100),3) circle.ruActio(mvActio)})cavas.pait()上述例子点击圆时圆将在3秒内移动到点（100,100）处。
评论