實現canvas連線

如圖：

簡單說明下，每個點都可以連接，但是不能重復連接同一個點，當連接到最后一個點的時候，會自動連接第一個點（首尾相連）。

 

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

　　

畫點

 

使用數組保存點的位置，遍歷數組將點畫出來

var points = [{x: 300,y: 98, isConnect: false},{x: 217,y: 264, isConnect: false},{x: 295,y: 359, isConnect: false},{x: 372,y: 508, isConnect: false},{x: 511,y: 385, isConnect: false},{x: 497,y: 203, isConnect: false}]

function drawPoint () {
  for (var i = 0, len = points.length; i < len; i++) {
      ctx.save()
      ctx.beginPath()
      ctx.arc(points[i].x, points[i].y, 10, 0, 2 * Math.PI)
      ctx.fill()
      ctx.restore()
  } 
}

畫線

畫線這部分涉及到交互，所以我們需要添加事件，設置drawing，當點擊的時候才能開始畫線

var mouse = { //用來保存鼠標移動的位置
      start: {x: 0, y: 0},
      end: {x: 0, y: 0}
    }
var drawing = false; //判斷是否可以畫線
    function drawLine (pos1, pos2) {
      ctx.save()
      ctx.beginPath()
      ctx.moveTo(pos1.x, pos1.y)
      ctx.lineTo(pos2.x, pos2.y)
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
    }

    canvas.addEventListener('mousedown', function(e) {

      mouse.start.x = e.pageX
      mouse.start.y = e.pageY
      drawing = true
    })

    canvas.addEventListener('mousemove', function(e) {

      mouse.end.x = e.pageX
      mouse.end.y = e.pageY
      ctx.clearRect(0, 0, canvas.width, canvas.height) //清除畫布
29       if (drawing) {
        drawLine(mouse.start, mouse.end)
      }

    })

“吸附”點

我們現在是可以在任意一點開始畫線，但是我們的需求是，靠近某個點才能開始畫線

怎么判斷靠近某個點呢？使用勾股定理，計算兩點的距離（一個點是原點， 另一個點是鼠標位置）小於一個值(dis)時，我們判定被這個點“吸附”了，然后開始畫線。

寫一個方法計算距離：

function distance (pos1, pos2) {
  return Math.sqrt(Math.pow(pos1.x - pos2.x, 2) + Math.pow(pos1.y - pos2.y, 2))    
}

判斷是否被”吸附“, 並且”吸附“過的點不能再連接：

function adsorption (mouse) {

   for (var i = 0, len = points.length; i < len; i++) {
        
      if (!points[i].isConnect && distance(mouse, points[i]) <= dis) {

          points[i].isConnect = true
          drawing = true

      }

   }
}
...
//修改下事件
// canvas.addEventListener('mousedown', function(e) {

//   mouse.start.x = e.pageX
//   mouse.start.y = e.pageY

 // })

canvas.addEventListener('mousemove', function(e) {

  mouse.end.x = e.pageX
  mouse.end.y = e.pageY
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  adsorption(mouse.end)
  drawPoint()
  if (drawing) {
    drawLine(mouse.start, mouse.end)
  }

})

到這里，鼠標靠近點的時候，就可以畫線了，但是並不是我們預想的那樣，應該從點開始畫線

這是因為在drawLine傳值的是mouse.start，我們只需要把mouse.start換成點的位置就可以了，那么如何換成點的位置呢？

可以用一個數組保存連接過的點：

var savePoints = []
...
//修改adsorption
function adsorption (mouse) {

   for (var i = 0, len = points.length; i < len; i++) {
        
      if (!points[i].isConnect && distance(mouse, points[i]) <= dis) {

          points[i].isConnect = true
          drawing = true
          savePoints.push(points[i])  

     }

   }
}
...
//修改mouse事件
canvas.addEventListener('mousemove', function(e) {

      ...
      if (drawing) {
        drawLine(savePoints[savePoints.length - 1], mouse.end)
      }

})

我們發現每次靠近一個點的時候，都是從這個點開始連線的，之前連接的線並沒有畫出來，clearRect清除了之前連的線

可以利用保存過的點，把之前連過的線畫出來：

 ...
 function drawOldLine () {
   for (var i = 0, len = savePoints.length - 1; i < len; i++) {
     drawLine(savePoints[i], savePoints[i + 1])
   }
}
...
//修改mousemove事件
...
if (_this.drawing) {

   ...
   drawOldLine()

}

好了，我們可以看到，每個點都可以連接，跟我們預想的一樣，現在就差最后一步了

首尾相連，簡單的思路就是，保存過的數組savePoints里的第一個點和最后一個點連線：

function autoLine () {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      drawOldLine()
      drawPoint()
      drawLine(savePoints[savePoints.length - 1], savePoints[0])
      drawing = false
}

到這里，已經完成了連線功能。

大家可以嘗試一下封裝成插件，以后可以方便地使用以及拓展。