今天這篇文章看名字是createjs與dom的協作，其實是createjs的游戲UI制作，非常重要，所以大家好好看。

一直以來大家用createjs都會有這樣那樣的問題，其中最難解決的就是什么？如果你有一定的基礎，就大概率會說是性能和ui的問題。性能問題之前我博客里很多文章已經可以優化了，那么ui問題呢？確實相比同類的H5引擎，createjs在這方面確實是弱勢，但是dom的ui已經非常完善了為什么還需要用canvas來實現呢？因為很多人不會協作，那么我今天就來講createjs與dom和協作。

其實createjs的官方已經給出了相關的協作類，那就是DOMElement，但是官方沒有給出例子，下面我就來寫個例子。

html>

domElement的使用

*{

margin:?0;

padding:?0;

}

CreateJS是基于HTML5開發的一套模塊化的庫和工具。

基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。

var?canvas?=?document.getElementById("canvas");

var?stage?=?new?createjs.Stage(canvas);

//?var?stage?=?new?createjs.StageGL(canvas);//stagegl也支持

var?testTxt?=?document.getElementById("testTxt")

var?domElement?=?new?createjs.DOMElement(testTxt);

domElement.x?=?200

domElement.y?=?200;

domElement.regX?=?100;

domElement.regY?=?100;

domElement.htmlElement.onclick?=?function()?{

//它只支持原生的點擊，并且不支持層級，遮罩等功能

console.log("clicked");

}

stage.addChild(domElement)

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick",function?(){

domElement.rotation?+=1;

stage.update();

})

大家點擊鏈接就可以看到，里面是一個相當于富文本richText，里面有多種顏色大小并且在旋轉，而且是可以選中的。

然后我們看代碼，我new了一個DOMElement并把div傳進去，我就可以像操作createjs中的顯示對象一樣操作dom，是不是很簡單？

剛才我們是直接放在舞臺上操作的，那DOMElement對象可不可以放入容器中么？我們試試。

html>

容器中的domElement

*{

margin:?0;

padding:?0;

}

CreateJS是基于HTML5開發的一套模塊化的庫和工具。

基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。

var?canvas?=?document.getElementById("canvas");

var?stage?=?new?createjs.Stage(canvas);

var?testTxt?=?document.getElementById("testTxt")

var?domElement?=?new?createjs.DOMElement(testTxt);

var?container?=?new?createjs.Container();

stage.addChild(container);

container.addChild(domElement);

container.x?=?200;

container.y?=?200;

container.regX?=?100;

container.regY?=?100;

container.addEventListener("click",function?(){

console.log("clicked")//就算加了容器點擊也是無效的

})

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick",function?(){

container.rotation?+=1;//使用容器操作一樣可以

stage.update();

})

大家可以看到，在容器里也是可以實現的。

那么既然在容器里也可以，那么我們就舉一反三，我們在animateCC中實現。animateCC2017以上的版本是可以直接放組件的，但是animateCC中組件的功能并不好，我們如果自己用dom寫，就可以完全擁有dom的功能，想要什么樣的組件都可以。下面看代碼↓

html>

animateCC與domElement和協作

*{

margin:?0;

padding:?0;

}

.input_txt{

color:#BAB1EE;width:?182px;height:?41px;background-color:?#270C51;border:3px?solid?#4E2383;line-height:?41px;font-size:?14px;padding:?0?10px;

}

.open_btn{

color:#000000;font-size:?50px;text-decoration:?none;cursor:?pointer;

}

打開彈窗

var?canvas,?stage,pop

function?init()

{

canvas?=?document.getElementById("canvas");

var?loader?=?new?createjs.LoadQueue(false);

loader.addEventListener("fileload",?handleFileLoad);

loader.addEventListener("complete",?handleComplete);

loader.loadManifest(lib.properties.manifest);

}

function?handleFileLoad(evt)?{

if?(evt.item.type?==?"image")?{?images[evt.item.id]?=?evt.result;?}

}

function?handleComplete(evt)?{

stage?=?new?createjs.Stage(canvas);

var?openBtn?=??document.getElementById("openBtn");

var?openBtnElement?=?new?createjs.DOMElement(openBtn);

stage.addChild(openBtnElement);

openBtnElement.htmlElement.onclick?=?function()?{

showHandler();

}

var?nameInput?=?document.getElementById("nameInput");

var?domElement?=?new?createjs.DOMElement(nameInput);

domElement.x?=?140;

domElement.y?=?80;

pop?=?new?lib.pop();//animate里的彈窗動畫

stage.addChild(pop);

pop.win.con.addChild(domElement)//層級目錄看fla文件

pop.win.btn.addEventListener("click",function?(){

hideHandler();

})

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick",?stage);

}

function?showHandler()

{

pop.gotoAndPlay(1);

}

