开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
OkayPainter首页、文档和下载 - 轻量级 Canvas 绘图库 - 开源中国社区
全部项目分类
我要评价
GPL
JavaScript
跨平台
Janwool
分享
收藏
3 人收藏
收录时间:2018-05-21
OkayPainter 详细介绍

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)处。

OkayPainter

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 OkayPainter 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部