html5可视化图形编辑器(基于canvas)

我以前特别喜欢flash，不过flash水平一般，那是的我并不是程序员，充其量也就是个爱好者，在这个html5的时代中，我依旧对那个有时间轴的flash编辑界面念念不忘。于是便有了这篇文章。我的目标是做一款在线的图片，文档，动画，游戏生成器。目标比较大（个人比较贪），目前只实现了一部分，但是我相信时间能缔造一切，也希望大神们多多帮忙，谢谢了！我把所有的代码写上来，一是帮我记录开发过程，二是供大家查看研究，有兴趣的多多留言交流。

创建一个js文件起好响亮大名在webstorm中不写hello，写一个html5中的flash，一个基于canvas（并非基于SVG）的强大框架（哈哈目标远大，任务重啊！）

面向对象可以简化开发难度，便于维护，为了做到更好的面向对象，要对js中的一些东西进行完善。

1先拿数组开刀

/**
* 删除数组的元素
*/Array.prototype.remove = function (val) {if (val != null && this.length > 0) {for (var i = 0; i < this.length; i++) {if (this[i] == val) {this.splice(i, 1);break;}}}
}
/**** 删除指定索引处元素* @param dx* @returns {Array}*/
Array.prototype.del = function (dx) {if (isNaN(dx) || dx > this.length || dx < 0) {return this;} else {this.splice(dx, 1);}
}
/**** 向数组末尾追加一个元素* @param val* @returns {Number|number}*/
Array.prototype.add = function (val) {if (val != null) {return  this.push(val);}
}
/**** 清空数组* @returns {Array|T[]}*/
Array.prototype.clear = function () {return this.splice(0, this.length);
}/***** 交换两个元素的值* @param index1* @param index2* @returns {*|T}*/
Array.prototype.swap = function (index1, index2) {if (index1 < this.length && index2 < this.length && index1 >= 0 && index2 >= 0) {return  this[index1] = this.splice(index2, 1, this[index1])[0];}
}
/*** 数组上移* @param index*/
Array.prototype.up = function (index) {if (index != null && index >= 0 && index < this.length) {if (index == 0) {return;}this.swap(index, index - 1);}
};
/***** 数组下移* @param index*/
Array.prototype.down = function (index) {if (index != null && index >= 0 && index < this.length) {if (index == this.length - 1) {return;}this.swap(index, index + 1);}
};
/**** 数组元素变为第一个元素* @param index*/
Array.prototype.dips = function (index) {if (index != null && index >= 0 && index < this.length) {if (index == 0) {return;}this.swap(index, 0);}
}
/****  数组元素变为最后一个元素* @param index*/
Array.prototype.floats = function (index) {if (index != null && index >= 0 && index < this.length) {if (index == this.length - 1) {return;}this.swap(index, this.length - 1);}
}
Array.prototype.find = function (val) {if (this.length > 0) {for (var i = 0; i < this.length; i++) {if (this[i] == val) {return i;}}}}

以上是对数组的改造，这些东西以后会派上大用处，不过有些方法并不完善，有漏洞，需要进一步完善！

2 全局对象

要撰写专业的js框架而言，一般采用这种方式书写，这种方式实现了所谓的私有化变量和方法。比如jquery就是这种写法，对于框架安全有重要意义，对于外部要访问的方法可以在其前面加上window。由于本人是个急性子想要现实现功能后在对框架进行封装（习惯不好哈哈哈！所以就没有使用这种的）

（function(){

//js code

}）()

一些全局对象

由于想写一个独立的框架，不想使用jquery（虽然很方便）

获取dom对象

