本文简介
点赞 + 关注 + 珍藏 = 学会了
本文次要解说如何禁止元素超出画布范畴。成果如下图所示。
就算是批改了元素尺寸也一样能够限度元素超出画布。
剖析
要实现上图的成果，须要思考2中状况：
- 【状况1】元素的右边和上边不能超出画布的右边和上边。
- 【状况2】元素的左边和下边不能超出画布的左边和下边。
这两句话看上去很像一句话，但其实真实情况是有点不一样的。
元素的坐标和画布的坐标，都是以左上角为原点。所以【状况1】只需思考元素的 xy坐标 有没有超过画布的右边和上边。
【状况2】是用元素左边和下边跟画布做比拟，而元素的原点是在元素的左上角，所以元素的左边是 元素原点x坐标 + 元素的宽度 ，元素的下边是 元素原点y坐标 + 元素的高度 。
要获取画布的边界，我在文档中找到 calcViewportBoundaries 办法。
要获取被操作图形的边界，文档也给出了 getBoundingRect 办法。
最初得出的公式：
- 【公式1】超出画布右边：图形左上方x坐标 < 画布左上方x坐标，将图形的
left设置成画布左上方x坐标的值。 - 【公式2】超出画布上边：图形左上方y坐标 < 画布左上方y坐标，将图形的
top设置成画布左上方y坐标的值。 - 【公式3】超出画布左边：图形左上方x坐标 + 图形宽度 > 画布右下方x坐标，将图形的
left设置成画布右下方x坐标 - 图形宽度 - 【公式4】超出画布下边：图形左上方y坐标 + 图形高度 > 画布右下方y坐标，将图形的
top设置成画布右下方y坐标 - 图形高度
入手编码
公式有了，接下来就思考一下触发公式的机会。
我将这机会设置在元素的 mouseup 事件，也就是挪动元素后松开鼠标的时刻。
代码如下所示
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><script> // 初始化画布 let canvas = new fabric.Canvas('canvasBox') // 矩形 let rect = new fabric.Rect({ width: 40, height: 40, left: 10, top: 10, fill: 'pink' }) // 将矩形增加到画布中 canvas.add(rect) // 作用在矩形的事件：松开鼠标 rect.on('mouseup', ev => { // 获取画布视口边界 let canvasBoundaries = canvas.calcViewportBoundaries() // 矩形自身 let obj = ev.target // 矩形的边界 let objBoundingRect = obj.getBoundingRect() // 【公式1】 if (objBoundingRect.left < canvasBoundaries.tl.x) { ev.target.left = canvasBoundaries.tl.x } // 【公式2】 if (objBoundingRect.left + objBoundingRect.width > canvasBoundaries.br.x) { ev.target.left = canvasBoundaries.br.x - objBoundingRect.width } // 【公式3】 if (objBoundingRect.top < canvasBoundaries.tl.y) { ev.target.top = canvasBoundaries.tl.y } // 【公式4】 if (objBoundingRect.top + objBoundingRect.height > canvasBoundaries.br.y) { ev.target.top = canvasBoundaries.br.y - objBoundingRect.height } // 刷新画布 canvas.renderAll() })</script>在了解了原理之后，事件就变得非常简单了。
代码仓库
⭐ 元素不超出画布
举荐浏览
《Fabric.js 从入门到_ _ _ _》
《Fabric.js 管制元素层级》
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 自在绘制椭圆》
点赞 + 关注 + 珍藏 = 学会了
代码仓库