拖放到HTML5画布

Question

I'm dragging an html element and dropped to a canvas, took the location where released and plot the object at same location at canvas. 我将html元素拖放到画布上，移至释放的位置，并在画布上的相同位置绘制对象。 But showing at the different location. 但是显示在不同的位置。 See my code . 看我的代码。

Script 脚本

function init() {
    var canvas = document.getElementById("graphCanvas");
    var context = canvas.getContext("2d");

    context.lineWidth = 2;
}

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

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

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), 
        ev.clientX, ev.clientY);
}

HTML HTML

<body onload="init();">
    <canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"></canvas>
    <img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/>
</body>

Answer 1

Fixed. 固定。 Updated code is http://jsfiddle.net/YXxsH/5/ . 更新的代码为http://jsfiddle.net/YXxsH/5/ 。 Calculations are done with pageX and pageY and image offset values. 使用pageX和pageY以及图像offset值进行计算。

拖放到HTML5画布

问题描述

1 个解决方案

解决方案1
2 已采纳 2013-09-30 09:26:32

拖放到HTML5画布

问题描述

1 个解决方案

解决方案1 2 已采纳 2013-09-30 09:26:32

解决方案1
2 已采纳 2013-09-30 09:26:32