如何从EaselJS/CreateJS中缓存对象以外的源绘制到cacheCanvas



我有一个缓存的Shape和一个由该形状的cacheCanvas制成的位图。我现在想将另一个位图绘制到cacheCanvas,或者更具体地说,将另一位位图的cacheCanvas绘制到形状的cacheCan画布。我尝试了bitmap2.draw(shape.cacheCanvas(,但它不起作用——尽管draw((说它收到了一个ctx,我认为这个形状的cacheCanvas是一个ctx。它给了我一个drawImage不是函数错误。

我这样做的原因是为了图形工具的撤消功能。我画了这个形状,并用sourceover blit到一个位图进行显示,并到一个缩略图位图,因为有多层。按下时,我从形状的cacheCanvas中存储一个新的位图,并缓存它以记住撤消状态。这些给了我每次印刷时的图纸。若要撤消,我希望清除图形并在没有sourceover的情况下缓存它,然后将撤消位图绘制到形状的缓存画布中。这将保持原始形状、原始位图和拇指位图之间的关系。问题出在图形的cacheCanvas上。有办法吗?谢谢

添加-我想我找到了一个变通办法。我可以从一个容器开始,里面有一个形状。然后将容器闪电战到位图。然后,当我想返回到某个存储的位图时,我可以清除形状图形并将位图添加到容器中——blit并删除存储的位图。如果有一种方法可以用缓存对象以外的东西写入cacheCanvas,那还是很有趣的。

仅仅绘制到缓存画布是不够的,你必须确保更新绘制它的阶段。

另一种给你更多控制权的方法是将你的cacheCanvas包装在另一个阶段。这使您可以使用与EaselJS阶段相同的控件向其中添加内容。请注意,当您更新它时,它会清除缓存的原始内容,因此这不是一个完美的解决方案。https://jsfiddle.net/lannymcnie/8yczqt05/

var stage2 = new createjs.Stage(s.cacheCanvas);
stage2.autoClear = false; // Keep the current cache. Just for this demo
var s2 = new createjs.Shape();
s2.graphics.f("blue").dc(50,50,50);
stage2.addChild(s2);
stage2.update();

如果你正在制作一个撤消/重做系统,你可能会考虑一个更强大的解决方案,而不是依赖于Shape的缓存。听起来你已经在探索一个缓存容器了,希望你能成功。

干杯!

最新更新