HTML5 画布拖放项答案

【问题标题】：HTML5 Canvas Drag and Drop ItemHTML5 画布拖放项
【发布时间】：2014-03-09 21:38:31
【问题描述】：

一直在努力完成这项工作。这是我的代码：

<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=600 width=1000 style="border:1px solid #000000;"></canvas>
                        <img id="img1" src="./images/arrow_up.svg" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/>
                    <script type="text/javascript">
                        function init() {
                            var canvas = document.getElementById("graphCanvas");
                            var context = canvas.getContext("2d");

                            context.lineWidth = 2;
                            }
                            var pos;
                            function allowDrop(ev) {
                                ev.preventDefault();
                            }
                            function get_pos(ev){
                                pos = [ev.pageX, ev.pageY];
                            }
                            function drag(ev) {
                                ev.dataTransfer.setData("Text",ev.target.id);
                            }

                            function drop(ev) {
                                ev.preventDefault();
                                var offset = ev.dataTransfer.getData("text/plain").split(',');
                                var data=ev.dataTransfer.getData("Text");

                                var img = canvas = document.getElementById("img1");
                                var dx = pos[0] - img.offsetLeft;
                                var dy = pos[1] - img.offsetTop;
                                document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), ev.pageX - dx, ev.pageY - dy);
                            }
                    </script>

假设它是一个可以拖放到画布中的可拖动图像。一旦图像在画布中，用户就可以移动该图像。不幸的是，我似乎无法让它工作。如果将图像放在左上角附近，应该会出现，但图像会出现在右下角附近。

我该如何解决这个问题？

【问题讨论】：

标签： html canvas

【解决方案1】：

您可以使用 html5 draggable 将图像元素拖放到画布上。

然后您可以在画布上绘制该图像的副本。

您需要此信息才能在画布上绘制可拖动图像的副本：

相对于可拖动图像的鼠标位置（参见下面的 mousedown）
画布相对于文档的位置（canvasElement.offsetLeft & canvasElement.offsetTop）。
鼠标在拖放时相对于文档的位置（dropEvent.clientX & dropEvent.clientY）
可拖动元素的Id（在dragEvent.dataTransfer中存储和检索）

使用此信息，您可以像这样绘制可拖动元素的副本：

function drop(ev) {
    ev.preventDefault();

    var dropX=ev.clientX-canvasLeft-startOffsetX;
    var dropY=ev.clientY-canvasTop-startOffsetY;
    var id=ev.dataTransfer.getData("Text");
    var dropElement=document.getElementById(id);

    // draw the drag image at the drop coordinates
    ctx.drawImage(dropElement,dropX,dropY);
}

这是示例代码和演示：http://jsfiddle.net/m1erickson/WyEPh/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #graphCanvas{border:1px solid #000000;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("graphCanvas");
    var ctx=canvas.getContext("2d");
    var canvasLeft=canvas.offsetLeft;
    var canvasTop=canvas.offsetTop;
    canvas.ondrop=drop;
    canvas.ondragover=allowDrop;
    //
    var img=document.getElementById("img1");
    img.onmousedown=mousedown;
    img.ondragstart=dragstart;

    // this is the mouse position within the drag element
    var startOffsetX,startOffsetY;

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function mousedown(ev){
        startOffsetX=ev.offsetX;
        startOffsetY=ev.offsetY;
    }

    function dragstart(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();

        var dropX=ev.clientX-canvasLeft-startOffsetX;
        var dropY=ev.clientY-canvasTop-startOffsetY;
        var id=ev.dataTransfer.getData("Text");
        var dropElement=document.getElementById(id);

        // draw the drag image at the drop coordinates
        ctx.drawImage(dropElement,dropX,dropY);
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="graphCanvas" height=300 width=300></canvas>
    <img id="img1" src="house32x32.png" draggable="true" />        
</body>
</html>

但是...在画布上绘制的图像只是绘制的像素，因此不可拖动

您可以使用 KineticJS 之类的画布库来创建“保留的”图像，这些图像在画布上绘制后可以拖动。

这是一个使用 KineticJS 的演示，允许稍后在画布上拖动放置的图像：

http://jsfiddle.net/m1erickson/LuZbV/

【讨论】：