01 2017 档案
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 自动保存的基本思路 1)软件每次打开都会创建一个保存画布元素信息的文件,文件名是在打开软件时生成的唯一字符串。可同时打开多个窗口,所以保存文件路径下work/context文件夹里可能会有多个文件。 2)每隔2分钟就更新一次context
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 保存文件 保存内容有哪些? 我们需要保存的内容信息 1)context.json 存储画布状态信息和所有元素的配置信息(这个文件在过程中生成) 2)插入的图片、音频、视频等资源 3)所用到的字体文件 4)每一帧的缩略图 将这些文件压缩到一
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 导出的视频和播放器自动播放效果时一样的,这样用户就可以传到视频网站分享出去,或者mp4文件发送分享给朋友。 导出视频过程 我们导出视频的思路就是: 将画布上绘制的画面一张张存储成图片,我们是一秒存20张图片,假如一个8帧的作品,每一帧的时
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 了解本节内容技术点: 安装模块“fluent-ffmpeg” https://github.com/fluent-ffmpeg/node-fluent-ffmpeg API地址:http://www.ffmpeg.org/ 需求背景,我们
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图。 在软件里显示的同样是这样的动态效果: 那么这张动态的图是怎么绘制到canvas上面的呢,如果只是像绘制一张普通图片用context.drawIm
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件。 MouseEventClass就是绑定事件的过程,我们这里只列出部分代码,未列出的事件绑定的部分同理。 如何使用上面我们创建的两个类呢 我们在使用的时候先将MouseEventInfo这个类初
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比较合适的库。 下图中所有的图形都是我们自己写代码在canvas上绘制方法出来的,可以改变实心/空心,改变
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 元素和影子 我们在主画布上绘制所有添加到画布上的元素,主画布上的所有元素存储在commonElements中。 在hitCanvas上,对应每一个元素commonElement都有一个对应的hitElement元素,这些元素存储在另外一个
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果。 下面是具体实现的代码,draw函数里计算出大网格每条线的间隔和小网格线的间隔,以及大网格和小网格绘制所用的颜色。 具体的实现算法也是参照另外一个软件
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 多个canvas画布 从下面的截图我们可以看到有5个canvasDOM元素,id分别为canvas,ghostCanvas,HitCanvas,gridCanvas和animation_canvas,这里我们先介绍前4个canvas的作用
阅读全文
摘要:AxeSlide软件项目梳理 canvas绘图系列知识点整理 游戏主循环介绍 我们利用“游戏主循环”的机制来绘制动态的画布,渲染循环。 我们首先补充一下游戏主循环的知识。 “游戏主循环”是一种能够随时间改变状态的用于渲染动画和游戏的技术。它的核心是一个尽可能频繁地运行的方法,来接收用户输入,更新随时
阅读全文
摘要:先介绍一下我负责的软件项目 AxeSlide斧子演示,估计大部分人没有听说过,但国外有一款叫Prezi的软件,应该有人使用过。 这是我们产品的官网http://www.axeslide.com/,里面有很多用户上传的作品看过一个之后就知道这个软件具体的作用了。 下面这个gif的效果就是用软件做出来的
阅读全文
摘要:Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性: 可以设置中间件来响应 HTTP 请求。
阅读全文
摘要:Async介绍 Async是一个流程控制工具包,提供了直接而强大的异步功能。基于Javascript为Node.js设计,同时也可以直接在浏览器中使用。 Async提供了大约20个函数,包括常用的 map, reduce, filter, forEach 等,异步流程控制模式包括,串行(series
阅读全文
摘要:1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 然后建一张表user如下 接下来我们利用nodejs连接mysql数据库 但是实际每次创建连接都需要一定的开销,执行效率就会有影响。下面介绍一种连
阅读全文
摘要:1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球。通过前面的进阶3教程《nodejs进阶(3)—路由处理》重介绍的url模块,我们知道接收方法如下这样写 那么在我
阅读全文
摘要:我们先实现从指定路径读取图片然后输出到页面的功能。 先准备一张图片imgs/dog.jpg。 file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'。(file.js 在上一篇文章nodejs进阶3-路由处理中有完整的内容) 服务器创建代码如下,注意在发送请求头
阅读全文
摘要:1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回。 url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) 接收参数: urlStr url字符串 parseQueryString 为true时将使用查询模
阅读全文
摘要:函数调用 1. 文件内普通函数调用 创建一个js文件命名为2_callFunction.js,其中定义一个函数fun1,向返回对象输出了一段字符串“你好,我是fun1”。 我们运行:node 2_callFunction,打开浏览器 2. 调用其他文件里的函数 首先我们先创建一个otherfuns.
阅读全文
摘要:下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等。 搭建服务器页面输出hello world 基本语句说明: 1)require 语句,模块通过它加载。 对于该语句的解析可参见我的文章《require() 源码解读》(http://ww
阅读全文