随笔分类 -  axeslide

摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 以下代码是typescript语言来写的,其实和es6面向对象的写法基本一致。大家阅读后都明白这些方法的作用。 hash hash结构用于处理和表现类似key/value的键值对,其中key通常可用来快速查找,同时key是区分大小写;va 阅读全文
posted @ 2017-07-17 14:32 方帅 阅读(1779) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移。请查看示例,效果如下平滑的缩放平移。 实现该效果使用d3的js代码 1 var width = 960, 阅读全文
posted @ 2017-02-20 18:18 方帅 阅读(1969) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面。动画效果可重新查看文章系列第一篇《AxeSlide软件项目梳理》中的作品展示动画。 实例效果: Tween类型: Linear Quad 阅读全文
posted @ 2017-02-20 15:22 方帅 阅读(913) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件里的一个画面包含很多个元素,但是当缩放到某个局部位置时,需要绘制的元素个数就很少。那么怎么判断某个元素是否需要进行绘制呢? 我们在绘制整个画面时,是进行循环遍历每个元素的,如下判断是否进行绘制的代码: 1 var elements = 阅读全文
posted @ 2017-02-11 17:42 方帅 阅读(679) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 自动保存的基本思路 1)软件每次打开都会创建一个保存画布元素信息的文件,文件名是在打开软件时生成的唯一字符串。可同时打开多个窗口,所以保存文件路径下work/context文件夹里可能会有多个文件。 2)每隔2分钟就更新一次context 阅读全文
posted @ 2017-01-18 18:12 方帅 阅读(544) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 保存文件 保存内容有哪些? 我们需要保存的内容信息 1)context.json 存储画布状态信息和所有元素的配置信息(这个文件在过程中生成) 2)插入的图片、音频、视频等资源 3)所用到的字体文件 4)每一帧的缩略图 将这些文件压缩到一 阅读全文
posted @ 2017-01-18 15:30 方帅 阅读(987) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 导出的视频和播放器自动播放效果时一样的,这样用户就可以传到视频网站分享出去,或者mp4文件发送分享给朋友。 导出视频过程 我们导出视频的思路就是: 将画布上绘制的画面一张张存储成图片,我们是一秒存20张图片,假如一个8帧的作品,每一帧的时 阅读全文
posted @ 2017-01-17 15:21 方帅 阅读(736) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 了解本节内容技术点: 安装模块“fluent-ffmpeg” https://github.com/fluent-ffmpeg/node-fluent-ffmpeg API地址:http://www.ffmpeg.org/ 需求背景,我们 阅读全文
posted @ 2017-01-17 10:41 方帅 阅读(999) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图。 在软件里显示的同样是这样的动态效果: 那么这张动态的图是怎么绘制到canvas上面的呢,如果只是像绘制一张普通图片用context.drawIm 阅读全文
posted @ 2017-01-13 18:11 方帅 阅读(3455) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件。 MouseEventClass就是绑定事件的过程,我们这里只列出部分代码,未列出的事件绑定的部分同理。 如何使用上面我们创建的两个类呢 我们在使用的时候先将MouseEventInfo这个类初 阅读全文
posted @ 2017-01-13 18:10 方帅 阅读(651) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比较合适的库。 下图中所有的图形都是我们自己写代码在canvas上绘制方法出来的,可以改变实心/空心,改变 阅读全文
posted @ 2017-01-13 18:10 方帅 阅读(2394) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 元素和影子 我们在主画布上绘制所有添加到画布上的元素,主画布上的所有元素存储在commonElements中。 在hitCanvas上,对应每一个元素commonElement都有一个对应的hitElement元素,这些元素存储在另外一个 阅读全文
posted @ 2017-01-13 18:09 方帅 阅读(2586) 评论(0) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果。 下面是具体实现的代码,draw函数里计算出大网格每条线的间隔和小网格线的间隔,以及大网格和小网格绘制所用的颜色。 具体的实现算法也是参照另外一个软件 阅读全文
posted @ 2017-01-13 18:09 方帅 阅读(1526) 评论(1) 推荐(0) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 多个canvas画布 从下面的截图我们可以看到有5个canvasDOM元素,id分别为canvas,ghostCanvas,HitCanvas,gridCanvas和animation_canvas,这里我们先介绍前4个canvas的作用 阅读全文
posted @ 2017-01-13 18:08 方帅 阅读(625) 评论(0) 推荐(1) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 游戏主循环介绍 我们利用“游戏主循环”的机制来绘制动态的画布,渲染循环。 我们首先补充一下游戏主循环的知识。 “游戏主循环”是一种能够随时间改变状态的用于渲染动画和游戏的技术。它的核心是一个尽可能频繁地运行的方法,来接收用户输入,更新随时 阅读全文
posted @ 2017-01-13 18:06 方帅 阅读(1718) 评论(0) 推荐(0) 编辑
摘要:先介绍一下我负责的软件项目 AxeSlide斧子演示,估计大部分人没有听说过,但国外有一款叫Prezi的软件,应该有人使用过。 这是我们产品的官网http://www.axeslide.com/,里面有很多用户上传的作品看过一个之后就知道这个软件具体的作用了。 下面这个gif的效果就是用软件做出来的 阅读全文
posted @ 2017-01-13 18:03 方帅 阅读(2211) 评论(0) 推荐(3) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响。 函数 方法 描述 translate dx,dx 转 阅读全文
posted @ 2016-07-06 16:45 方帅 阅读(32044) 评论(0) 推荐(6) 编辑
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。参数传递三种形式: 1)drawImage(image,x,y):在canvas中(x,y)处绘制图片 阅读全文
posted @ 2015-11-06 15:06 方帅 阅读(2031) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示