最近在寫(xiě)一個(gè)類似截圖里的簡(jiǎn)易畫(huà)圖的小工具，畫(huà)線，畫(huà)矩形，畫(huà)圓，可以選擇顏色，就像這樣
寫(xiě)的過(guò)程中遇到了一些坑，還好爬出來(lái)了，也得到幾位大佬的指點(diǎn)，稍微接觸了一下zrender，在這里記錄一下。
坑1，繪制過(guò)程的預(yù)覽
用canvas畫(huà)線沒(méi)什么問(wèn)題，moveTo和lineTo就好了，來(lái)一段代碼湊字?jǐn)?shù)（:joy:）
鼠標(biāo)按下，開(kāi)始繪制，記錄初始鼠標(biāo)的位置
startPaint = (e)=>{
this.startPaintFlag = true;
this.paintstartX = e.clientX;
this.paintstartY = e.clientY;
}
鼠標(biāo)抬起，停止繪制
stopPaint = (e)=>{
this.startPaintFlag = false;
}
painting = (e)=>{
const {activeColor, activeShape} = this.state;
繪制過(guò)程中
if(this.startPaintFlag){
const ctx = this.canvas.getContext("2d");
ctx.strokeStyle = activeColor;
ctx.lineWidth = 2;
ctx.beginPath();
if(activeShape === 'pen'){
ctx.moveTo(this.paintstartX, this.paintstartY);
ctx.lineTo(e.clientX, e.clientY);
}
if(activeShape === 'circle'){
const r = Math.sqrt(Math.pow(e.clientX - this.paintstartX, 2) + Math.pow(e.clientY - this.paintstartY, 2));
ctx.arc(this.paintstartX, this.paintstartY, r, 0, 2*Math.PI)
}
if(activeShape === 'rect'){
ctx.rect(this.paintstartX, this.paintstartY, e.clientX - this.paintstartX, e.clientY - this.paintstartY);
}
ctx.stroke();
記錄此次移動(dòng)的最后位置，供下一次繪制使用
this.paintstartX = e.clientX;
this.paintstartY = e.clientY;
}
}
但是畫(huà)矩形和圓就出事了，因?yàn)榻貓D工具畫(huà)矩形和圓的時(shí)候，是有預(yù)覽效果的，就是我一邊畫(huà)，我一邊能看到我畫(huà)出的形狀是多大，如果按照畫(huà)線的思路來(lái)，會(huì)得到這樣的一串圖形
很好理解，因?yàn)閙ousemove的時(shí)候一直在改變位置和距離。那么如果我一開(kāi)始就記錄下位置，在畫(huà)矩形和圓的時(shí)候不改變初始位置呢，那么會(huì)得到以下圖形
也很好理解，因?yàn)闆](méi)有擦除，每次繪制的圖形都在畫(huà)布上。那擦除不就好了？不好，因?yàn)樵诋?huà)布上畫(huà)的不是只有一個(gè)圖形，如果我先畫(huà)線，再畫(huà)圓，那么一擦除，之前畫(huà)的線就沒(méi)了，令人糾結(jié)QAQ
我有過(guò)一個(gè)思路是，只擦除這個(gè)圖形內(nèi)部的形狀，比如上面這一堆同心圓，我只擦除最后繪制的那個(gè)圓內(nèi)部的內(nèi)容，可惜還是不行，一方面內(nèi)部可能有別的線事先繪制了，一方面圖形可以拖動(dòng)放大，也可以拖動(dòng)縮小，那么怎么辦呢？
在嘆了一口大氣，喝了一杯水，凝視了一下窗外之后，想出了一個(gè)辦法，我在畫(huà)布上再疊一個(gè)畫(huà)布不就好了，我在疊上去的這個(gè)畫(huà)布上就可以為所欲為了不是咩。
來(lái)個(gè)示意圖，黑色框框是我們展示用的畫(huà)布，黑色形狀表示已經(jīng)繪制上去的內(nèi)容，紅色框框是我們?cè)诋?huà)有預(yù)覽效果的圖形時(shí)所使用的臨時(shí)畫(huà)布，紅色形狀表示我們鼠標(biāo)拖動(dòng)過(guò)程中繪制的預(yù)覽內(nèi)容，每次需要繪制預(yù)覽內(nèi)容我們就生成一個(gè)臨時(shí)畫(huà)布，放在頂層，隨心所欲的繪制，繪制完畢（鼠標(biāo)抬起）將臨時(shí)畫(huà)布銷毀，在展示用的畫(huà)布（黑色框框）上繪制最終的圖形
來(lái)一段代碼幫助理解
startPaint = (e) => {
this.startPaintFlag = true;
this.paintstartX = e.clientX;
this.paintstartY = e.clientY;
畫(huà)矩形和圓形時(shí)臨時(shí)生成一個(gè)canvas
if (this.state.activeShape !== "pen") {
this.tempCanvas = document.createElement("canvas");
this.tempCanvas.width = this.canvas.width;
this.tempCanvas.height = this.canvas.height;
設(shè)置一些定位樣式
this.tempCanvas.style.cssText = "position: absolute; top: 0; left: 0; z-index: 0;";
append到需要的容器元素里
document.querySelector(".contain").appendChild(this.tempCanvas);
}
};
stopPaint = (e) => {
this.startPaintFlag = false;
const { activeShape, activeColor } = this.state;
if (activeShape !== "pen") {
從容器元素里刪除臨時(shí)畫(huà)布
document.querySelector(".contain").removeChild(this.tempCanvas);
this.tempCanvas = null;
將lastDrawData記錄的繪制數(shù)據(jù)，繪制到展示用的畫(huà)布上
const ctx = this.canvas.getContext("2d");
ctx.strokeStyle = activeColor;
ctx.lineWidth = 2;
ctx.beginPath();
if (activeShape === "circle") {
const { x, y, r } = this.lastDrawData;
ctx.arc(x, y, r, 0, 2 * Math.PI);
} else {
const { x, y, width, height } = this.lastDrawData;
ctx.rect(x, y, width, height);
}
ctx.stroke();
this.lastDrawData = null;
}
};
painting = (e) => {
const { activeColor, activeShape } = this.state;
if (this.startPaintFlag) {
const ctx = this.canvas.getContext("2d");
ctx.strokeStyle = activeColor;
ctx.lineWidth = 2;
畫(huà)線的邏輯不動(dòng)
if (activeShape === "pen") {
ctx.beginPath();
ctx.moveTo(this.paintstartX, this.paintstartY);
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
this.paintstartX = e.clientX;
this.paintstartY = e.clientY;
} else {
有預(yù)覽的圖形繪制在臨時(shí)畫(huà)布上
const tempCtx = this.tempCanvas.getContext("2d");
tempCtx.strokeStyle = activeColor;
tempCtx.lineWidth = 2;
每次繪制前清除畫(huà)布
tempCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
tempCtx.beginPath();
if (activeShape === "circle") {
const r = Math.sqrt(
Math.pow(e.clientX - this.paintstartX, 2) +
Math.pow(e.clientY - this.paintstartY, 2)
);
tempCtx.arc(this.paintstartX, this.paintstartY, r, 0, 2 * Math.PI);
繪制的數(shù)據(jù)記錄在一個(gè)變量里
this.lastDrawData = {
x: this.paintstartX,
y: this.paintstartY,
r,
};
} else {
tempCtx.rect(
this.paintstartX,
this.paintstartY,
e.clientX - this.paintstartX,
e.clientY - this.paintstartY
);
this.lastDrawData = {
x: this.paintstartX,
y: this.paintstartY,
width: e.clientX - this.paintstartX,
height: e.clientY - this.paintstartY,
};
}
tempCtx.stroke();
}
}
};
坑2，窗口大小變更
如果畫(huà)著畫(huà)著，突然用戶將窗口大小變了，你說(shuō)我是保持畫(huà)布大小不變呢，還是讓畫(huà)布大小隨著窗口改變而改變，如果窗口縮小，那么保持畫(huà)布大小不變是沒(méi)什么大問(wèn)題的，但是窗口如果變大，畫(huà)布區(qū)域又是自適應(yīng)的，那么就不得不跟隨改變了，但是canvas的寬高改變的話，內(nèi)容是會(huì)清除的，那么就面臨兩種選擇：
- 用變量將繪制的每一個(gè)坐標(biāo)記錄下來(lái)，寬高變更后重新繪制；
- 將畫(huà)布的內(nèi)容直接作為圖像（這個(gè)形容不準(zhǔn)確，理解意思就行）保存下來(lái)
第一種我沒(méi)試過(guò)，不過(guò)可想而知如果畫(huà)的內(nèi)容多了，應(yīng)該會(huì)閃爍一下，第二種，就我所知有兩種形式
第一種，用getImageData保存圖像，改變大小后，用putImageData繪制，putImageData只能裁剪圖像，不能拉伸
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
canvas.width = newWidth;
canvas.height = newHeight;
ctx.putImageData(imgData, 0, 0);
第二種，還是創(chuàng)建一個(gè)臨時(shí)畫(huà)布，將圖形繪制下來(lái)，改變大小后，用drawImage繪制，drawImage是可以拉伸圖像的
const newCanvas = document.createElement("canvas");
newCanvas.width = canvas.width;
newCanvas.height = canvas.height;
newCanvas.getContext("2d").drawImage(canvas, 0, 0);
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(newCanvas, 0, 0);
開(kāi)始我選的是drawImage，窗口如果不是等比縮放（一般不可能等比），圖像可以拉伸，但是拉伸一兩次圖形就變得很模糊，所以可能還不如不改變圖像的比例為好，具體還是看場(chǎng)景
到此這篇關(guān)于原生canvas制作畫(huà)圖小工具的踩坑和爬坑的文章就介紹到這了,更多相關(guān)canvas畫(huà)圖小工具內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
