html5可视化编辑器2

今天接着写，昨天有了舞台，场景，层，今天要加一个重要的东西Player！还记得flash当时有个东西叫movieClip的东西吧，或者是splite，这个东西是个容器，装着我们的动画，图片，还有梦想！不说了上菜！

function player(role) {    if (role == "img") {        var img = new Object();        img.role = role;        img.image = new Image();        img.id = '';        img.x = 0;        img.y = 0;        img.w = 50;        img.h = 50;        img.testx=0;        img.testy=0;        img.inthis=false;        img.rotate = 0;        img.alphatx = 100;        img.shadow = new shadow();        img.editflag = false;        img.focus = false;        img.visible = true;        img.editflag = false;        img.edit = function () {        }        img.mouseup = function (e) {        }        img.mousedown = function (e) {        }         img.mousemove=function(e){         }        img.mouseIn=function(e){        }        img.mouseOut=function(e){        }        return img;    }    if (role == "rect") {        var jx = new Object();        jx.role = role;        jx.id = '';        jx.x = 0;        jx.y = 0;        jx.w = 0;        jx.h = 0;        jx.editflag = false;        jx.visible = true;        jx.rotate = 0;        jx.color = "pink";        jx.xw = 2;        jx.mousemove=function(e){        }        jx.mouseup = function (e) {        }        jx.mousedown = function (e) {        }        jx.mouseIn=function(e){        }        jx.mouseOut=function(e){        }        return jx;    }    if (role == "rects") {        var jxs = new Object();        jxs.role = role;        jxs.id = '';        jxs.x = 0;        jxs.y = 0;        jxs.w = 0;        jxs.h = 0;        jxs.color = "pink";        return jxs;    }    if (role == "line") {        var lin = new Object();        lin.role = role;        lin.id = '';        lin.x = 0;        lin.y = 0;        lin.x1 = 0;        lin.y1 = 0;        lin.color = "pink";        lin.xw = 2;        return lin;    }    if (role == "crl") {        var crl = new Object();        crl.role = role;        crl.id = '';        crl.x = 0;        crl.y = 0;        crl.r = 10;        crl.sd = 0;        crl.ed = 40;        crl.sz = true;        crl.xw = 2;        crl.color = "pink";        return crl;    }    if (role == "crls") {        var crls = new Object();        crls.role = role;        crls.id = '';        crls.x = 0;        crls.y = 0;        crls.r = 10;        crls.sd = 0;        crls.ed = 40;        crls.sz = true;//时钟旋转顺序        crls.color = "pink";        return crls;    }    if (role == "word") {        var word = new Object();        word.role = role;        word.id = "";        word.str = "hello Test word!"        word.x = 0;        word.y = 0;        word.alg = "center";        word.color = "pink";        word.kind = "serif";        word.size = 38;        return word;    }      if(role=="pickj"){          var pic=new Object();          pic.role=role;          pic.x=0;          pic.y=0;          pic.canId="";          pic.targetId="";          pic.id="";          pic.img=new Image();          pic.shadow=new shadow();          pic.h=100;          pic.w=100;          pic.depth=1;          pic.rotate=0;          pic.editflag=false;          pic.tmd=100;          pic.mousemove=function(e){          }          pic.mouseup = function (e) {          }          pic.mousedown = function (e) {          }          pic.mouseIn=function(e){          }          pic.mouseOut=function(e){          }          return pic;      }    if(role=="weather"){        var weath=new Object();       weath.role=role;       weath.x=0;       weath.y=0;       weath.canId="";       weath.targetId="";       weath.id="";       weath.h=100;       weath.w=100;       weath.depth=1;       weath.editflag=false;       weath.mousemove=function(e){        }       weath.mouseup = function (e) {        }       weath.mousedown = function (e) {           e.preventDefault();        }       weath.mouseIn=function(e){        }       weath.mouseOut=function(e){        }     return weath;    }}

好长！不过还没有完，除了img外其他的还不是太完善，暂时先这样吧，这个player就是一个图形容器比如说舞台上需要两个图片，球，饼。。。。等player都要满足它，所以player是个超级对象 superobject，所以他的功能再多也不过分，所以以后我会将它继续完善。

接下来我们要把这些舞台，场景 player等等这些东西串起来，让他们活起来发挥他们的作用！

核心的东西来了，且看下面

function DrawMain() {    if (scaneArray.length > 0) {        for (var i = 0; i < scaneArray.length; i++) {            if (scaneArray[i].playflag == true && scaneArray[i].loopflag == false) {                scaneArray[i].playtime += -1;                //---------------------------------------播放指定时间长---------------------------------------------------------                if (scaneArray[i].playtime <= 0) {//---------------------------------------------跳入指定的场景根据其场景编号--------------------------------------------------------                    if (scaneArray[i].nextframe != "" && scaneArray[i].nextframe != null) {                        for (var p = 0; p < scaneArray.length; p++) {                            if (scaneArray[p].order == scaneArray[i].nextframe) {                                scaneArray[p].playflag = true;                                scaneArray[i].playflag = false;                                break;                            }                        }                    }                    scaneArray[i].playflag = false;                }                if (scaneArray[i].layer.array.length > 0) {                    var k;                    for (var j = 0; j < scaneArray[i].layer.array.length; j++) {                        k = scaneArray[i].layer.array[j];                        //----------------------------------------绘制图片----------------------------------                        if (k.role == "img") {                            if (k.rotate == 0) {                                paint.globalAlpha = k.alphatx / 100;                                if (k.shadow.color != "" && k.shadow.color != null) {                                    paint.shadowColor = k.shadow.color;                                    paint.shadowBlur = k.shadow.blur;                                    paint.shadowOffsetX = k.shadow.offsetX;                                    paint.shadowOffsetY = k.shadow.offsetY;                                }                                paint.drawImage(k.image, k.x, k.y, k.w, k.h);                                console.log(k.x);                                if(k.editflag){                                    DrawTools(canvas, "rect", 3, "red", new Array(k.x, k.y,  k.w-1, k.h-1));                                }                            } else {                                k.image.width = k.w;                                k.image.height = k.h;                                rotatepic(k.image, k.x, k.y, k.rotate, k.alphatx * 0.01);                                console.log(k.x);                                if(k.editflag){                                    DrawTools(canvas, "rect", 3, "red", new Array(k.x, k.y,  k.w-1, k.h-1));                                }                            }                        }else if (k.role == "rect") {                            if (k.rotate == 0) {                                DrawRect(k.x, k.y, k.w, k.h, k.color, k.xw);                            } else {                                rotateRect(k.x, k.y, k.w, k.h, k.xw, k.color, k.rotate);                            }                        } else if(k.role=="pickj"){                            if($s(k.canId)==null){                                var newc=document.createElement("canvas");                                newc.id= k.canId;                                ///style="text-align:center;position:absolute;z-index:2;left: 200px;top: 130px;width: 180;height: 400;"                                newc.style.position="absolute";                                newc.style.zIndex=2;                                newc.style.left= k.x+"px";                                newc.style.top= k.y+"px";                                newc.width= k.w;                                newc.height= k.h;                                newc.addEventListener("mousedown",function(){                                    k.mousedown(this);                                });                                newc.addEventListener("mouseup",function(){                                    k.mouseup(this);                                });                                newc.addEventListener("mousemove",function(){                                    k.mousemove(this);                                });                                $s(k.targetId).appendChild(newc);                            }                            $s(k.canId).style.left= k.x+"px";                            $s(k.canId).style.top= k.y+"px";                            k.img.width= k.w;                            k.img.height= k.h;                            k.depth=scaneArray[i].layer.array.find(k)+2;                            if(k.editflag){                               $s(k.canId).style.backgroundColor="blue";                                DrawTools(k.canId, "rect", 2, "red", new Array(0, 0, k.w, k.h));                            }else{                                $s(k.canId).style.backgroundColor="";                            }                            $s(k.canId).style.zIndex= k.depth;                            DrawTools( k.canId,"clear", 1, "red", new Array(0,0, k.w, k.h));                            DrawTools(k.canId,"pic", 1, "red", new Array(k.img, k.rotate, k.tmd));                        } else if(k.role=="weather"){                            if($s(k.id)==null){                                var newc=document.createElement("iframe");                                newc.id= k.id;                                newc.name="weather_inc";                                newc.src="http://i.tianqi.com/index.php?c=code&id=4";                                newc.style.position="absolute";                                newc.frameborder=0;                                newc.marginwidth=0;                                newc.marginHeight=0;                                newc.style.zIndex=2;                                newc.style.left= k.x+"px";                                newc.style.top= k.y+"px";                                newc.width= 130;                                newc.height=120;                                $s("stage").appendChild(newc);                            }                            $s(k.id).style.left= k.x+"px";                            $s(k.id).style.top= k.y+"px";                        }                        else if(k.role=="wordkj"){                        }                        else if(k.role=="videokj"){                        }                        else if(k.role=="audiokj"){                        }                        else if(k.role=="timekj"){                        }                        else if(k.role=="gpkj"){                        }                        else if(k.role=="bdkj"){                        }                        else if(k.role=="jhkj"){                        }                        else if(k.role=="txkj"){                        }                    }                }                break;//-----------------------------------------------------------循环场景播放----------------------------------------------------------------------------------            } else if (scaneArray[i].playflag == true && scaneArray[i].loopflag == true) {                if (scaneArray[i].layer.array.length > 0) {                    var k;                    for (var j = 0; j < scaneArray[i].layer.array.length; j++) {                        k = scaneArray[i].layer.array[j];//------------------------------------绘制图片------------------------------------------------------------------------------------------                        if (k.role == "img") {                            if (k.rotate == 0) {                                if (k.shadow.color != "" && k.shadow.color != null) {                                    paint.shadowColor = k.shadow.color;                                    paint.shadowBlur = k.shadow.blur;                                    paint.shadowOffsetX = k.shadow.offsetX;                                    paint.shadowOffsetY = k.shadow.offsetY;                                }                                paint.globalAlpha = k.alphatx / 100;                                paint.drawImage(k.image, k.x, k.y, k.w, k.h);                               // console.log(k.x);                                if(k.editflag){                                    DrawTools(canvas, "rect", 3, "red", new Array(k.x, k.y,  k.w-1, k.h-1));                                }                            } else {                                k.image.width = k.w;                                k.image.height = k.h;                                if (k.shadow.color != "" && k.shadow.color != null) {                                    paint.shadowColor = k.shadow.color;                                    paint.shadowBlur = k.shadow.blur;                                    paint.shadowOffsetX = k.shadow.offsetX;                                    paint.shadowOffsetY = k.shadow.offsetY;                                }                                paint.globalAlpha = k.alphatx / 100;                                rotatepic(k.image, k.x, k.y, k.rotate, k.alphatx * 0.01);                                if(k.editflag){                                 Draw.rect(canvas,3,"green", k.rotate,new point(k.x, k.y),new point(k.w, k.h), k.testx, k.testy);                                }                            }                        } else if (k.role == "rect") {                            if (k.rotate == 0) {                                DrawRect(k.x, k.y, k.w, k.h, k.color, k.xw);                            } else {                                rotateRect(k.x, k.y, k.w, k.h, k.xw, k.color, k.rotate);                            }//----------------------------------------------------图片控件----------------------------------------------------                        }else if(k.role=="pickj"){                            if($s(k.canId)==null){                              var newc=document.createElement("canvas");                                newc.id= k.canId;                                ///style="text-align:center;position:absolute;z-index:2;left: 200px;top: 130px;width: 180;height: 400;"                                newc.style.position="absolute";                                newc.style.zIndex=1;                                newc.style.left= k.x+"px";                                newc.style.top= k.y+"px";                                newc.width= k.w;                                newc.height= k.h;                                $s(k.targetId).appendChild(newc);                                newc.addEventListener("mousedown",function(){                                    k.mousedown(this);                                });                                newc.addEventListener("mouseup",function(){                                    k.mouseup(this);                                });                                newc.addEventListener("mousemove",function(){                                    k.mousemove(this);                                });                            }                                      $s(k.canId).style.left= k.x+"px";                                       $s(k.canId).style.top= k.y+"px";                            k.img.width= k.w;                            k.img.height= k.h;                            k.depth=scaneArray[i].layer.array.find(k)+2;                            $s(k.canId).style.zIndex= k.depth;                            DrawTools( k.canId,"clear", 1, "red", new Array(0,0, k.w, k.h));                            DrawTools(k.canId,"pic", 1, "red", new Array(k.img, k.rotate, k.tmd));                            if(k.editflag){                                //   $s(k.canId).style.backgroundColor="blue";                                DrawTools(k.canId, "rect", 2, "red", new Array(0, 0,  $s(k.canId).width,  $s(k.canId).height));                            }else{                                $s(k.canId).style.backgroundColor="";                            }                        } else if(k.role=="wordkj"){                        } else if(k.role=="weather"){                            if($s(k.id)==null){                                var newc=document.createElement("iframe");                                newc.id= k.id;                                newc.name="weather_inc";                                newc.src="http://i.tianqi.com/index.php?c=code&id=4";                                ///style="text-align:center;position:absolute;z-index:2;left: 200px;top: 130px;width: 180;height: 400;"                                //   <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=4" width="130" height="120" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>                                newc.style.position="absolute";                                newc.frameborder=0;                                newc.marginwidth=0;                                newc.marginHeight=0;                                newc.style.border="0";                                newc.style.zIndex=2;                                newc.style.left= k.x+"px";                                newc.style.top= k.y+"px";                                newc.width= 130;                                newc.height=120;                                newc.scrolling="no";                                 newc.addEventListener("mousedown",function(){                                 k.mousedown(this);                                 });                                 newc.addEventListener("mouseup",function(){                                 k.mouseup(this);                                 });                                 newc.addEventListener("mousemove",function(){                                 k.mousemove(this);                                 });                                $s("stage").appendChild(newc);                            }                            $s(k.id).style.left= k.x+"px";                            $s(k.id).style.top= k.y+"px";                        }                        else if(k.role=="wordkj"){                        }                        else if(k.role=="videokj"){                        }                        else if(k.role=="audiokj"){                        }                        else if(k.role=="weatherkj"){                        }                        else if(k.role=="timekj"){                        }                        else if(k.role=="gpkj"){                        }                        else if(k.role=="bdkj"){                        }                        else if(k.role=="jhkj"){                        }                        else if(k.role=="txkj"){                        }                    }                }                break;            }        }    }}

看完想吐不？反正我是吐了，为了实现功能垒成的东西，1.000版本，太臃肿了，不过透过它能知道前进方向，待会会上一个精干的代码1.2。 哈哈1.1看完我又吐了，所以直接否决了！

在上之前说一下一个canvas 基本动画的结构

1 获取或是创建一个canvas 画布对象    var canvas=document.getelementById("canvas");

2 canvas也只是个图形容器（可以容纳 基本图形，视频（把电影画上去），还有其他canvas（画中画）），但他的Context封装了绘画操作

所以我们的获取这些绘图操作，var paint=canvas.getContext("2d");(暂时没有3d，想要的话可以用webGl或者是Three.js框架（很牛的框架）)

3设置一个定时渲染或者是定时更新的东西，因为你要的是一副动画或者是一个互动游戏，不仅仅是一副画。我们有两个选择一个是setInterval 或者是 requestAnimationFrame

前者是定时执行的但是需要自己实现双缓冲，（所谓实现双缓冲，就是不让画面看着闪烁，看着比较自然）。后者是一个html5只带的实现了双缓冲的家伙，效果比较好，如果你想调节帧数（更新画面的速度）也可以自己设置。

下面给大家看一下

window.onload=function() {        var can = document.getElementById("canvas");        window.requestAnimFrame = (function () {            return  window.requestAnimationFrame ||                    window.webkitRequestAnimationFrame ||                    window.mozRequestAnimationFrame ||                    function (callback) {                        window.setTimeout(callback, 1000/60);                    };        })();        function draw() {            var paint = can.getContext("2d");            paint.clearRect(0, 0, can.width, can.height);            game();        }        function render() {            draw();            window.requestAnimFrame(render);        }        render();}

下面是简单写法

window.onload=function() {        var can = document.getElementById("canvas");        function draw() {            var paint = can.getContext("2d");            paint.clearRect(0, 0, can.width, can.height);           //drawing...........................        }        function render() {            draw();            requestAnimationFrame(render);        }        render();}

draw()中执行的就是具体的绘图操作。

下面上我们1.2版本的

/** * * 主绘图程序 * @constructor */function DrawMain() {    if (scaneArray.length > 0) {        for (var i = 0; i < scaneArray.length; i++) {            if (scaneArray[i].playflag) {                scaneArray[i].playtime += -1;                //当循环播放开始的时候循环事件会自动增加                if (scaneArray[i].loopflag) {                    if (scaneArray[i].playtime <= 2) {                        scaneArray[i].playtime = 500;                    }                }                //-------------播放指定时间长---------------------------------------------------------                if (scaneArray[i].playtime <= 0) {                    //--------------跳入指定的场景根据其场景编号--------------------------------------------------------                    if (scaneArray[i].nextframe != "" && scaneArray[i].nextframe != null) {                        for (var p = 0; p < scaneArray.length; p++) {                            if (scaneArray[p].frame == scaneArray[i].nextframe) {                                scaneArray[p].playflag = true;                                scaneArray[p].playtime = 500;                                scaneArray[i].playflag = false;                                break;                            }                        }                    }                    scaneArray[i].playflag = false;                }                if (scaneArray[i].layer.array.length > 0) {                    var k;                    for (var j = 0; j < scaneArray[i].layer.array.length; j++) {                        k = scaneArray[i].layer.array[j];                        //----------------------------------------绘制图片----------------------------------                        if (k.role == "img") {                            k.img.width = k.w;                            k.img.height = k.h;                            Draw.img(canvas, k.img, k.x, k.y, k.rotate);                            if(k.edit&&Draw.path(canvas, k.x, k.y, k.w, k.h, k.rotate, 5,2,"blue", k.hitx,k.hity)==true){                                k.editflag=true;                            }else{                                k.editflag=false;                            }                            if(k.ckg){                            Draw.rect(canvas, 1, "red", k.rotate, new point(k.x, k.y), new point(k.w, k.h));                            }                        } else if (k.role == "rect") {                                Draw.rect(canvas, 4, "pink", k.rotate, new point(k.x, k.y), new point(k.w, k.h));                            }                        }                    }                    break;                }            }        }}

今天先写到这了。明天见！