如何从画布中拖动图像？答案

【问题标题】：How to drag images from a canvas?如何从画布中拖动图像？
【发布时间】：2014-02-04 02:53:28
【问题描述】：

检查这个fiddle.

我们可以将“Drag me downX”行拖放到画布 div 中；文本行将保留在那里，而鼠标后面会有半透明的文本行。我希望将画布的文本行 out 拖出同样的效果。然而，一旦文本被拖放到画布中，它就无法移动。我怎样才能达到上述效果（它具有与上述相同的效果非常重要）？

HTML

  <ul id="drag">
     <li class="new-item">Drag me down1</li>
     <li class="new-item">Drag me down2</li>
     <li class="new-item">Drag me down3</li>
  </ul>    

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

 $("li").draggable({
    helper: 'clone'
 });
 $("#myCanvas").droppable({
    accept: "li",
    drop: function(event, ui) {
       var context = $(this)[0].getContext("2d");
       context.font = "16px helvetica";
       context.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop);
    }
 });

CSS

 li{
    font-family:helvetica;
    list-style-type:none;
 }

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

一旦你将元素放到<canvas> 上，它就会失去所有意义，因为文本会被光栅化。因此，没有办法将文本取出。您可以做的最好的事情是将拖动标签的不可见副本附加到画布上，然后每当画布发生任何拖动事件时，弹出一个元素并将其拖动到您想要的位置。但是，这不一定会为您提供所需的确切标签。

如果你真的在寻找挑战，你可以看看这个问题，它是关于在画布被光栅化后选择画布中的文本。 How to Make Canvas Text Selectable?

【讨论】：

我明白了。我并不真正关心文本的含义。我真的很想用图像来做到这一点。将图像拖入；然后能够将图像拖出；但我猜图像也失去了所有意义？有没有办法将它设置为“可拖动”才能完成我上面描述的事情？
只要您使用<canvas>，任何进入并被光栅化的内容都会在上下文中丢失。使用<canvas> 是否有特定原因？
是的，我正在尝试完成这样的事情：casetagram.com/builder 如果您在右侧菜单中选择“照片”，您可以上传照片，您将看到它们应用于使用 gloabCompositeOperation = 'source-atop' 等的画布。您也可以按照我描述的方式从画布中拖动照片；我想弄清楚如何做到这一点

【解决方案2】：

我认为可能存在问题，因为它基本上是一个被拖放到自身上的元素。我创建了一个隐藏的画布并将原始画布叠加在新画布上。当触发拖动事件时，隐藏的画布被放置在更高的 z-index 上，并获取坐标信息以传递给原始画布。

【讨论】：