在將圖像放到畫布上後允許拖動

$(function() { 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

// get the offset position of the container 
var $canvas = $("#canvas"); 
var Offset = $canvas.offset(); 
var offsetX = Offset.left; 
var offsetY = Offset.top; 

// select all .tool's 
var $tools = $(".tool"); 

// make all .tool's draggable 
$tools.draggable({ 
helper: 'clone', 
revert: 'invalid' 
}); 


    // assign each .tool its index in $tools 
$tools.each(function (index, element) { 
$(this).data("toolsIndex", index); 
}); 

// make the canvas a dropzone 
$canvas.droppable({ 
drop: dragDrop, 
}); 

// handle a drop into the canvas 
function dragDrop(e, ui) { 

// get the drop point (be sure to adjust for border) 
var x = parseInt(ui.offset.left - offsetX); 
var y = parseInt(ui.offset.top - offsetY); 

// get the drop payload (here the payload is the $tools index) 
var theIndex = ui.draggable.data("toolsIndex"); 

// drawImage at the drop point using the dropped image 
ctx.drawImage($tools[theIndex], x, y, 32, 32); 

} 
});

我嘗試了很多東西，但是失敗了。該代碼允許我將多個圖像拖放到畫布元素上。我需要做的是增加拖放圖像後再次拖放的可能性。我知道畫布必須每次重繪，但我不知道如何。在將圖像放到畫布上後允許拖動

任何人都可以解決這個問題嗎？

來源

2014-03-13 Sahar Ch.

是什麼意思喲* '再次拖動圖像' *？你的意思是在畫布上開始拖動一次？ –

我拖動的圖像不在畫布元素中。我從畫布外面（實際上是手風琴）拖放到畫布元素上。所以，一旦他們進入畫布，我不能再移動它們，我需要它們可以拖動，改變它們的位置（爲了應用程序的靈活性）。 –

你的意思是說，一旦你放棄它們，它們將從手風琴中移除，但是你希望它們仍然存在，所以你可以再次拖動它們？ –

既然你評論說，你打開帆布庫，這裏是讓你一個例子：

拖累使用jQueryUI的工具欄-DIV img元素。
將img放在畫布上並創建一個可以在畫布上拖動的KineticJS.Image對象。

甲演示：http://jsfiddle.net/m1erickson/gkefk/

結果：一個IMG拖動3X從藍色工具欄，滴在灰色帆布，然後拖在畫布上。

enter image description here

這裏有一個註釋代碼示例：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> 
<style> 
    body{padding:20px;} 
    #container{ 
     border:solid 1px #ccc; 
     margin-top: 10px; 
     width:350px; 
     height:350px; 
    } 
    #toolbar{ 
     width:350px; 
     height:35px; 
     border:solid 1px blue; 
    } 
</style>   
<script> 
$(function(){ 

    // get a reference to the house icon in the toolbar 
    // hide the icon until its image has loaded 
    var $house=$("#house"); 
    $house.hide(); 

    // get the offset position of the kinetic container 
    var $stageContainer=$("#container"); 
    var stageOffset=$stageContainer.offset(); 
    var offsetX=stageOffset.left; 
    var offsetY=stageOffset.top; 

    // create the Kinetic.Stage and layer 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    // start loading the image used in the draggable toolbar element 
    // this image will be used in a new Kinetic.Image 
    var image1=new Image(); 
    image1.onload=function(){ 
     $house.show(); 
    } 
    image1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"; 

    // make the toolbar image draggable 
    $house.draggable({ 
     helper:'clone', 
    }); 

    // set the data payload 
    $house.data("url","house.png"); // key-value pair 
    $house.data("width","32"); // key-value pair 
    $house.data("height","33"); // key-value pair 
    $house.data("image",image1); // key-value pair 

    // make the Kinetic Container a dropzone 
    $stageContainer.droppable({ 
     drop:dragDrop, 
    }); 

    // handle a drop into the Kinetic container 
    function dragDrop(e,ui){ 

     // get the drop point 
     var x=parseInt(ui.offset.left-offsetX); 
     var y=parseInt(ui.offset.top-offsetY); 

     // get the drop payload (here the payload is the image) 
     var element=ui.draggable; 
     var data=element.data("url"); 
     var theImage=element.data("image"); 

     // create a new Kinetic.Image at the drop point 
     // be sure to adjust for any border width (here border==1) 
     var image = new Kinetic.Image({ 
      name:data, 
      x:x, 
      y:y, 
      image:theImage, 
      draggable: true 
     }); 
     layer.add(image); 
     layer.draw(); 
    } 

}); // end $(function(){}); 

</script>  
</head> 
<body> 
    <div id="toolbar"> 
     <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"><br> 
    </div> 
    <div id="container"></div> 
</body> 
</html>

來源

2014-03-13 17:52:44 markE

你的代碼不工作.Drop操作不執行。 – Developer

@Singh，我剛剛運行我的示例代碼和演示上面＆他們似乎運行良好... – markE

@markE我可以刪除它在某些情況下丟棄圖像？ –

你想要的東西當然不容易。現在，您只需放下圖像並將其繪製在鼠標位置。做你想做的事，你需要：

跟蹤添加的圖像，他們的位置，他們的大小，和他們的Z指數。最好的方法是使用堆棧結構，具有以下屬性的對象數組：urlx，y，width,height。 z-index可以是數組的索引。
在畫布上開始拖動操作後，需要獲取要拖動的點，然後找到包含該點的z-index最高的圖像（基本上是實現點擊測試）。
要移動它，則必須將其從畫布中移除，這意味着使用除拖動的圖像之外的所有圖像重繪整個畫布。爲此，您可以使用先前定義的堆棧，並按順序繪製圖像。
最後，您需要在放下圖像後再次繪製圖像，從數組中的位置開始並在末尾附加它。

這不是一件容易的事。我建議你爲它使用一些庫。我不能推薦你，因爲我對畫布幾乎沒有任何經驗。

來源

2014-03-13 15:33:35

起初我決定使用EaselJS庫，最後我用純JS和jQuery來做。我沒有在這個庫上找到好的文檔，它總是很簡單的演示，而且當你看到我正在處理的應用程序需要的不僅僅是這些演示。謝謝你:-) –

我希望我可以幫助你更多的代碼，但我不能承諾，因爲這需要一些時間，我不知道我是否有時間。 –

在將圖像放到畫布上後允許拖動

回答

相關問題