Question

我是Fabric.js的新手。

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

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

Answer 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();
    } 
    });

更多示例：http://sett.ociweb.com/sett/settJun2014.html

Fabric.js画布边界检测

1 个答案: