開發Canvas 繪畫應用（二）：實現繪畫

時間 2019-12-14

標籤開發 canvas 繪畫應用實現简体版

原文原文鏈接

開發Canvas 繪畫應用（一）：搭好框架中咱們已經把基本框架及基礎功能實現了，如今要實現本應用的重點：繪畫功能。html

首先分析一下，咱們要實現繪畫，須要具有的理論知識以下：html5

（1）獲取觸摸點的座標git

相似於獲取鼠標在屏幕上的位置，咱們如今須要獲取手指在繪圖板上的位置，這就須要用到觸摸事件的跟蹤觸摸的屬性：github

touches：表示當前跟蹤的觸摸操做的 Touch 對象的數組。
targetTouches：特定於事件目標的 Touch 對象的數組。
changedTouches：表示自上次觸摸以來發生了什麼改變的 Touch 對象的數組。

能夠將有幾個 Touch 對象當作有幾個手指，每一個手指的觸摸點對應一系列屬性。canvas

注意：與 changedTouches 不一樣，touches 和 targetTouches 在 touchend 觸發時均沒有 Touch 數組，length 爲0，即觸摸點數爲0。能夠在瀏覽器上打印輸出進行對比。segmentfault

其中，每一個 Touch 對象包含下列屬性：數組

clientX：觸摸目標在視口中的 x 座標。
clientY：觸摸目標在視口中的 y 座標。
identifier：標識觸摸的惟一 ID。
pageX：觸摸目標在頁面中的 x 座標。
pageY：觸摸目標在頁面中的 y 座標。
screenX：觸摸目標在屏幕中的 x 座標。
screenY：觸摸目標在屏幕中的 y 座標。
target：觸摸的 DOM 節點目標。

（2）Canvas 繪製路徑的方法瀏覽器

beginPath()：繪製路徑前必須調用，表示要開始繪製新路徑。
lineTo(x,y)：從上一點開始繪製一條直線。
moveTo(x,y)：從繪圖遊標開始移動到(x,y)，不畫線。
closePath()：建立路徑以後，繪製一條鏈接到起點的線條。
fill()：對路徑進行填充。
stroke()：對路徑進行描邊。
clip()：在路徑上建立一個剪切區域。

繪畫實現

OK，理論知識已經具有了，接下去就要開始搬磚了。app

① 初始化數據框架

initData() {
    this.lastX = 0;
    this.lastY = 0;
    this.isPaint = false;

    return this;
}

② 實現繪畫函數

/**
 * 繪畫函數
 * @param  {[type]} x 觸摸點x座標
 * @param  {[type]} y 觸摸點y座標
 * @return {[type]}   將當前座標賦給上一個點座標
 */
draw(x, y) {
    if (this.isPaint) {
        this.ctx.beginPath(); // 開始繪製路徑，必須調用
        this.ctx.moveTo(this.lastX, this.lastY); // 將繪圖遊標移動到到上一點
        this.ctx.lineTo(x, y); // 從上一點開始繪製一條到(x,y)的直線
        this.ctx.stroke(); // 描邊路徑
    }

    // 上面必須判斷 this.isPaint
    // 當 'touchstart' 時，先移動到觸摸點
    this.lastX = x;
    this.lastY = y;
}

③ 完善事件處理函數（★重點）

// 觸摸事件處理函數
touchF(e) {
    e.preventDefault(); // 阻止瀏覽器默認行爲
    const touches = e.changedTouches; // 獲取 Touch 對象list
    const point = touches[0]; // 獲取第一個 Touch 對象

    // 獲取元素寬、高及距窗口上下左右距離
    const rect = this.cva.getBoundingClientRect();
    // 至關於const rect = $('.painter').offset();
    // 至關於const rect = { left: this.cva.offsetLeft, top: this.cva.offsetTop }

    switch (e.type) {
        case 'touchstart':

            // 獲取觸摸點的x,y座標，傳入draw函數
            this.draw(point.clientX - rect.left, point.clientY - rect.top);
            this.isPaint = true;

            break;
        case 'touchmove':
            this.draw(point.clientX - rect.left, point.clientY - rect.top);

            break;
        case 'touchend':
            this.isPaint = false;

            break;
        default:
            this.isPaint = false;

            break;
    }
}

這裏須要獲取 canvas 在視口中距離左邊及頂部的距離，有3種方式：

(1) this.cva.getBoundingClientRect()：返回一個對象，包含元素的寬、高及距窗口上下左右距離；

console.log(this.cva.getBoundingClientRect());

(2) 採用 jQuery 方法 $('.painter').offset()：一樣返回一個對象，但只包含left值和top值；

console.log($('.painter').offset());

(3) 採用js原生方法獲取座標

console.log(this.cva.offsetWidth);  // 800
console.log(this.cva.offsetHeight); // 600
console.log(this.cva.offsetLeft);   // 90
console.log(this.cva.offsetTop);    // 137