畫布拖放

-1

我想將圖像拖放到畫布中，並使其可拖動。到目前爲止，這是我能找到的所有東西，但是一旦文本被放入畫布中，它就不再可拖動了。畫布拖放

enter code herehttp://jsfiddle.net/ranganadh/6WpKf/

請幫助我的人：d

來源

2014-02-18 user3298953

你不能將事件綁定到畫布上（直接）上繪製的東西。看看畫布對象，即使在放下之後，你也會看到裏面沒有任何元素可以點擊。我會說解決方法是將一個點擊事件綁定到畫布本身，並使用鼠標位置來確定您點擊的內容，然後重新繪製鼠標移動...或使用SVG。 –

由於@Zack阿蓋爾說，在HTML畫布任何繪圖只是畫在畫布上 - 它不能被拖動。

如何拖累HTML畫布文本：

使用jQuery可拖動拖動列表項到畫布上（因爲你已經做了）
有關文本的對象將信息（文本中，x & y位置，文本寬度&高度）
添加該文本對象到持有畫布
上的所有文本的數組當用戶開始拖動，發現這是文本理解過程R上的鼠標（選定文本）
用戶拖動，移動用戶已經拖的距離選定的文本

您必須在每次用戶拖動任何文本的時間重畫在畫布上的所有文本新的位置。

這裏的代碼和演示：http://jsfiddle.net/m1erickson/hQTLa/

<!doctype html> 
<html lang="en"> 
<head> 
    <style> 
     body{ background-color: ivory; } 
     canvas{border:1px solid red;} 
    </style> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script> 
    $(function() { 

     // get reference to the canvas and its context 
     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     ctx.font = "16px helvetica"; 

     // variables 

     // some text objects defining text on the canvas 
     var texts=[]; 

     // variables used to get mouse position on the canvas 
     var $canvas=$("#canvas"); 
     var canvasOffset=$canvas.offset(); 
     var offsetX=canvasOffset.left; 
     var offsetY=canvasOffset.top; 
     var scrollX=$canvas.scrollLeft(); 
     var scrollY=$canvas.scrollTop(); 

     // variables to save last mouse position 
     // used to see how far the user dragged the mouse 
     // and then move the text by that distance 
     var startX; 
     var startY; 

     // this var will hold the index of the selected text 
     var selectedText=-1; 


     // make the <li> draggable 
     $("li").draggable({ 
      helper: 'clone' 
     }); 

     // drop on canvas 
     $("#canvas").droppable({ 
      accept: "li", 
      drop: function(event,ui){ 
       ctx.fillText($(ui.draggable).clone().text(),ui.position.left - event.target.offsetLeft,ui.position.top - event.target.offsetTop); 

       var text=$(ui.draggable).clone().text(); 
       var x=ui.position.left - event.target.offsetLeft; 
       var y=ui.position.top - event.target.offsetTop; 
       var width=ctx.measureText(text).width; 
       var height=16; 

       // save this text info in an object in texts[] 
       texts.push({text:text,x:x,y:y,width:width,height:height}); 

       // draw all texts to the canvas 
       draw(); 

      } 
     }); 

     // clear the canvas draw all texts 
     function draw(){ 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
      for(var i=0;i<texts.length;i++){ 
       var text=texts[i]; 
       ctx.fillText(text.text,text.x,text.y); 
      } 
     } 

     // test if x,y is inside the bounding box of texts[textIndex] 
     function textHittest(x,y,textIndex){ 
      var text=texts[textIndex]; 
      return(x>=text.x && 
       x<=text.x+text.width && 
       y>=text.y-text.height && 
       y<=text.y); 
     } 

     // handle mousedown events 
     // iterate through texts[] and see if the user 
     // mousedown'ed on one of them 
     // If yes, set the selectedText to the index of that text 
     function handleMouseDown(e){ 
      e.preventDefault(); 
      startX=parseInt(e.clientX-offsetX); 
      startY=parseInt(e.clientY-offsetY); 
      // Put your mousedown stuff here 
      for(var i=0;i<texts.length;i++){ 
       if(textHittest(startX,startY,i)){ 
        selectedText=i; 
       } 
      } 
     } 

     // done dragging 
     function handleMouseUp(e){ 
      e.preventDefault(); 
      selectedText=-1; 
     } 

     // also done dragging 
     function handleMouseOut(e){ 
      e.preventDefault(); 
      selectedText=-1; 
     } 

     // handle mousemove events 
     // calc how far the mouse has been dragged since 
     // the last mousemove event and move the selected text 
     // by that distance 
     function handleMouseMove(e){ 
      if(selectedText<0){return;} 
      e.preventDefault(); 
      mouseX=parseInt(e.clientX-offsetX); 
      mouseY=parseInt(e.clientY-offsetY); 

      // Put your mousemove stuff here 
      var dx=mouseX-startX; 
      var dy=mouseY-startY; 
      startX=mouseX; 
      startY=mouseY; 

      var text=texts[selectedText]; 
      text.x+=dx; 
      text.y+=dy; 
      draw(); 
     } 

     // listen for mouse events 
     $("#canvas").mousedown(function(e){handleMouseDown(e);}); 
     $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
     $("#canvas").mouseup(function(e){handleMouseUp(e);}); 
     $("#canvas").mouseout(function(e){handleMouseOut(e);}); 


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

    </script> 
</head> 
<body> 
    <ul id="drag"> 
     <li class="new-item">Drag me down1</li> 
     <li class="new-item">Drag me down2</li> 
     <li class="new-item">Drag me down3</li> 
    </ul> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

來源

2014-02-18 16:58:57 markE

幹得好。我覺得在這一點上，我可能會放棄在畫布上，只是使用絕對定位的元素。令人印象深刻的壽。 –

@ZackArgyle，在你放棄畫布之前，也許你會想要在拖動到畫布後對文本做一些有趣的事情;）http://jsfiddle.net/m1erickson/2JjYY/ – markE

回答

相關問題