Fabric.js 禁止元素超出画布

---

theme: smartblue

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第7篇文章，点击查看活动详情

---

本文简介

点赞 + 关注 + 收藏 = 学会了

本文主要讲解如何禁止元素超出画布范围。效果如下图所示。

就算是修改了元素尺寸也一样可以限制元素超出画布。

分析

要实现上图的效果，需要考虑2中情况：

1. 【情况1】元素的左边和上边不能超出画布的左边和上边。
2. 【情况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 事件，也就是移动元素后松开鼠标的时刻。

代码如下所示

```html

```

在理解了原理之后，事情就变得非常简单了。

代码仓库

⭐ 元素不超出画布

推荐阅读

👍《Fabric.js 从入门到_ _ _ _ _ _》

👍《Fabric.js 控制元素层级》

👍《Fabric.js 上划线、中划线(删除线)、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 自由绘制椭圆》

点赞 + 关注 + 收藏 = 学会了