Fabric.js 画布边界检测答案

【问题标题】：Fabric.js canvas boundary detectionFabric.js 画布边界检测
【发布时间】：2014-01-05 18:24:23
【问题描述】：

我是 Fabric.js 的新手。

我想在画布内显示一个可移动/可调整大小的矩形，但要限制用户操作，使其不能在画布外移动/放大。

有没有设置这些约束的简单方法？我需要手动检测画布边界吗？

【问题讨论】：

是的，您可以使用“object:moving”、“object:scaling”等事件并相应地约束对象位置/尺寸。
好的，所以我必须得到边界框（我在网站上看到过一个 BB 示例），并对其进行一些检查。如果可以将此约束作为可编辑属性应用于对象，那就太好了...
这是我的 jsfiddle：jsfiddle.net/dams/4T4JT/2 如何在 onChange 函数中验证/无效移动？

标签： fabricjs

【解决方案1】：

对象缩放或拖动后，它会找到位置。如果位置超出边界，它会将对象恢复到之前的状态。

canvas.on('object:modified', function (e) {
   var obj = e.target;
    var rect = obj.getBoundingRect();

    if (rect.left < 0
        || rect.top < 0
        || rect.left + rect.width > canvas.getWidth()
        || rect.top + rect.height > canvas.getHeight()) {
        if (obj.getAngle() != obj.originalState.angle) {
            obj.setAngle(obj.originalState.angle);
        }
        else {
            obj.setTop(obj.originalState.top);
            obj.setLeft(obj.originalState.left);
            obj.setScaleX(obj.originalState.scaleX);
            obj.setScaleY(obj.originalState.scaleY);
        }
        obj.setCoords();
    } 
    });

【讨论】：