利用vue制作在線涂鴉板

nemo 發(fā)布于2019-08-20 13:29 / 2885人閱讀

摘要：撤銷清空等操作撤銷前進清空清空前后數(shù)據(jù)恢復(fù)到默認(rèn)數(shù)據(jù)地址查看代碼

效果展示

Canvas API簡介 調(diào)用方法

getImageData() 返回ImageData對象，該對象為畫布上指定的矩形復(fù)制像素數(shù)據(jù)

putImageData() 把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上

clearRect() 在給定的矩形內(nèi)清除指定的像素

toDataURL() 返回canvas圖像的URL

lineTo() 添加一個新點，創(chuàng)建從該點到最后指定點的線條

stroke() 繪制已定義的路徑

beginPath() 起始一條路徑，或重置當(dāng)前路徑

moveTo() 把路徑移動到畫布中的指定點，不創(chuàng)建線條

調(diào)用屬性

strokeStyle 設(shè)置或返回用于筆觸的顏色、漸變或模式

shadowBlur 設(shè)置或返回用于陰影的模糊級別

shadowColor 設(shè)置或返回用于陰影的顏色

lineWidth 設(shè)置或返回當(dāng)前的線條寬度

更多API請參考 canvas基本使用

功能需求說明

基礎(chǔ)線條繪制功能

筆觸顏色修改

筆刷粗細(xì)調(diào)整

撤回、前進、情況功能

生成圖片

初始化數(shù)據(jù)

colors: 筆觸顏色列表

brushs: 筆刷對應(yīng)的粗細(xì)

context: canvas context

imgUrl: 用于存放保存圖片的地址

canvasMoveUse: 是否允許執(zhí)行move時候繪制線條

preDrawAry: 存儲當(dāng)前表面狀態(tài)數(shù)組-上一步

nextDrawAry: 存儲當(dāng)前表面狀態(tài)數(shù)組-下一步

middleAry: 中間數(shù)組

lineWidth: 線條寬度

lineColor: 線條顏色

shadowBlur: 陰影

data() {
  return {
    colors: ["#fef4ac","#0018ba","#ffc200","#f32f15","#cccccc","#5ab639"],
    brushs: [{
            className: "small fa fa-paint-brush",
            lineWidth: 3
          },{
            className: "middle fa fa-paint-brush",
            lineWidth: 6
          },{
            className: "big fa fa-paint-brush",
            lineWidth: 12
          }],
    context: {},
    imgUrl: [],
    canvasMoveUse: true,
    preDrawAry: [],
    nextDrawAry: [],
    middleAry: [],
    config: {
      lineWidth: 1,
      lineColor: "#f2849e",
      shadowBlur: 2
    }
  }
}

設(shè)置繪畫配置

  setCanvasStyle() {
    this.context.lineWidth = this.config.lineWidth
    this.context.shadowBlur = this.config.shadowBlur
    this.context.shadowColor = this.config.lineColor
    this.context.strokeStyle = this.config.lineColor
  }

筆觸顏色及粗細(xì)相關(guān)設(shè)置（點擊修改config數(shù)據(jù)）：

畫筆的移動操作

// 當(dāng)在屏幕中移動時即開始繪制準(zhǔn)備
beginPath(e){
  const canvas = document.querySelector("#canvas")
  if (e.target !== canvas) {
    this.context.beginPath()
  }
}

// 在canvas中鼠標(biāo)按下
 canvasDown(e) {
  // 讓move方法可用
  this.canvasMoveUse = true
  // client是基于整個頁面的坐標(biāo)
  // offset是cavas距離頂部以及左邊的距離
  const canvasX = e.clientX - e.target.parentNode.offsetLeft
  const canvasY = e.clientY - e.target.parentNode.offsetTop
  // 設(shè)置canvas的配置
  this.setCanvasStyle()
  //清除子路徑
  this.context.beginPath()
  // 移動的起點
  this.context.moveTo(canvasX, canvasY)
  //當(dāng)前繪圖表面狀態(tài)
  const preData = this.context.getImageData(0, 0, 600, 400)
  //當(dāng)前繪圖表面進棧
  // 按下相當(dāng)于新的操作的開始，所以把當(dāng)前記錄數(shù)據(jù)放到prev中
  this.preDrawAry.push(preData)
},

// canvas中鼠標(biāo)移動
canvasMove(e) {
  if(this.canvasMoveUse) {
    // 只有允許移動時調(diào)用
    const t = e.target
    let canvasX
    let canvasY
    // 由于手機端和pc端獲取頁面坐標(biāo)方式不同，所以需要做出判斷
    if(this.isPc()){
      canvasX = e.clientX - t.parentNode.offsetLeft
      canvasY = e.clientY - t.parentNode.offsetTop
    }else {
      canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
      canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
    }
    // 連接到移動的位置并上色
    this.context.lineTo(canvasX, canvasY)
    this.context.stroke()
  }
},

// canvas中鼠標(biāo)放開
canvasUp(e){
  const preData = this.context.getImageData(0, 0, 600, 400)
  if (!this.nextDrawAry.length) {
    // 在沒有撤銷過的情況下，將當(dāng)前數(shù)據(jù)放入prev
    //當(dāng)前繪圖表面進棧
    this.middleAry.push(preData)
  } else {
    // 在撤銷的情況下，將在后面步驟的數(shù)據(jù)情況記錄
    this.middleAry = []
    this.middleAry = this.middleAry.concat(this.preDrawAry)
    this.middleAry.push(preData)
    this.nextDrawAry = []
  }
  // 設(shè)置move時不可繪制
  this.canvasMoveUse = false
}

為了保證移動端的可用性，加入touchstart等。

撤銷清空等操作

// 撤銷
if (this.preDrawAry.length) {
  const popData = this.preDrawAry.pop()
  const midData = this.middleAry[this.preDrawAry.length + 1]
  this.nextDrawAry.push(midData)
  this.context.putImageData(popData, 0, 0)
}

// 前進
if (this.nextDrawAry.length) {
  const popData = this.nextDrawAry.pop()
  const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2]
  this.preDrawAry.push(midData)
  this.context.putImageData(popData, 0, 0)
}

// 清空
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
// 清空前后數(shù)據(jù)
this.preDrawAry = []
this.nextDrawAry = []
// middleAry恢復(fù)到默認(rèn)數(shù)據(jù)
this.middleAry = [this.middleAry[0]]

demo地址

查看代碼