Question

我有一个画布元素，其中包含由EaselJS促成的动画。 canvas元素有一个父div包装它，draggable设置为true。

<div class="outer-parent" draggable="true">
  <div class="inner-parent">
   <canvas></canvas>
  </div>
</div>

可拖动的事件正在发挥作用（我最初遇到了这个问题，但问题在这里解决了：EaselJs canvas dragstart event not bubbling to parent），但是canvas元素似乎没有显示＆＃34; ghost＆＃34;。如果我向outer-parent添加边框，我可以看到可拖动的移动，但在边框内没有任何东西 - 它是100％透明的。

我检查了这是否是特定于画布而不是画架的问题 - 它似乎是一个画架问题，因为鬼在这个例子中工作正常：http://codepen.io/anon/pen/BNVNpr。

这是一个不使用easeljs和movieclipjs的例子 http://codepen.io/anon/pen/xGzwYY http://codepen.io/anon/pen/yNEOwB（运行从flash导出的脚本）

什么可能导致幽灵不显示，我怎么能让它显示？

Answer 1

看起来这是Chrome中的浏览器行为。您的所有示例都在Safari中按预期工作，但是，在Chrome中，它似乎有一个最大的画布大小，然后才会降低＃34;幽灵中的画布内容。例如，对我来说，200x300画布可以正常工作。

http://codepen.io/anon/pen/pJKNEq

我不确定你是如何解决这个问题的，因为它似乎是浏览器的限制。扩展它可行，但可能不理想。

http://codepen.io/anon/pen/yNEVaZ

Easeljs（MovieClip）canvas draggable = true不显示ghost图像

1 个答案: