本文简介
点赞 关注 收藏 = 学会了
本文主要讲解如何禁止元素超出画布范围。效果如下图所示。
就算是修改了元素尺寸也一样可以限制元素超出画布。
分析
要实现上图的效果，需要考虑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 事件，也就是移动元素后松开鼠标的时刻。
代码如下所示
代码语言：javascript复制<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>在理解了原理之后，事情就变得非常简单了。
代码仓库
⭐ 元素不超出画布
