我修改了一个页面,我可以在其中将图像拖放到画布上。它做了我想要的一切,除了一个。我尝试了多种方法(包括脚本,例如 Kinetic 和 Raphael,我仍然认为这可能是要走的路)但已经死路一条:
删除图像后,我无法将其在画布上拖动到新位置。
function drag(e)
{
//store the position of the mouse relativly to the image position
e.dataTransfer.setData("mouse_position_x",e.clientX - e.target.offsetLeft );
e.dataTransfer.setData("mouse_position_y",e.clientY - e.target.offsetTop );
e.dataTransfer.setData("image_id",e.target.id);
}
function drop(e)
{
e.preventDefault();
var image = document.getElementById( e.dataTransfer.getData("image_id") );
var mouse_position_x = e.dataTransfer.getData("mouse_position_x");
var mouse_position_y = e.dataTransfer.getData("mouse_position_y");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// the image is drawn on the canvas at the position of the mouse when we lifted the mouse button
ctx.drawImage( image , e.clientX - canvas.offsetLeft - mouse_position_x , e.clientY - canvas.offsetTop - mouse_position_y );
}
function convertCanvasToImage() {
var canvas = document.getElementById('canvas');
var image_src = canvas.toDataURL("image/png");
window.open(image_src);
}
这是我用作初始起点的 JSFiddle - http://fiddle.jshell.net/gael/GF96n/4/(将 JSFiddle 徽标拖到画布上,然后尝试移动它)。我已经在我几乎可以工作的页面中添加了 CSS、选项卡、内容等。我不想失去的功能是能够将单个图像多次(克隆)拖到画布上。
关于如何创建此功能的任何想法/示例/指针?