function?hideHandler()

{

pop.gotoAndStop(0);

}

從演示地址中我們看到，我在彈窗中加了一個input，并且可以正常操作。然后我們看代碼，代碼也很簡單，原來獲取來的輸入框DOMElement對象，我直接放進了animateCC的一個虛擬容器中(下載fla源文件可以看到我在彈窗中放了一個隱藏的容器)，輸入框可以正常的動畫，正常的操作。這時候很多人問的“怎么在createjs放輸入文本”的問題也解決了。

但是這也是有問題的！！！ 懂dom的前端看下demo在瀏覽器中的html結構就會明白，createjs的DOMElement只是在canvas的上面新建了dom來操作，并不是直接操作canvas中的對象，這就會很多問題，比如：層級，遮罩等等。

大家來看這個demo:

html>

domElement的問題

*{

margin:?0;

padding:?0;

}

CreateJS是基于HTML5開發的一套模塊化的庫和工具。

基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。

var?canvas?=?document.getElementById("canvas");

var?stage?=?new?createjs.Stage(canvas);

var?testTxt?=?document.getElementById("testTxt")

var?domElement?=?new?createjs.DOMElement(testTxt);

domElement.x?=?200

domElement.y?=?200;

domElement.regX?=?100;

domElement.regY?=?100;

stage.addChild(domElement)

var?bitmap?=?new?createjs.Bitmap("images/100.jpg");

bitmap.x?=?200;

bitmap.y?=?200;

stage.addChild(bitmap);//背景圖也不能置于上面

var?shape?=?new?createjs.Shape();

shape.graphics.beginFill("#FF0000");

shape.graphics.drawRect(0,0,50,50);

shape.graphics.endFill();

shape.x?=?200;

shape.y?=?200;

domElement.mask?=?shape;//遮罩無效

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick",function?(){

domElement.rotation?+=1;

stage.update();

})

這個demo中的層級和遮罩都失效了，這是一個非常嚴重的問題，是一個必須要解決的問題，那怎么解決呢？

這時候真正的高級教程就來了，那就是利用像素拷貝來解決問題，不多說上代碼：

html>

createjs的像素拷貝

*{

margin:?0;

padding:?0;

}

CreateJS是基于HTML5開發的一套模塊化的庫和工具。

基于這些庫，可以非常快捷地開發出基于HTML5的游戲、動畫和交互應用。

var?canvas?=?document.getElementById("canvas");

var?stage?=?new?createjs.Stage(canvas);

var?testTxt?=?document.getElementById("testTxt")

var?bitmap;

html2canvas(testTxt).then(function(cc)?{

bitmap?=?new?createjs.Bitmap(cc);

stage.addChild(bitmap);

bitmap.regX?=?100;

bitmap.regY?=?100;

bitmap.x?=?200;

bitmap.y?=?200;

var?shape?=?new?createjs.Shape();

shape.graphics.beginFill("#ff0000");

shape.graphics.drawCircle(0,0,30);

shape.graphics.endFill();

shape.x?=?200;

shape.y?=?200;

bitmap.mask?=?shape;

testTxt.style.display='none';//用完后隱藏或者銷毀

var?bg?=?new?createjs.Bitmap("images/100.jpg");

bg.x?=?100;

bg.y?=?100;

stage.addChild(bg);//這時候層級也生效了

});

createjs.Ticker.setFPS(60);

createjs.Ticker.addEventListener("tick",function?(){

bitmap.rotation?+=1;

stage.update();

})

這里額外先講一下html2canvas，這個js的功能就是截圖，就是像素拷貝，很好理解，網上自己去下就可以了。

看demo，原理很簡單，就是用canvas拷貝dom中的像素，然后再轉化為createjs的對象，這時候遮罩和層級就完全恢復了，通過像素拷貝過的Bitmap跟操作平時的Bitmap沒什么兩樣。但是這時候他已經變成了圖片是不能交互的，但是我們可以通過別的交互，比如點擊，再把原來的dom通過DOMElement調出來，dom就又可以順利的交互了(如果交互的時候需要調用層級，遮罩，濾鏡，疊加模式，就必須要把這些用dom實現，然后用DOMElement轉進來，不過一般很少交互的時候會有層級，遮罩，濾鏡，疊加模式)。

大家以后用createjs做游戲ui的時候就可以用上面的方法制作，附上下載地址。

好了文章講完了，通過這篇文章大家除了理解做法還知道了dom的重要性，所以flash出身的程序員還是要學dom和css的，就像前端要學animateCC要學游戲邏輯一樣，這種時候前端的優勢就很明顯了。

最后，如果大家還有問題可以在博客下面留言，也可以在createjs群里找我。

總結

以上是生活随笔為你收集整理的android与createjs交互,createjs高级教程：createjs与dom的协作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。