HTML 5绘图应用程序中的拖动特性

Drag feature in HTML 5 paint application

本文关键字:拖动 绘图 应用程序 HTML      更新时间:2023-09-26

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

需要在我的代码中做什么更改才能拖动功能工作。请帮助。

我的代码如下

<!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>

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

在不提供代码本身的情况下,我将介绍实现move特性的问题和步骤。你必须填空。

  1. 这些是绘制的形状,而不是对象。您需要将每个圆的数据存储为对象{shape:'circle', x:0, y:0, radius:0}
  2. 创建抓取工具。为鼠标移动和鼠标下移附加(或添加)监听器。
  3. 每次移动动作开始时,脚本将不得不遍历形状/圆形对象的集合/数组以找到要抓取的对象(反向迭代数组并抓取第一个与#4中检查匹配的对象)。
  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)
  5. 更新活动对象x,y,并在活动圆圈移动时将所有其他圆圈重新绘制到画布上。

这是我使用类似迭代/检测的画布实验之一。http://jsfiddle.net/4ACYq/当圆到达其他圆的一定半径内时,就会画线