JavaScript點選兩點繪製直線

螞蟻小編發表於2017-03-27
JavaScript

本章節分享一段程式碼例項，它實現點選兩點能夠繪製一條直線的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#container{ 
  width:1000px; 
  height:600px; 
  border:1px #bfbfbf solid;
} 
</style> 
<script type="text/javascript"> 
function makedot(x,y){ 
  pointDiv="<div style='height:1px;position:absolute;left:" + x 
  +"px;top:" + y 
  + "px;width:1px;background:#f00;overflow:hidden'></div>"; 
  return pointDiv;
} 
 
function line(x1,y1,x2,y2){ 
  var slope; //斜率
  var direction;//座標運動方向
  var tx = x2 - x1;
  var ty = y2 - y1;
  if(tx == 0 && ty == 0)return;
  var points = "";
  var axis;//座標軸上的座標
  if(Math.abs(tx) >= Math.abs(ty)){//在x軸上移動
    direction = tx > 0 ? 1 : -1;
    tx = Math.abs(tx);
    slope = ty / tx;
    axis = x1;
    for(i = 0; i < tx; i ++){
      points += makedot(axis, y1 + i * slope);
      axis += direction;
    } 
  }
  else{//在y軸上移動
    direction = ty > 0 ? 1 : -1;
    ty = Math.abs(ty);
    slope = tx / ty; 
    axis = y1;  
    for(i = 0; i < ty; i ++){
      points += makedot(x1 + i * slope, axis);
      axis += direction;
    }
  }
  var container = document.getElementById("container");
  container.innerHTML += points; 
} 
var oldPoint = null;
//獲取滑鼠位置
function mousePosition(ev){
  ev = ev || window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  var doc = document.documentElement, body = document.body;
  var pageX = event.clientX 
  + (doc && doc.scrollLeft || body && body.scrollLeft || 0) 
  - (doc && doc.clientLeft || body && body.clientLeft || 0);
  var pageY = event.clientY 
  + (doc && doc.scrollTop || body && body.scrollTop || 0) 
  - (doc && doc.clientTop || body && body.clientTop || 0);    
  return {x:pageX, y:pageY};
}
 
function recordPoint(ev){
  var point = mousePosition(ev);
  if(oldPoint != null){
    line(oldPoint.x, oldPoint.y, point.x, point.y);
  }
  oldPoint = point;
}
window.onload=function(){
  var container=document.getElementById("container");
  container.onclick=function(ev){
    var ev=window.event||ev;
    recordPoint(ev);
  }
}
</script>
</head> 
<body> 
<div id="container"> 
</div>
</body> 
</html>

上面的程式碼實現了我們的要求，能夠實現點選指定區域的兩點繪製直線的效果。

相關文章