最近項(xiàng)目上要實(shí)現(xiàn)一個(gè)類似像素風(fēng)格的畫板，可以像素小格子可以擦除，框選變色，可以擦出各種圖形，這樣一個(gè)小項(xiàng)目看似簡單，包含的東西還真不少。
繪制像素格子
我們先定義像素格子類
Pixel = function (option) {
this.x = option.x;
this.y = option.y;
this.shape = option.shape;
this.size = option.size || 8;
}
x和y表示中心點(diǎn)坐標(biāo)，一開始我是這么做的，先定義路徑
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);
},
像素網(wǎng)格支持圓形和矩形，路徑定義好后，然后進(jìn)行繪制
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();
}
然后通過循環(huán)批量創(chuàng)建像素網(wǎng)格：
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);
}
}
這樣做看似完美，然而有一個(gè)巨大斃命，每畫一個(gè)像素都回繪制到上下文中，每一次都在改變canvas的狀態(tài)，這樣做會(huì)導(dǎo)致渲染性能太差，因?yàn)橄袼攸c(diǎn)很多，如果畫布比較大，性能很是令人堪憂，并且畫板上面還有一些操作，如此頻繁改變canvas的狀態(tài)是不合適的。
因此，正確的做法是：我們應(yīng)該定義好所有的路徑，最好在一次性的批量繪制到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');
可以看到這個(gè)渲染效率很快，盡可能少的改變canvas的狀態(tài)，因?yàn)槊扛淖円淮紊舷挛牡臓顟B(tài)，canvas都會(huì)重新繪制，這種狀態(tài)是全局的狀態(tài)。
像素網(wǎng)格交互
項(xiàng)目的需求是，在畫布上鼠標(biāo)按下移動(dòng)，可以擦除像素點(diǎn)，這里面包含兩個(gè)知識(shí)點(diǎn)，一個(gè)是如何獲取鼠標(biāo)移動(dòng)路徑上的像素網(wǎng)格，二是性能問題，因?yàn)槲覀冞@個(gè)需求的要求是繪制八萬個(gè)點(diǎn)，不說別的，光是循環(huán)都得幾十上百毫秒，何況還要繪制渲染。我們先來看第一個(gè)問題：
獲取鼠標(biāo)移動(dòng)路徑下的網(wǎng)格
看到這個(gè)問題，我們很容易想到，寫個(gè)函數(shù)，通過鼠標(biāo)的位置獲取下所在的位置包含那個(gè)網(wǎng)格，然后每次移動(dòng)都重新更新位置計(jì)算，這樣看是可以完成需求，但是如果鼠標(biāo)移動(dòng)過快，是無法做到，每個(gè)點(diǎn)的位置都可以計(jì)算到的，效果會(huì)不連貫。我們換種思路，鼠標(biāo)經(jīng)過的路徑，我們可以很明確的知道起始和終點(diǎn)，我們把整個(gè)繪制路徑想象成一段段的線段，那么問題就變成，線段與原相交的一個(gè)算法了，線段就是畫筆的粗細(xì)，線段經(jīng)過的路徑就是鼠標(biāo)運(yùn)動(dòng)的路徑，與之相交的圓就是需要變化樣式的網(wǎng)格。轉(zhuǎn)換成代碼就是如下：
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 計(jì)算線段與圓是否相交
* @param {x: num, y: num} p 圓心點(diǎn)
* @param {x: num, y: num} v 線段起始點(diǎn)
* @param {x: num, y: num} w 線段終點(diǎn)
*/
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));
}
具體邏輯就不詳述，各位看官可以自行看代碼。然后通過獲取到的相交網(wǎng)格的，然后刪除box里面的數(shù)據(jù)，重新render一遍，就可以看到效果了。
同樣的道理，我們可以做成染色效果，那么我們就可能實(shí)現(xiàn)一個(gè)canvas像素畫板的小demo了。不過做成染色效果就必須使用第一種繪制方法了，每個(gè)像素必須是一個(gè)對(duì)象，因?yàn)槊總€(gè)對(duì)象的狀態(tài)是獨(dú)立的，不過這個(gè)不用擔(dān)心性能，像素點(diǎn)不多，基本不會(huì)有卡頓感。實(shí)現(xiàn)效果大體如下：
最近又有點(diǎn)懶，先這樣了，后面有時(shí)間添加一個(gè)上傳圖片，圖片像素畫的功能和導(dǎo)出功能。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
