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对象
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;i0){
for(var i=0;i 0) {
var k = 0
for (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）的概念。
今天就说到这里。明天继续！