摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图。 在软件里显示的同样是这样的动态效果: 那么这张动态的图是怎么绘制到canvas上面的呢,如果只是像绘制一张普通图片用context.drawIm 阅读全文
posted @ 2017-01-13 18:11 方帅 阅读(3366) 评论(0) 推荐(0) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件。 MouseEventClass就是绑定事件的过程,我们这里只列出部分代码,未列出的事件绑定的部分同理。 如何使用上面我们创建的两个类呢 我们在使用的时候先将MouseEventInfo这个类初 阅读全文
posted @ 2017-01-13 18:10 方帅 阅读(620) 评论(0) 推荐(0) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比较合适的库。 下图中所有的图形都是我们自己写代码在canvas上绘制方法出来的,可以改变实心/空心,改变 阅读全文
posted @ 2017-01-13 18:10 方帅 阅读(2359) 评论(0) 推荐(0) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 元素和影子 我们在主画布上绘制所有添加到画布上的元素,主画布上的所有元素存储在commonElements中。 在hitCanvas上,对应每一个元素commonElement都有一个对应的hitElement元素,这些元素存储在另外一个 阅读全文
posted @ 2017-01-13 18:09 方帅 阅读(2499) 评论(0) 推荐(0) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果。 下面是具体实现的代码,draw函数里计算出大网格每条线的间隔和小网格线的间隔,以及大网格和小网格绘制所用的颜色。 具体的实现算法也是参照另外一个软件 阅读全文
posted @ 2017-01-13 18:09 方帅 阅读(1406) 评论(1) 推荐(0) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 多个canvas画布 从下面的截图我们可以看到有5个canvasDOM元素,id分别为canvas,ghostCanvas,HitCanvas,gridCanvas和animation_canvas,这里我们先介绍前4个canvas的作用 阅读全文
posted @ 2017-01-13 18:08 方帅 阅读(606) 评论(0) 推荐(1) 编辑
摘要: AxeSlide软件项目梳理 canvas绘图系列知识点整理 游戏主循环介绍 我们利用“游戏主循环”的机制来绘制动态的画布,渲染循环。 我们首先补充一下游戏主循环的知识。 “游戏主循环”是一种能够随时间改变状态的用于渲染动画和游戏的技术。它的核心是一个尽可能频繁地运行的方法,来接收用户输入,更新随时 阅读全文
posted @ 2017-01-13 18:06 方帅 阅读(1690) 评论(0) 推荐(0) 编辑
摘要: 先介绍一下我负责的软件项目 AxeSlide斧子演示,估计大部分人没有听说过,但国外有一款叫Prezi的软件,应该有人使用过。 这是我们产品的官网http://www.axeslide.com/,里面有很多用户上传的作品看过一个之后就知道这个软件具体的作用了。 下面这个gif的效果就是用软件做出来的 阅读全文
posted @ 2017-01-13 18:03 方帅 阅读(2133) 评论(0) 推荐(3) 编辑