開發Canvas 繪畫應用（三）：實現對照繪畫

需求分析

在個人畢設中，提出了視圖引導的概念，由兩部分功能組成：

（1）能夠對照着圖片進行繪畫，即將圖片以半透明的方式呈如今繪圖板上，而後用戶能夠對照着進行繪畫；

（2）能夠直接將簡筆畫圖片直接拖拽到畫布上進行檢索。

那麼，在這裏，咱們先實現第一種功能——圖片對照繪畫。最終想要的實現效果是：當點擊圖片時，圖片邊框會呈現藍色，表示選中狀態，同時會在畫布上以半透明方式呈現該圖片，再點擊圖片，邊框和底板圖片都消失，便可以切換顯示狀態。

a. 點擊前：

b. 點擊後：

c. 取消點擊：

實現思路

咱們來分析一下，這種半透明底板方式是如何實現的？

1）首先，須要利用分層來實現圖片參照效果：即設置兩個 Canvas，上層的 Canvas 仍舊用來繪畫，而下層的 Canvas 則做爲底板顯示圖片，這裏須要用到 canvas 的繪製圖像 API——drawImage()。

context.drawImage(iamge, srcX, srcY, srcWidth, srcHeight, desX, desY, desWidth, desHeight)

2）其次，爲了出現半透明的效果，須要設置上層 canvas 的透明度，這裏須要用到 canvas 的圖片合成，即經過設置 globalAlpha 屬性指定全部繪製的透明度。

兩個應用到2D上下文中全部繪製操做的屬性：

• globalAlpha：屬於[0, 1]，用於指定全部繪製的透明度。
• globalCompositionOperation：表示後繪製的圖形怎樣與先繪製的圖形結合，其屬性值是字符串。

代碼實現

該階段咱們須要添加2個模塊：一個是視圖模塊（viewer.js），用於放置咱們的參照圖片（蜜蜂線畫圖圖片）；另外一個是底板模塊（basePlate.js），用於顯示底板。

另外，此處增長的兩個 Canvas 其實前期的畫板設置是相同的，所以咱們將設置單獨拎到一個 cvaConfig.js 文件中，以便代碼重用，而後 painter.js 和 basePlate.js 只要繼承 cvaConfig.js 就好了。

☞ index.html

<img src="asset/img/bee.png" class="view">

<canvas class="painter" id="js-painter"></canvas>
<canvas class="baseplate" id="js-baseplate"></canvas>

☞ cvaConfig.js

export default class CvaConfig {
    constructor() {
        this.config = {
            cvaW: 600,
            cvaH: 500,
            cvaBg: '#fff',
            lineWidth: 2,
            lineJoin: 'round',
            strokeStyle: 'red'
        };
    }

    // 畫板寬高設置
    // 注意此處不能在 css 中設置，像素會失真，會致使不能獲取正確的座標
    setCvaWH() {
        this.cva.setAttribute('width', this.config.cvaW);
        this.cva.setAttribute('height', this.config.cvaH);

        return this;
    }

    // 畫板背景設置
    setCvaBg() {
        this.ctx.fillStyle = this.config.cvaBg;
        this.ctx.fillRect(0, 0, this.config.cvaW, this.config.cvaH);

        return this;
    }

    // 畫筆設置
    setPen() {
        this.ctx.lineWidth = this.config.lineWidth;
        this.ctx.lineJoin = this.config.lineJoin;
        this.ctx.strokeStyle = this.config.strokeStyle;

        return this;
    }
}

☞ viewer.js

export default class Viewer {
constructor(options) {
    this.options = options;
    this.init();
}

initSelectors() {
    this.view = $('.view');

    return this;
}

initEvents() {
    this.view.on('touchstart', $.proxy(this.touchF, this));
    this.view.on('touchmove', $.proxy(this.touchF, this));
    this.view.on('touchend', $.proxy(this.touchF, this));
}

touchF(e) {
    e.preventDefault(); // 阻止瀏覽器默認行爲

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

            break;
        case 'touchmove':

            break;
        case 'touchend':
            this.setStyle($(e.target)); // 切換視圖顯示狀態
            this.setBasePlate(e.target); // 切換底板顯示狀態

            break;
    }
}

/**
 * 切換視圖顯示狀態，表示是否點擊
 * @param {[type]} $el 點擊的jQuery目標對象
 */
setStyle($el) {
    $el.toggleClass('blue-border');
}

/**
 * 經過點擊圖視圖調用basePlate的接口切換底板顯示狀態
 * @param {[type]} el 點擊的原生js目標對象
 */
setBasePlate(el) {

    // 視圖選中時傳入圖片
    if ($(el).hasClass('blue-border')) {
        this.options.setBasePlate(el);
    } else { // 未選中不傳圖片
        this.options.setBasePlate();
    }
}

init() {
    this.initSelectors().initEvents();
}

}

☞ basePlate.js

basePlate 中功能性的只有一個用來設置底板的函數，經過在點擊 viewer 時進行調用：

import CvaConfig from './cvaConfig.js';

export default class basePlate extends CvaConfig {
    constructor() {
        super();
        this.init();
    }

    initSelectors() {
        this.cva = document.getElementById('js-baseplate');
        this.ctx = this.cva.getContext('2d');

        return this;
    }

    // 設置底板
    setBasePlate(image) {
        if (image) { // 若是有圖片，在底板上顯示圖片
            this.ctx.drawImage(image, 0, 0, this.config.cvaW, this.config.cvaH);
        } else { // 設置空底板
            this.setCvaBg();
        }
    }

    init() {
        this.initSelectors();
        this.setCvaWH().setCvaBg();
    }
}

☞ painter.js

painter 中設置其透明度：

// 設置畫布背景及透明度
_setBg() {
    this.ctx.globalAlpha = 0.7;
    this.setCvaBg();

    return this;
}

OK，參照繪畫功能就實現啦，接下去要實現視圖引導的第二個功能：經過直接拖拽圖片進行檢索。固然，咱們這裏不涉及跟服務端進行交涉，所以只實現前端的拖拽圖片功能，這部分會用到一些座標判斷，正好趁此機會好好整理一下。利用拖拽能夠實現不少效果，仍是挺好玩噠~~加油加油~q(≧▽≦q)

敬請關注下一篇：開發Canvas 繪畫應用（四）：實現拖拽繪畫

✈ Github：paintApp

✎ 參考：

利用分層優化 HTML5 畫布渲染