【问题标题】:Drag and drop a shape from HTML5 canvas to another将形状从 HTML5 画布拖放到另一个
【发布时间】:2012-09-22 14:35:55
【问题描述】:

考虑有两个画布。我想拖动画布中的形状并将其放到另一个画布上。可以吗?

感谢理解我的问题。

【问题讨论】:

  • 你在使用任何框架吗?使用纯画布会很麻烦,因为没有形状的概念(只有 pixsls)。
  • 我不知道任何框架。如果你能提出一些很棒的建议。谢谢
  • KineticJS 看起来很简单,但我不确定它是否支持在两个画布之间拖动。

标签: html canvas drag-and-drop html5-canvas


【解决方案1】:

这绝对是可能的。不过,这不会特别容易。我会给你基本的想法。您需要自己计算和实施:

  1. 找出源形状边界。
  2. 获取该像素数据并使用它在旧画布元素之上构建一个新画布元素。您将使用它来处理拖动。
  3. 为此临时画布实现拖动逻辑。
  4. 检测目标画布上的“跌落”,找出边界击中它的位置。将目标像素数据替换为可拖动对象上的数据。
  5. 摆脱可拖动的画布。

我希望这会有所帮助!

【讨论】:

    【解决方案2】:

    我可能不理解您的问题,但形状不会在您绘制到的任何上下文中吗?

    示例:

    context1.drawImage(...);
    context2.drawImage(...);
    

    只需更改上下文?

    【讨论】:

      【解决方案3】:

      最简单的做法是使用 DOM 代理对象,捕捉鼠标事件,覆盖画布。因为考虑到使用库,问题中的代码非常复杂:

      http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

      从画布到画布仍然是您需要自己弄清楚的事情,因为用例非常罕见,并且您需要在画布上没有拖动时为对象设置动画。绝对可能,但极其复杂。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-06-03
        • 2012-12-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-10-05
        • 2011-01-01
        相关资源
        最近更新 更多