Fabric.js画布边界检测

我是Fabric.js的新手。Fabric.js画布边界检测

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

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

来源

2013-12-17 dams

是，可以使用“对象：移动”，“对象：缩放”等事件并相应地限制对象位置/尺寸。 – kangax

好的，所以我必须得到边界框（我在网站上看到了一个BB示例），并对其进行了一些检查。如果这个约束可以作为一个可编辑的属性应用于对象，这将是很好的... – dams

这是我的jsfiddle：http://jsfiddle.net/dams/4T4JT/2/如何验证/无效内部onChange功能？ – dams

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

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

来源

2015-02-06 12:49:21

Fabric.js画布边界检测

回答

相关问题