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

来源：互联网发布：redis 命令查看数据库编辑：程序博客网时间：2024/05/21 10:06

我以前特别喜欢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 = 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）的概念。

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

0 0