Question

我使用html 5 canvas和java脚本创建了简单的绘图应用程序。我想为我的应用添加拖动功能。即圆圈可以从一个地方拖动到另一个地方，就像我们在ms画中看到的那样。

为了拖动功能工作，需要在我的代码中完成所有更改。请帮忙。

我的代码在下面给出

<!doctype html>
<html>
<head>
<title>Paint</title>
<style type="text/css">
  #paintbg {
    background-color: #333333;
  }
  #realCanvas, #tempCanvas {
    position: absolute;
    left:350px;
    top:55px;
    border: 5px double gray;
    cursor: crosshair;
  }
  #toolset {
   width: 80px; 
   position: absolute;
   left:240px;
   top:50px; 
   background:#35d128; 
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   }
   #colorset{
     background:#aaaaaa; 
     position: absolute;
     left:350px;
     top:520px; 
     border:1px solid #888888;
   }
   #tools{
     background:#358128; 
     color:#f3f3f3;
     width:80px;
     height:25px;
     border:1px solid #33842a;
     -webkit-border-radius: 0 15px 15px 0;
     -moz-border-radius: 0 15px 15px 0;
     box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
    }
    #tools:hover{
      color:#edebda;
      -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
      -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
      box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
    }
    #tools:active{
      background:#014400; 
      width:75px
    }

</style>
</head>
<body id="paintbg">
  <form>
  <fieldset id="toolset">

    <br><button id="tools" type="button" onclick="curr_tool('circle')">Circle</button></br>
    <br><button id="tools" type="button" onclick="clears()">Clear</button></br>
  </fieldset>
  </form>
  <div>
    <canvas id="realCanvas" width="700" height="450" style=" background-color: #ffffff; z-index: 0"  ></canvas>
    <canvas id="tempCanvas" width="700" height="450"  style="z-index: 1"></canvas>
  </div>  
  <fieldset id="colorset">
  <table >
   <tr>
    <td><input type="checkbox" id="fill"/>Fill</td>
    <td><button onclick="fillcolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="fillcolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>
   </tr>
   <tr>
    <td><input type="checkbox" id="outline" checked="checked"/>Outline</td>
    <td><button onclick="linecolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
    <td><button onclick="linecolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>

  </table>
  </fieldset>
 <script>
  var board = document.getElementById("realCanvas");
  var tmp_board = document.getElementById("tempCanvas");
  b_width = board.width;
  b_height = board.height;
  var ctx = board.getContext("2d");
  var tmp_ctx = tmp_board.getContext("2d");
  var x ;
  var y ;
  var hold = false;
  var fill = false;
  var stroke = true;
  var tool = 'pencil';
  tmp_ctx.lineJoin = 'round';
  tmp_ctx.lineCap = 'round';
  function curr_tool(selected){tool = selected;}
  function attributes(){
    if (document.getElementById("fill").checked)
      fill = true;
    else
      fill = false;
    if (document.getElementById("outline").checked)
      stroke = true;
    else
      stroke = false;
  }

  function clears(){
    ctx.clearRect(0, 0, b_width, b_height);
  }
  function linecolor(scolor){  
    if (document.getElementById("outline").checked)
      tmp_ctx.strokeStyle = scolor;
  }
  function fillcolor(fcolor){
    if (document.getElementById("fill").checked)
      tmp_ctx.fillStyle =  fcolor;
  }
  tmp_board.onmousedown = function(e) {
        attributes();
        x = e.pageX - this.offsetLeft;
        y = e.pageY -this.offsetTop;
        hold = true;
        begin_x = x;
        begin_y = y;
        tmp_ctx.beginPath();
        tmp_ctx.moveTo(begin_x, begin_y);    
  }

  tmp_board.onmousemove = function(e) {
        if (x == null || y == null) {
          return;
        }
        if(hold){

        x = e.pageX - this.offsetLeft;
        y = e.pageY - this.offsetTop;
        goDraw();
        }
      }

  tmp_board.onmouseup = function(e) {
        ctx.drawImage(tmp_board,0, 0);
        tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
        x = null;
        y = null;
        hold = false;
  }




tmp_board.ondblclick=function(e) {
goDraws();


}


  function goDraw(){

    if (tool == 'circle'){             
      tmp_ctx.clearRect(0, 0, b_width, b_height);
      tmp_ctx.beginPath();
      tmp_ctx.arc(begin_x, begin_y, Math.abs(y - begin_y), 0 , 2 * Math.PI, false);
      if(stroke) 
        tmp_ctx.stroke();
      if(fill) 
        tmp_ctx.fill();
    }

   }

    function goDraws(){
        tmp_ctx.beginPath();
        tmp_ctx.arc(begin_x, begin_y, 100, 0 , 2 * Math.PI, false);
        tmp_ctx.fillStyle = 'white';
        tmp_ctx.fill()


        ctx.drawImage(tmp_board,0, 0);
                tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
                x = null;
                y = null;
                hold = false;

}
 </script>
</body>
</html>

Answer 1

你的代码的JSFiddle http://jsfiddle.net/M2sQK/

在没有为您提供代码的情况下，以下是我将要实现移动功能的问题和步骤。你必须填补空白。

这些是绘制的形状，而不是对象。您需要将每个圈子的数据存储为对象{shape:'circle', x:0, y:0, radius:0}。
创建抓取工具。附加（或添加）用于鼠标移动和鼠标按下的侦听器。
每次启动移动操作时，脚本都必须通过形状/圆形对象的集合/数组进行迭代，以找到要抓取的对象（反向迭代数组并获取与签入匹配的第一个对象）＃4）。
要找到您点击的圆圈，您需要包含某种“碰撞检测”（对于圆形，我建议检查鼠标x / y是否在圆心的圆半径内）。）if(Math.sqrt((circles[i].x - mouse.x) * (circles[i].x - mouse.x) + (circles[i].y - mouse.y) * (circles[i].y - mouse.y)) < circles[i].radius)
更新活动对象x，y并在移动活动圆圈时将所有其他圆重绘为画布。

这是我的一个使用类似迭代/检测的画布实验。 http://jsfiddle.net/4ACYq/当圆圈进入其他圆圈的某个半径范围内时绘制线条。

在HTML 5绘图应用程序中拖动功能

1 个答案: