vue 中canvas 根据点画出圆滑的曲线

文件BezierMaker.js

var BezierMaker = function(canvas, bezierCtrlNodesArr, color) {

    // this.canvas = canvas
    this.ctx = canvas
    this.bezierCtrlNodesArr = bezierCtrlNodesArr ? bezierCtrlNodesArr : []
    this.color = color ? color: '#ffffff'
    this.bezierArr = []
    
}
BezierMaker.prototype.bezier = function(t) { //贝塞尔公式调用
    var x = 0,
        y = 0,
        bezierCtrlNodesArr = this.bezierCtrlNodesArr,
        n = bezierCtrlNodesArr.length - 1,
        self = this
    bezierCtrlNodesArr.forEach(function(item, index) {
        if(!index) {
            x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        } else {
            x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        }
    })
    return {
        x: x,
        y: y
    }
}
BezierMaker.prototype.drawBezier = function() { //通过控制点算出实时xy值渲染到canvas
    var nodeArr = this.bezierCtrlNodesArr  
    if(nodeArr.length === 2) {
        console.warn('Control nodes should be more then two!')
        var startNode = nodeArr[0],
            endNode = nodeArr[1]

        this.ctx.moveTo(startNode.x, startNode.y)
        this.ctx.lineTo(endNode.x, endNode.y)
        this.ctx.strokeStyle = this.color
        this.ctx.stroke()
    } else if(nodeArr.length === 3) {
        var startNode = nodeArr[0],
            ctrlNode = nodeArr[1],
            endNode = nodeArr[2]
        this.ctx.beginPath()
        this.ctx.lineWidth = 6;
        this.ctx.lineJoin = 'round';
        this.ctx.lineCap = 'round';
        this.ctx.moveTo(startNode.x, startNode.y)
        this.ctx.quadraticCurveTo(ctrlNode.x, ctrlNode.y, endNode.x, endNode.y)
        this.ctx.strokeStyle = this.color
        this.ctx.stroke()
    } else if(nodeArr.length === 4) {
        var startNode = nodeArr[0],
            ctrlNodeA = nodeArr[1],
            ctrlNodeB = nodeArr[2],
            endNode = nodeArr[3]
        this.ctx.beginPath()
        this.ctx.lineWidth = 6;
        this.ctx.lineJoin = 'round';
        this.ctx.lineCap = 'round';
        this.ctx.moveTo(startNode.x, startNode.y)
        this.ctx.bezierCurveTo(ctrlNodeA.x, ctrlNodeA.y, ctrlNodeB.x, ctrlNodeB.y, endNode.x, endNode.y)
        this.ctx.strokeStyle = this.color
        this.ctx.stroke()
    } else {
        var self = this
        for(i = 0; i < 1; i+=0.01) {
            this.bezierArr.push(this.bezier(i))
        }
        this.bezierArr.forEach(function(obj, index) {
            if (index) {
                var startX = self.bezierArr[index - 1].x,
                    startY = self.bezierArr[index - 1].y,
                    x = obj.x,
                    y = obj.y
                self.ctx.beginPath()
                self.ctx.lineWidth = 6;
                self.ctx.lineJoin = 'round';
                self.ctx.lineCap = 'round';
                self.ctx.moveTo(startX, startY)
                self.ctx.lineTo(x, y)
                self.ctx.strokeStyle = self.color
                self.ctx.stroke()
            }
        })
    }
    
}
BezierMaker.prototype.factorial = function(num) { //递归阶乘
    if (num <= 1) {
        return 1;
    } else {
        return num * this.factorial(num - 1);
    }
}
export default BezierMaker

<canvas id="canvasBg" height="1026" width="1148"></canvas>

import BezierMaker from './BezierMaker.js'
data(){
	return{
		ctx:{},
	      canvas:{},
	      clickNodes:[],//点击的控制点对象数组
	      bezier:null,
	      num: 0, //控制点数
	      isPrinting :false, //正在绘制中
	      t:0,//贝塞尔函数涉及的占比比例，0<=t<=1
	      bezierNodes: [], //绘制内部控制点的数组
		}
	},
mounted(){
	this.canvas=document.querySelector('#canvasBg')
    this.ctx = this.canvas.getContext('2d');
    // this.canvas.style.transform= `scale(.5)`;
    this.canvas.addEventListener('mousedown', down, false);
    this.canvas.addEventListener('mousemove', move, false);
    this.canvas.addEventListener('mouseup', up, false);
    // this.canvas.addEventListener('mouseout', up, false);
    let that = this
    
    // this.clickNodes = [] //点击的控制点对象数组
    var bezierNodes = [] //绘制内部控制点的数组
    var isPrinted = false //当前存在绘制的曲线
    
    var isDrag = false //是否进入拖拽行为
    var isDragNode = false //是否点击到了控制点
    var dragIndex = 0 //被拖拽的点的索引
    var clickon = 0 //鼠标按下时间戳
    var clickoff = 0 //鼠标抬起
    function down(evt) {

          isDrag = true
          clickon = new Date().getTime()
          var 
              x = evt.offsetX,
              y = evt.offsetY
              // x = clientX - diffLeft,
              // y = clientY - diffTop
              
              that.clickNodes.forEach(function(item, index) {
                  var absX = Math.abs(item.x - x),
                      absY = Math.abs(item.y - y)
                  if(absX < 10 && absY < 10) {
                      isDragNode = true
                      dragIndex = index
                  }
              })
              
      }
      function move(e){
        if(isDrag && isDragNode) {
          var 
          x = e.offsetX,
          y = e.offsetY
          // x = clientX - diffLeft,
          // y = clientY - diffTop
          that.clickNodes[dragIndex] = {
              x: x,
              y: y
          }
          that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height)
          if( that.setDate.length>0){
            that.setDate.forEach(item=>{
              that.bezier= new BezierMaker(that.ctx,item,'red')
              that.bezier.drawBezier()
            })
          }
          that.clickNodes.forEach(function(item, index) {
              var x = item.x,
                  y = item.y,
                  i = parseInt(index, 10) + 1
              that.ctx.fillText("p" + i, x, y + 20)
              that.ctx.beginPath()
              that.ctx.arc(x, y, 10, 0, Math.PI * 2, false)
              that.ctx.fill()
              that.ctx.beginPath()
              that.ctx.moveTo(startX, startY)
             
              that.ctx.lineTo(x, y)
              that.ctx.strokeStyle = '#696969'
              that.ctx.stroke()
              if (index) {
                  var startX = that.clickNodes[index - 1].x,
                      startY = that.clickNodes[index - 1].y
                  that.ctx.beginPath()
                  that.ctx.moveTo(startX, startY)
                  that.ctx.lineTo(x, y)
                  that.ctx.stroke()
                  
              }
          })
          if(isPrinted) {
              var bezierArr = []
              for(i = 0; i < 1; i+=0.01) {
                  bezierArr.push(that.bezierFun(that.clickNodes, i))
              }
              bezierArr.forEach(function(obj, index) {
                  if (index) {
                      var startX = bezierArr[index - 1].x,
                          startY = bezierArr[index - 1].y,
                          x = obj.x,
                          y = obj.y
                      that.ctx.beginPath()
                      that.ctx.moveTo(startX, startY)
                      that.ctx.lineTo(x, y)
                      that.ctx.strokeStyle = 'red'
                      that.ctx.stroke()
                  }
              })
          }
      }
      }
      function up(e){
        isDrag = false
        isDragNode = false
        clickoff = new Date().getTime()
        if(clickoff - clickon < 200) {
            var 
             x = e.offsetX,
          y = e.offsetY
            if(!isPrinted && !isDragNode) {
                that.num++
                that.ctx.fillStyle = '#696969'
                that.ctx.font = "30pt Calibri";
                that.ctx.fillText("p" + that.num, x, y + 20);
                // that.ctx.fillText("p" + that.num + ': ('+ x +', '+ y +')', 10, that.num * 30)
                that.ctx.beginPath()
                that.ctx.arc(x, y, 10, 0, Math.PI * 2, false)
                that.ctx.fill()
                if(that.clickNodes.length) {
                    var startX = that.clickNodes[that.clickNodes.length - 1].x,
                        startY = that.clickNodes[that.clickNodes.length - 1].y
                    that.ctx.beginPath() 
                    that.ctx.moveTo(startX, startY)
                    that.ctx.lineTo(x, y)
                    that.ctx.strokeStyle = '#696969'
                    that.ctx.stroke()
                } 
                that.clickNodes.push({
                    x: x,
                    y: y
                })
            }
        }
      }
},
methods:{
	//绘画
	ligature(){
		this.bezier= new BezierMaker(this.ctx,this.clickNodes,'red')
      	this.bezier.drawBezier()
	}
	//清除
	removeBtn(){
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.clickNodes = []
      this.setDate=[]
      this.num=0
      this.t=0
    },
     // 确定
    sureBtn(){
    //确定是 请画板上的点去掉 要清空画板 所以线要重新绘画
      this.clickNodes=[]
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.bezier= new BezierMaker(this.ctx,this.clickNodes,'red')
      this.bezier.drawBezier()
    },
}

上面的点是可以点击滑动的 改变线的走向 这里用到的是贝塞尔曲线