Verwandeln Sie Canvas-Objekte in createjs Elemente

Question

Entschuldigung, wenn dies zuvor beantwortet wurde, denke ich, dass ich vielleicht nach den falschen Stichwörtern suche.

Ich habe ein Element auf der Zeichenfläche aus einer anderen Bibliothek gerendert. Jedes Mal, wenn stage.update() aufgerufen wird, werden alle meine createJS-Elemente oben gerendert. Das Element muss jedoch zwischen verschiedenen createjs Objekten sitzen.

Also muss ich entweder einen Weg finden, dieses Element in ein createJs DisplayElement zu verwandeln, um es in die richtige Indexposition zu bringen.

Oder ich muss nur einen Container und nicht die ganze Bühne aktualisieren.

Kann mir jemand in die richtige Richtung zeigen?

Dank

Answer 1

Sie haben zwei Möglichkeiten:

Sie die andere Bibliothek nicht verwenden, aber EaselJS nur.

... oder ...

Verwenden Sie mehrere Leinwände.

Da Sie dieses Grafikobjekt zwischen zwei eleceljs-Objekten stapeln müssen, benötigen Sie drei Canvases, um zu erreichen, was Sie versuchen zu tun, und zwei Staffelei Stufen. Dennoch ist dies eine hacky Workaround für ein seltsames Problem.

Answer 2

Der beste Ansatz hierfür besteht darin, Ihren Nicht-EaselJS-Inhalt auf einem anderen Canvas darzustellen und ihn dann als Quelle für ein Bitmap zu verwenden.

// Non-EaselJS content (whatever you can imagine!) 
var canvas1 = document.getElementById("non-easel-canvas"); 
var context = canvas1.getContext("2d"); 
context.doStuffWithCanvasAPIs(); 

// EaselJS content (red background, blue circle) 
var stage = new createjs.Stage("easel-canvas"); 
var bottom = new createjs.Shape(); 
bottom.graphics.beginFill("red").drawRect(0,0,800,600); 
var top = new createjs.Shape(); 
top.graphics.beginFill("blue").drawCircle(0,0,25); 
top.x = top.y = 100; 

// Non-easel content added to Easel 
var bmp = new createjs.Bitmap(canvas1); 

stage.addChild(bottom, bmp, top); 
stage.update(); 

Hoffnung, die Sinn macht. Sie können auch den umgekehrten Fall verwenden und den EaselJS-Inhalt mit drawImage in eine Nicht-EaselJS-Stufe zeichnen und den EaselJS-Zeichenbereich als Quelle übergeben. So können Sie EaselJS-Inhalte in Dinge wie three.js mischen.

Beachten Sie, dass Sie auch alle EaselJS-Inhalte direkt ohne Bühne zeichnen können. Jedes Anzeigeobjekt (einschließlich Container) verfügt über eine Methode draw(), die Sie aufrufen können, die das Objekt in einen bereitgestellten Kontext zeichnet.

http://www.createjs.com/docs/easeljs/classes/DisplayObject.html#method_draw

Cheers,