html5可视化编辑器2
今天接着写，昨天有了舞台，场景，层，今天要加一个重要的东西Player！还记得flash当时有个东西叫movieClip的东西吧，或者是splite，这个东西是个容器，装着我们的动画，图片，还有梦想！不说了上菜！function player(role) {if (role == "img") {var img = new Object();i
·
今天接着写，昨天有了舞台，场景，层，今天要加一个重要的东西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.οnlοad=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.οnlοad=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;
}
}
}
}
今天先写到这了。明天见！
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)