javascript - 将 Canvas 对象转换为 createjs 元素

Question

如果之前有人回答过这个问题，我深表歉意，我想我可能搜索了错误的关键字。

我有一个从另一个库中渲染到 Canvas 上的元素。每次调用 stage.update() 时，我所有的 createJS 元素都会在顶部呈现。然而，该元素需要位于不同的 createjs 对象之间。

所以要么我需要找到一种方法将此元素转换为 createJs DisplayElement 以将其放在正确的索引位置。

或者我只需要更新一个容器而不是整个阶段。

有人能指出我正确的方向吗？

谢谢

Answer 1

最好的方法是将非 EaselJS 内容渲染到另一个 Canvas 上，然后将其用作位图的源。

// 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();

希望这是有道理的。您也可以相反，使用 drawImage 将 EaselJS 内容绘制到非 EaselJS 阶段，并将 EaselJS Canvas 作为源传递。这就是将 EaselJS 内容混合到 three.js 之类的东西中的方法。

请注意，您也可以在没有舞台的情况下直接绘制任何 EaselJS 内容。每个显示对象(包括 Container)都有一个 draw() 方法，您可以调用该方法将对象绘制到提供的上下文中。

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

干杯，