本文介绍点赞+关注+收藏=学习本文主要讲解如何禁止元素超出画布。结果如下图。即使修改了元素的大小，也可以限制元素超出画布。分析要实现上图的效果，需要考虑两种情况：【案例一】元素的左上边不能超过画布的左上边。【案例二】元素的右下边不能超过画布的右下边。这两句话看起来和一句话差不多，但实际上情况有点不同。元素的坐标和画布的坐标都是以左上角为原点。所以【case1】只需要考虑元素的xy坐标是否超出了canvas的left和top。【案例二】元素右侧和底部对比画布，元素原点在元素左上角，所以元素右侧为元素原点的x坐标+元素的宽度，元素的底边是元素原点的y坐标+元素的高度。为了获得画布的边界，我在文档中找到了calcViewportBoundaries方法。获取被操作图形的边界，文档中还给出了getBoundingRect方法。最终公式：【公式1】超出画布左侧：图形左上角x坐标<画布左上角x坐标，设图形左侧为值画布左上角的x坐标。【公式2】超出画布顶部：图形左上角y坐标<画布左上角y坐标，设置图形顶部为上部y坐标值画布的左边。【公式3】超出画布右侧：图形左上x坐标+图形宽度>画布右下x坐标，将图形左侧设置为下x坐标画布右侧-图形宽度【公式4】超出画布底部：图形左上y坐标+图形高度>画布右下y坐标，设置图形顶部到画布右下y坐标-图形高度有动手编码公式，再想想触发公式的时机。我将这个时间设置在元素的mouseup事件上，即移动元素后释放鼠标的时间。代码如下