</pre><div></div><div><pre class="javascript" name="code">var scaneArray = new Array();
var layerArray = new Array();/***** 场景* @constructor*/
function Scane() {scaneArray.add(this);this.id = '';this.playtime = 1000; //指定场景播放时间this.playflag = false;this.order = '';  //场景编号this.loopflag = false;  //循环标志this.nextframe = "";  //在限定时间播放后调到指定编号场景this.layer = new Layer();  //场景中的图层this.addplayer = function (val) {this.layer.array.add(val);}this.startplay = function () {this.playflag = true;}this.stopplay = function () {this.playflag = false;}
}/***** 场景中的层* @constructor*/
function Layer() {this.array = new Array();this.add = function (val) {this.array.add(val)}this.remove = function (val) {if (this.array.length > 0) {//alert(val);for (var i in this.array) {if ((val == this.array[i]) && this.array[i].role == "weather") {$s("stage").removeChild($s(val.id));}if ((val == this.array[i]) && this.array[i].role == "pickj") {$s("stage").removeChild($s(val.canId));}}this.array.remove(val);}}this.top = function (val) {if (this.array.length > 0) {this.array.floats(this.array.find(val));}}this.clear=function(){if (this.array.length > 0) {for (var i in this.array) {this.remove(this.array[i]);}}}this.hides=function(){if (this.array.length > 0) {for (var i in this.array) {if (this.array[i].role === "pickj"&&$s(this.array[i].canId)!=null) {$s(this.array[i].canId).width=0;$s(this.array[i].canId).height=0;}}}}this.show=function(){if (this.array.length > 0) {for (var i in this.array) {if (this.array[i].role === "pickj"&&($s(this.array[i].canId))!=null) {$s(this.array[i].canId).width=this.array[i].w;$s(this.array[i].canId).height=this.array[i].h;}}}}}

舞台的实现

function Stage(w, h, color, id,bg) {Stage.array = array;Stage.cmdArray = cmdArray;Stage.shapeArray = shapeArray;Stage.background=bg;Stage.w = w;Stage.h = h;canvas.width = w;canvas.height = h;canvas.style.backgroundColor = color;onload = function () {try {document.getElementById(id).appendChild(canvas);Toolcan=document.getElementById("timeline");toolpaint=Toolcan.getContext("2d");} catch (e) {alert("找不到对应的id值无法创建画板" + e.message);}};Stage.update = function () {}Stage.draw = function () {}Stage.Aexe = function (mv) {if (cmdArray.length > 0) {if (cmdArray != null && cmdArray.length > 0) {setInterval(function () {if (i < cmdArray.length) {mc.speed = 1;mc.statu = true;mc.shortsport = true;if (cmdArray[i] == 'up') {mc.fx = 'up'} else if (cmdArray[i] == 'down') {mc.fx = 'down'} else if (cmdArray[i] == 'left') {mc.fx = 'left'} else if (cmdArray[i] == 'right') {mc.fx = 'right'}i++;}}, 1000);}}}Stage.findScane=function(id){if(scaneArray.length>0){for(var i=0;i<scaneArray.length;i++){if(scaneArray[i].id==id) {return scaneArray[i];}}}}Stage.removeScane=function(id){if(scaneArray.length>0){for(var i=0;i<scaneArray.length;i++){if(scaneArray[i].id==id){scaneArray.remove(scaneArray[i]);}}}}Stage.add = function (moveclip) {if (moveclip != null) {if (Stage.array.length == 0) {Stage.array.push(moveclip);} else if (Stage.array.length > 0) {var k = 0for (var m = 0; m < Stage.array.length; m++) {if (moveclip.id !== Stage.array[m].id) {k++;} else {alert("id=" + id + "id重复，请更换！");return;}}if (k >= Stage.array.length) {Stage.array.push(moveclip);}}}};Stage.remove = function (val) {if (val != null) {Stage.array.remove(val);}};Stage.findByid = function (id) {if (id != null && Stage.array.length > 0) {for (var i = 0; i < Stage.array.length; i++) {if (Stage.array[i].id == id) {return Stage.array[i];}}} else {return null;}}Stage.removeById = function (id) {if (id != null && Stage.array.length > 0) {var k = 0;for (var i = 0; i < Stage.array.length; i++) {if (Stage.array[i].id == id) {Stage.array.remove(Stage.array[i]);} else {k++;if (k >= Stage.array.length) {alert("此id不存在！")}}}}}

重点说一下如何实现flash中的舞台，时间轴，层的场景的概念

我把flash中的帧的概念当作一个场景（scane），一副画面。场景中的画面又有了层（Layer）的概念。

今天就说到这里。明天继续！

html5可视化图形编辑器(基于canvas)相关推荐

vue+vuex实现2D可视化图形编辑器
随着物联网的快速发展,人们对物联网设备的数据监控可视化的需求越来越强烈,为了解决企业设备数据监控可视化痛点,深圳当康科技经过不断的努力,研发了一套基于物联网的可视化图形编辑器,用户编辑器可以通过该编辑 ...
html5在线俄罗斯方块,Html5原创俄罗斯方块（基于canvas）
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久. 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块. ...
7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
canvas图形编辑器
原文地址:http://jeffzhong.space/2017/11/02/drawboard/ 使用canvas进行开发项目,我们离不开各种线段,曲线,图形,但每次都必须用代码一步一步去实 ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
html5 游戏可视化编译,HTML5可视化编辑器工具
HTML5可视化编辑器工具是一款好用的且功能强大的编辑系统,操作简单,上手容易,没有编程知识一样可以使用,也能轻松生成html5页面,相当于是一款可视化编辑器,可兼容所有的框架,使用很灵活.有需要的小 ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
基于JSON Schema的前端可视化活动编辑器
先看效果,为一个可视化活动编辑器. 演示地址:form.lljj.me/vue-editor.- 项目地址:github.com/lljj-x/vue-- 基于 JSON Schema 开箱即用的简单 ...
html5可视化编辑器教程,html5可视化编辑器sx html5 vip使用教程(附vip账号)
sx HTML5是一款可视化的编辑器,可以用于html5代码的编辑操作,软件提供了直观的操作界面,可以编辑html主体.html头部.CSS部分和JS部分,可以说是开发者开发各类响应式网页和Andro ...

html5可视化图形编辑器(基于canvas)

html5可视化图形编辑器(基于canvas)相关推荐

最新文章

热门文章