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;
}
}
}
}今天先寫到這了。明天見！
相關推薦
html5視覺化編輯器2
今天接著寫，昨天有了舞臺，場景，層，今天要加一個重要的東西Player！還記得flash當時有個東西叫movieClip的東西吧，或者是splite，這個東西是個容器，裝著我們的動畫，圖片，還有夢想！不說了上菜！ function player(role) {
ueditor-百度視覺化編輯器簡單使用方法
1、ueditor是百度視覺化編輯工具 2、ueditor官網地址 3、開發步逐 1、在官網上下載最新版本的jsp版本 圖1 2、將下載的壓縮檔案解壓，改資料夾名稱為“ueditor”； 3、建立“ueditorTest”專案，
xml視覺化編輯器
——業內首創的線上視覺化XML結構化資料編輯方法 Boxth Visual XML Web Editor (Boxth XWE) 是專為線上處理XML結構化資料而設計的 線上（Web）、視覺化（WYSWYG）、支援協同編輯（Cooperative Editing）的XML文
[zz]myeclipse開啟和關閉html,jsp等頁面的視覺化編輯器
用myeclipse開啟html,jsp等頁面時，有的是預設用視覺化編輯器開啟的，這樣開啟會顯得很慢，只要關閉視覺化編輯器就會快很多了，方法如下： 選擇選單: windows -> preferences 在彈出視窗中選擇General-> E
SpringMVC + summernote視覺化編輯器整合（1）
本次著重講解一下springmvc框架下的整合 summernote編輯器：如下該編輯器跟知乎平臺上編輯器類似，可以自己在JS控制檔案中進行相關控制元件的控制。本次summernote版本是：/*! Summernote v0.8.1 | (c) 2013-2015 Alan
html5視覺化圖形編輯器(基於canvas)
我以前特別喜歡flash，不過flash水平一般，那是的我並不是程式設計師，充其量也就是個愛好者，在這個html5的時代中，我依舊對那個有時間軸的flash編輯介面念念不忘。於是便有了這篇文章。我的目標是做一款線上的圖片，文件，動畫，遊戲生成器。目標比較大（個人比較貪），目
kindeditor官網異步加載示例無效，解決無法通過方法初始化編輯器
har cdd kxml yep adf tr1 ket 沒有效果 iba 官網示例：http://kindeditor.net/ke4/examples/dynamic-load.html 項目中發現一個問題，kindeditor官網是通過 初始化編輯器，但是現在有
V-rep學習筆記：視覺傳感器2
存在 bsp ping repr sim isp cif ron depth 視覺傳感器的屬性設置欄中還有如下幾個選項： Ignore RGB info (faster): if selected, the RGB information of the sensor
TWaver可視化編輯器的前世今生（四）電力 雲計算 數據中心
變電站 fontsize 復雜 部署 ood 配置信息 來看 tar 右鍵 插播一則廣告（長期有效） TWaver需要在武漢招JavaScript工程師若幹 要求：對前端技術(JavasScript、HTML、CSS)，對可視化技術(Canvas、WebGL)有濃厚的興
KindEditor 一款好用的HTML可視化編輯器（富文本編輯器）
好用 shu spl 相對 relative -a sda per 我想 KindEditor使用JavaScript編寫，可以無縫的於Java、.NET、PHP、ASP等程序接合。 KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用
vue 地圖視覺化 mapbox篇(2)
MapBox 專案中用到MapBox也是偶然的機會，專案中需要採用3D地圖，當現有的工具（百度地圖）無法滿足我們的需求，我們肯定需要更高階開源的地圖，無奈谷歌地圖無法在國內使用，已是便找到Leafle，一開始驚豔於leafle的開源程度和其與眾不同的地圖風格，後來順藤摸瓜，找到一個商業性地圖，它便是我們的主角
【深度學習】Tensorboard 視覺化好幫手2
轉自https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/4-2-tensorboard2/ 目錄 要點 製作輸入源 在 layer 中為 Weights, biases 設定變化
BCGControlBar教程：視覺化管理器
BCGControlBar Pro for MFC最新試用版下載請猛戳>>> BCGControlBar庫框架允許您建立各種應用程式“skins”並輕鬆更改使用者介面元素的外觀。雖然該產品具有超過25個預先構建的視覺主題，但您可以輕鬆實現自定義主題。 在下圖中，您可以看到從“B
資料視覺化 seaborn繪圖(2)
統計關係視覺化 最常用的關係視覺化的函式是relplot seaborn.relplot(x=None, y=None, hue=None, size=None, style=None, data=None, row=None,
不歡迎使用CSDN-markdown編輯器2
歡迎使用Markdown編輯器 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。 新的改變 我們對Markdown編輯器進行了一些功能
matplotlib資料視覺化分析（2）-- numpy將陣列儲存到檔案
1 陣列以二進位制的格式儲存 np.save 和 np.load 是讀寫磁碟資料的兩個主要函式。預設情況下，陣列以未壓縮的原始二進位制格式儲存在副檔名為 npy 的檔案中，以陣列 a 為例： # coding:utf-8 import numpy as np
50程式碼HTML5 Canvas 3D 編輯器優雅搞定
1024程式設計師節剛過，手癢想實現一個html的3d編輯器，看了three.js 同時還看了網上流傳已久的<<基於 HTML5 Canvas 的簡易 2D 3D 編輯器>>，都覺得太複雜，一個3d編輯器貌似沒有幾百行程式碼搞不定。其實還真不
歡迎使用CSDN-markdown編輯器2
歡迎使用Markdown編輯器 你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。 新的改變 我們對Markdown編輯器進行了一些功能
50程式碼HTML5 Canvas 3D 編輯器優雅搞定，不信你試試
轉載 1024程式設計師節剛過，手癢想實現一個html的3d編輯器，看了three.js 同時還看了網上流傳已久的<<基於 HTML5 Canvas 的簡易 2D 3D 編輯器>>，都覺得太複雜，一個3d編輯器貌似沒有幾百行程式碼搞不定。
視覺化學習筆記2：視覺編碼
用視覺元素表示資料 在視覺化資料時，你會使用視覺元素（例如點、線、長條）表示數值。例如，如果檢視多個人的身高和體重，可以用一個點表示每個人的身高和體重值。