世界太小了
有一天我们的小矩形说，世界这么大，它想去看看，确实，屏幕就这么大，矩形肯定早就待腻了，作为万能的画布操控者，让我们来满足它的要求。
我们新增两个状态变量：scrollX、scrollY，记录画布水平和垂直方向的滚动偏移量，以垂直方向的偏移量来介绍，当鼠标滚动时，增加或减少scrollY，但是这个滚动值我们不直接应用到画布上，而是在绘制矩形的时候加上去，比如矩形用来的y是100，我们向上滚动了100px，那么实际矩形绘制的时候的y=100-100=0，这样就达到了矩形也跟着滚动的效果。
// 当前滚动值 let scrollY = 0; // 监听事件 const bindEvent = () => { // ... canvas.value.addEventListener("mousewheel", onMousewheel); }; // 鼠标移动事件 const onMousewheel = (e) => { if (e.wheelDelta < 0) { // 向下滚动 scrollY += 50; } else { // 向上滚动 scrollY -= 50; } // 重新渲染所有元素 renderAllElements(); };
然后我们再绘制矩形时加上这个滚动偏移量：
class Rectangle { render() { ctx.save(); let _x = this.x; let _y = this.y - scrollY; let canvasPos = screenToCanvas(_x, _y); // ... } }
是不是很简单，但是问题又来了，因为滚动后会发现我们又无法激活矩形了，而且绘制矩形也出问题了：
原因和矩形旋转一样，滚动只是最终绘制的时候加上了滚动值，但是矩形的x、y仍旧没有变化，因为绘制时是减去了scrollY，那么我们获取到的鼠标的clientY不妨加上scrollY，这样刚好抵消了，修改一下鼠标按下和鼠标移动的函数：
const onMousedown = (e) => { let _clientX = e.clientX; let _clientY = e.clientY + scrollY; mousedownX = _clientX; mousedownY = _clientY; // ... } const onMousemove = (e) => { if (!isMousedown) { return; } let _clientX = e.clientX; let _clientY = e.clientY + scrollY; if (currentType.value === "selection") { if (isAdjustmentElement) { let ox = _clientX - mousedownX; let oy = _clientY - mousedownY; if (hitActiveElementArea === "body") { // 进行移动操作 } else if (hitActiveElementArea === "rotate") { // ... let or = getTowPointRotate( center.x, center.y, mousedownX, mousedownY, _clientX, _clientY ); // ... } } } // ... // 更新矩形的大小 activeElement.width = _clientX - mousedownX; activeElement.height = _clientY - mousedownY; // ... }
反正把之前所有使用e.clientY的地方都修改成加上scrollY后的值。
距离产生美
有时候矩形太小了我们想近距离看看，有时候太大了我们又想离远一点，怎么办呢，很简单，加个放大缩小的功能！
新增一个变量scale：
// 当前缩放值 let scale = 1;
然后当我们绘制元素前缩放一下画布即可：
// 渲染所有元素 const renderAllElements = () => { clearCanvas(); ctx.save();// ++ // 整体缩放 ctx.scale(scale, scale);// ++ allElements.forEach((element) => { element.render(); }); ctx.restore();// ++ };
添加两个按钮，以及两个放大缩小的函数：
// 放大 const zoomIn = () => { scale += 0.1; renderAllElements(); }; // 缩小 const zoomOut = () => { scale -= 0.1; renderAllElements(); };
问题又又又来了朋友们，我们又无法激活矩形以及创造新矩形又出现偏移了：
还是老掉牙的原因，无论怎么滚动缩放旋转，矩形的x、y本质都是不变的，没办法，转换吧：
同样是修改鼠标的clientX、clientY，先把鼠标坐标转成画布坐标，然后缩小画布的缩放值，最后再转成屏幕坐标即可：
const onMousedown = (e) => { // 处理缩放 let canvasClient = screenToCanvas(e.clientX, e.clientY);// 屏幕坐标转成画布坐标 let _clientX = canvasClient.x / scale;// 缩小画布的缩放值 let _clientY = canvasClient.y / scale; let screenClient = canvasToScreen(_clientX, _clientY)// 画布坐标转回屏幕坐标 // 处理滚动 _clientX = screenClient.x; _clientY = screenClient.y + scrollY; mousedownX = _clientX; mousedownY = _clientY; // ... } // onMousemove方法也是同样处理
能不能整齐一点
如果我们想让两个矩形对齐，靠手来操作是很难的，解决方法一般有两个，一是增加吸附的功能，二是通过网格，吸附功能是需要一定计算量的，本来咱们就不富裕的性能就更加雪上加霜了，所以咱们选择使用网格。
先来增加个画网格的方法：
// 渲染网格 const renderGrid = () => { ctx.save(); ctx.strokeStyle = "#dfe0e1"; let width = canvas.value.width; let height = canvas.value.height; // 水平线，从上往下画 for (let i = -height / 2; i < height / 2; i += 20) { drawHorizontalLine(i); } // 垂直线，从左往右画 for (let i = -width / 2; i < width / 2; i += 20) { drawVerticalLine(i); } ctx.restore(); }; // 绘制网格水平线 const drawHorizontalLine = (i) => { let width = canvas.value.width; // 不要忘了绘制网格也需要减去滚动值 let _i = i - scrollY; ctx.beginPath(); ctx.moveTo(-width / 2, _i); ctx.lineTo(width / 2, _i); ctx.stroke(); }; // 绘制网格垂直线 const drawVerticalLine = (i) => { let height = canvas.value.height; ctx.beginPath(); ctx.moveTo(i, -height / 2); ctx.lineTo(i, height / 2); ctx.stroke(); };
代码看着很多，但是逻辑很简单，就是从上往下扫描和从左往右扫描，然后在绘制元素前先绘制一些网格：
const renderAllElements = () => { clearCanvas(); ctx.save(); ctx.scale(scale, scale); renderGrid();// ++ allElements.forEach((element) => { element.render(); }); ctx.restore(); };
进入页面就先调用一下这个方法即可显示网格：
onMounted(() => { initCanvas(); bindEvent(); renderAllElements();// ++ });
到这里我们虽然绘制了网格，但是实际上没啥用，它并不能限制我们，我们需要绘制网格的时候让矩形贴着网格的边，这样绘制多个矩形的时候就能轻松的实现对齐了。
这个怎么做呢，很简单，因为网格也相当于是从左上角开始绘制的，所以我们获取到鼠标的clientX、clientY后，对网格的大小进行取余，然后再减去这个余数，即可得到最近可以吸附到的网格坐标：
如上图所示，网格大小为20，鼠标坐标是(65,65)，x、y都取余计算65%20=5，然后均减去5得到吸附到的坐标(60,60)。
接下来修改onMousedown和onMousemove函数，需要注意的是这个吸附仅用于绘制图形，点击检测我们还是要使用未吸附的坐标：
const onMousedown = (e) => { // 处理缩放 // ... // 处理滚动 _clientX = screenClient.x; _clientY = screenClient.y + scrollY; // 吸附到网格 let gridClientX = _clientX - _clientX % 20; let gridClientY = _clientY - _clientY % 20; mousedownX = gridClientX;// 改用吸附到网格的坐标 mousedownY = gridClientY; // ... // 后面进行元素检测的坐标我们还是使用_clientX、_clientY，保存矩形当前状态的坐标需要换成使用gridClientX、gridClientY activeElement.save(gridClientX, gridClientY, hitArea); // ... } const onMousemove = (e) => { // 处理缩放 // ... // 处理滚动 _clientX = screenClient.x; _clientY = screenClient.y + scrollY; // 吸附到网格 let gridClientX = _clientX - _clientX % 20; let gridClientY = _clientY - _clientY % 20; // 后面所有的坐标都由_clientX、_clientY改成使用gridClientX、gridClientY }
当然，上述的代码还是有不足的，当我们滚动或缩小后，网格就没有铺满页面了：
解决起来也不难，比如上图，缩小以后，水平线没有延伸到两端，因为缩小后相当于宽度变小了，那我们只要绘制水平线时让宽度变大即可，那么可以除以缩放值：
const drawHorizontalLine = (i) => { let width = canvas.value.width; let _i = i + scrollY; ctx.beginPath(); ctx.moveTo(-width / scale / 2, _i);// ++ ctx.lineTo(width / scale / 2, _i);// ++ ctx.stroke(); };
垂直线也是一样。
而当发生滚动后，比如向下滚动，那么上方的水平线没了，那我们只要补画一下上方的水平线，水平线我们是从-height/2开始向下画到height/2，那么我们就从-height/2开始再向上补画：
const renderGrid = () => { // ... // 水平线 for (let i = -height / 2; i < height / 2; i += 20) { drawHorizontalLine(i); } // 向下滚时绘制上方超出部分的水平线 for ( let i = -height / 2 - 20; i > -height / 2 + scrollY; i -= 20 ) { drawHorizontalLine(i); } // ... }
限于篇幅就不再展开，各位可以阅读源码或自行完善。
照个相吧
如果我们想记录某一时刻矩形的美要怎么做呢，简单，导出成图片就可以了。
导出图片不能简单的直接把画布导出就行了，因为当我们滚动或放大后，矩形也许都在画布外了，或者只有一个小矩形，而我们把整个画布都导出了也属实没有必要，我们可以先计算出所有矩形的公共外包围框，然后另外创建一个这么大的画布，把所有元素在这个画布里也绘制一份，然后再导出这个画布即可。
计算所有元素的外包围框可以先计算出每一个矩形的四个角的坐标，注意是要旋转之后的，然后再循环所有元素进行比较，计算出minx、maxx、miny、maxy即可。
// 获取多个元素的最外层包围框信息 const getMultiElementRectInfo = (elementList = []) => { if (elementList.length <= 0) { return { minx: 0, maxx: 0, miny: 0, maxy: 0, }; } let minx = Infinity; let maxx = -Infinity; let miny = Infinity; let maxy = -Infinity; elementList.forEach((element) => { let pointList = getElementCorners(element); pointList.forEach(({ x, y }) => { if (x < minx) { minx = x; } if (x > maxx) { maxx = x; } if (y < miny) { miny = y; } if (y > maxy) { maxy = y; } }); }); return { minx, maxx, miny, maxy, }; } // 获取元素的四个角的坐标，应用了旋转之后的 const getElementCorners = (element) => { // 左上角 let topLeft = getElementRotatedCornerPoint(element, "topLeft") // 右上角 let topRight = getElementRotatedCornerPoint(element, "topRight"); // 左下角 let bottomLeft = getElementRotatedCornerPoint(element, "bottomLeft"); // 右下角 let bottomRight = getElementRotatedCornerPoint(element, "bottomRight"); return [topLeft, topRight, bottomLeft, bottomRight]; } // 获取元素旋转后的四个角坐标 const getElementRotatedCornerPoint = (element, dir) => { // 元素中心点 let center = getRectangleCenter(element); // 元素的某个角坐标 let dirPos = getElementCornerPoint(element, dir); // 旋转元素的角度 return getRotatedPoint( dirPos.x, dirPos.y, center.x, center.y, element.rotate ); }; // 获取元素的四个角坐标 const getElementCornerPoint = (element, dir) => { let { x, y, width, height } = element; switch (dir) { case "topLeft": return { x, y, }; case "topRight": return { x: x + width, y, }; case "bottomRight": return { x: x + width, y: y + height, }; case "bottomLeft": return { x, y: y + height, }; default: break; } };
代码很多，但是逻辑很简单，计算出了所有元素的外包围框信息，接下来就可以创建一个新画布以及把元素绘制上去：
// 导出为图片 const exportImg = () => { // 计算所有元素的外包围框信息 let { minx, maxx, miny, maxy } = getMultiElementRectInfo(allElements); let width = maxx - minx; let height = maxy - miny; // 替换之前的canvas canvas.value = document.createElement("canvas"); canvas.value.style.cssText = ` position: absolute; left: 0; top: 0; border: 1px solid red; background-color: #fff; `; canvas.value.width = width; canvas.value.height = height; document.body.appendChild(canvas.value); // 替换之前的绘图上下文 ctx = canvas.value.getContext("2d"); // 画布原点移动到画布中心 ctx.translate(canvas.value.width / 2, canvas.value.height / 2); // 将滚动值恢复成0，因为在新画布上并不涉及到滚动，所有元素距离有多远我们就会创建一个有多大的画布 scrollY = 0; // 渲染所有元素 allElements.forEach((element) => { // 这里为什么要减去minx、miny呢，因为比如最左上角矩形的坐标为(100,100)，所以min、miny计算出来就是100、100，而它在我们的新画布上绘制时应该刚好也是要绘制到左上角的，坐标应该为0,0才对，所以所有的元素坐标均需要减去minx、miny element.x -= minx; element.y -= miny; element.render(); }); };
当然，我们替换了用来的画布元素、绘图上下文等，实际上应该在导出后恢复成原来的，篇幅有限就不具体展开了。
白白
作为喜新厌旧的我们，现在是时候跟我们的小矩形说再见了。
删除可太简单了，直接把矩形从元素大家庭数组里把它去掉即可：
const deleteActiveElement = () => { if (!activeElement) { return; } let index = allElements.findIndex((element) => { return element === activeElement; }); allElements.splice(index, 1); renderAllElements(); };
小结
以上就是白板的核心逻辑，是不是很简单，如果有下一篇的话笔者会继续为大家介绍一下箭头的绘制、自由书写、文字的绘制，以及如何按比例缩放文字图片等这些需要固定长宽比例的图形、如何缩放自由书写折线这些由多个点构成的元素，敬请期待，白白~
