1. 程式人生 > >canvas畫素畫板

canvas畫素畫板

最近專案上要實現一個類似畫素風格的畫板,可以畫素小格子可以擦除,框選變色,可以擦出各種圖形,這樣一個小專案看似簡單,包含的東西還真不少。

繪製畫素格子

我們先定義畫素格子類

Pixel = function (option) {
    this.x = option.x;
    this.y = option.y;
    this.shape = option.shape;
    this.size = option.size || 8;
}
複製程式碼

x和y表示中心點座標,一開始我是這麼做的,先定義路徑

	createPath: function (ctx) {
			if
(this.shape === 'circle') { this.createCircle(ctx); } else if (this.shape === 'rect') { this.createRect(ctx); } else { this.createCircle(ctx); } }, createCircle: function (ctx) { var radius = this.size / 2; ctx.arc(this.x,this.y,radius,0,Math.PI*2); }, createRect: function
(ctx)
{ var points = this.getPoints(); points.forEach(function (point, i) { ctx[i == 0 ? 'moveTo' : 'lineTo'](point.x, point.y); }) ctx.lineTo(points[0].x, points[0].y); }, 複製程式碼

畫素網格支援圓形和矩形,路徑定義好後,然後進行繪製

draw: function (ctx) {
			ctx.save();
			ctx.lineWidth=this
.lineWidth; ctx.strokeStyle=this.strokeStyle; ctx.fillStyle=this.fillStyle; ctx.beginPath(); this.createPath(ctx); ctx.stroke(); if(this.isFill){ctx.fill();} ctx.restore(); } 複製程式碼

然後通過迴圈批量建立畫素網格:

for (var i = stepX + .5; i < canvas.width; i+=stepX) {
		for (var j = stepY + .5; j < canvas.height; j+=stepY) {
			var pixel = new Pixel({
				x: i,
				y: j,
				shape: 'circle'
			})
			box.push(pixel);
			pixel.draw(ctx);
		}
	}
複製程式碼

這樣做看似完美,然而有一個巨大斃命,每畫一個畫素都回繪製到上下文中,每一次都在改變canvas的狀態,這樣做會導致渲染效能太差,因為畫素點很多,如果畫布比較大,效能很是令人堪憂,並且畫板上面還有一些操作,如此頻繁改變canvas的狀態是不合適的。

因此,正確的做法是:我們應該定義好所有的路徑,最好在一次性的批量繪製到canvas中;

//定義畫素的位置
for (var i = stepX + .5; i < canvas.width; i+=stepX) {
		for (var j = stepY + .5; j < canvas.height; j+=stepY) {
			var pixel = new Pixel({
				x: i,
				y: j,
				shape: 'circle'
			})
			box.push(pixel);
		}
	}

//批量繪製
	console.time('time');
	ctx.beginPath();
	for (var c = 0; c < box.length; c++) {
		var circle = box[c];
		ctx.moveTo(circle.x + 3, circle.y);
		circle.createPath(ctx);
	}
	ctx.closePath();
	ctx.stroke();
	
	console.timeEnd('time');
複製程式碼

可以看到這個渲染效率很快,儘可能少的改變canvas的狀態,因為每改變一次上下文的狀態,canvas都會重新繪製,這種狀態是全域性的狀態。

畫素網格互動

專案的需求是,在畫布上滑鼠按下移動,可以擦除畫素點,這裡麵包含兩個知識點,一個是如何獲取滑鼠移動路徑上的畫素網格,二是效能問題,因為我們這個需求的要求是繪製八萬個點,不說別的,光是迴圈都得幾十上百毫秒,何況還要繪製渲染。我們先來看第一個問題:

獲取滑鼠移動路徑下的網格

看到這個問題,我們很容易想到,寫個函式,通過滑鼠的位置獲取下所在的位置包含那個網格,然後每次移動都重新更新位置計算,這樣看是可以完成需求,但是如果滑鼠移動過快,是無法做到,每個點的位置都可以計算到的,效果會不連貫。我們換種思路,滑鼠經過的路徑,我們可以很明確的知道起始和終點,我們把整個繪製路徑想象成一段段的線段,那麼問題就變成,線段與原相交的一個演算法了,線段就是畫筆的粗細,線段經過的路徑就是滑鼠運動的路徑,與之相交的圓就是需要變化樣式的網格。轉換成程式碼就是如下:

function sqr(x) { return x * x }

    function dist2(p1, p2) { return sqr(p1.x - p2.x) + sqr(p1.y - p2.y) }

    function distToSegmentSquared(p, v, w) {
        var l2 = dist2(v, w);
        if (l2 == 0) return dist2(p, v);
        var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
        if (t < 0) return dist2(p, v);
        if (t > 1) return dist2(p, w);
        return dist2(p, {
            x: v.x + t * (w.x - v.x),
            y: v.y + t * (w.y - v.y)
        });
    }

	/**
	 * @description 計算線段與圓是否相交
	 * @param {x: num, y: num} p 圓心點
	 * @param {x: num, y: num} v 線段起始點
	 * @param {x: num, y: num} w 線段終點
	 */
    function distToSegment(p, v, w) {
        var offset = pathHeight;
        var minX = Math.min(v.x, w.x) - offset;
        var maxX = Math.max(v.x, w.x) + offset;
        var minY = Math.min(v.y, w.y) - offset;
        var maxY = Math.max(v.y, w.y) + offset;

        if ((p.x < minX || p.x > maxX) && (p.y < minY || p.y > maxY)) {
            return Number.MAX_VALUE;
        }

        return Math.sqrt(distToSegmentSquared(p, v, w));
    }
複製程式碼

具體邏輯就不詳述,各位看官可以自行看程式碼。然後通過獲取到的相交網格的,然後刪除box裡面的資料,重新render一遍,就可以看到效果了。

同樣的道理,我們可以做成染色效果,那麼我們就可能實現一個canvas畫素畫板的小demo了。不過做成染色效果就必須使用第一種繪製方法了,每個畫素必須是一個物件,因為每個物件的狀態是獨立的,不過這個不用擔心效能,畫素點不多,基本不會有卡頓感。實現效果大體如下:

最近又有點懶,先這樣了,後面有時間新增一個上傳圖片,圖片畫素畫的功能和匯出功能。