Javascript 如何在fabricjs中限制矩形在图像外部的大小调整/移动？

我正在使用fabricjs并试图限制图像外矩形的移动/大小调整

以下是我到目前为止所掌握的情况：

代码：

var canvas = new fabric.Canvas('c');

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg', canvas.renderAll.bind(canvas));

this.__canvases.push(canvas);  

canvas.observe("object:moving", function(e){
    var obj = e.target;
    //code goes here to restrict moving/resizing outside image
});

---

如何实现此功能？

请参阅更新的fiddle或在此处运行代码段。

基本上你不应该使用背景，因为你需要知道图像的尺寸。 从可读性的角度来看，使用普通图像（非事件图像、非可选图像）可以获得与backgroundImage对象相同的效果。然后放在画布的后面

加载图像时保存其边界坐标

在对象移动时，计算对象束框，并检查它是否不会接触图像框。 如果触摸它，用最新的已知良好值恢复图像的顶部和左侧值

var canvas=newfabric.canvas'canvas'； 变量minX，minY，maxX，maxY； canvas.addnew fabric.Circle{radius:30，fill:'f55'，top:100，left:100}； fabric.Image.fromURL'http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg，函数img{ img.evented=false； img.selective=false； canvas.addimg； minX=img.ocoods.tl.x； maxX=img.ocoods.br.x； minY=img.ocoods.tl.y； maxY=img.ocoods.br.y； canvas.sendToBackimg； }; 函数checkmove{ var obj=e.target； obj.setCoords； var b=obj.getBoundingRect； 如果！b.left>=minX&&maxX>=b.left+b.width{ obj.left=obj.lastLeft； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastLeft=obj.left； obj.lastScaleX=obj.scaleX } 如果！maxY>=b.top+b.height&&b.top>=minY{ obj.top=obj.lastTop； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastTop=obj.top； obj.lastScaleY=obj.scaleY } } 函数校验表{ var obj=e.target； obj.setCoords； var b=obj.getBoundingRect； 如果！b.left>=minX&&maxX>=b.left+b.width&&maxY>=b.top+b.height&&b.top>=minY{ obj.left=obj.lastLeft； obj.top=obj.lastTop； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastLeft=obj.left； obj.lastTop=obj.top； obj.lastScaleX=obj.scaleX obj.lastScaleY=obj.scaleY } } canvas.observeobject：移动，选中移动； 观察对象：缩放、检查缩放；

---

在这里查看更新的fiddle或运行代码段。

基本上你不应该使用背景，因为你需要知道图像的尺寸。 从可读性的角度来看，使用普通图像（非事件图像、非可选图像）可以获得与backgroundImage对象相同的效果。然后放在画布的后面

加载图像时保存其边界坐标

在对象移动时，计算对象束框，并检查它是否不会接触图像框。 如果触摸它，用最新的已知良好值恢复图像的顶部和左侧值

var canvas=newfabric.canvas'canvas'； 变量minX，minY，maxX，maxY； canvas.addnew fabric.Circle{radius:30，fill:'f55'，top:100，left:100}； fabric.Image.fromURL'http://www.beatnyama.com/wp-content/uploads/2015/05/assets.jpg，函数img{ img.evented=false； img.selective=false； canvas.addimg； minX=img.ocoods.tl.x； maxX=img.ocoods.br.x； minY=img.ocoods.tl.y； maxY=img.ocoods.br.y； canvas.sendToBackimg； }; 函数checkmove{ var obj=e.target； obj.setCoords； var b=obj.getBoundingRect； 如果！b.left>=minX&&maxX>=b.left+b.width{ obj.left=obj.lastLeft； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastLeft=obj.left； obj.lastScaleX=obj.scaleX } 如果！maxY>=b.top+b.height&&b.top>=minY{ obj.top=obj.lastTop； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastTop=obj.top； obj.lastScaleY=obj.scaleY } } 函数校验表{ var obj=e.target； obj.setCoords； var b=obj.getBoundingRect； 如果！b.left>=minX&&maxX>=b.left+b.width&&maxY>=b.top+b.height&&b.top>=minY{ obj.left=obj.lastLeft； obj.top=obj.lastTop； obj.scaleX=obj.lastScaleX obj.scaleY=obj.lastScaleY }否则{ obj.lastLeft=obj.left； obj.lastTop=obj.top； obj.lastScaleX=obj.scaleX obj.lastScaleY=obj.scaleY } } canvas.observeobject：移动，选中移动； 观察对象：缩放、检查缩放；

---

谢谢你的回答。移动现在受到限制，但调整大小仍不起作用。请看一看。我修改了它，但cmon付出了一点努力，这是一个非常简单的扩展，希望您快速响应。现在，如果我向左或向右拖动以调整大小，它可以完美地工作，而所有其他方向都在图像外部调整大小移动以及调整大小在Y轴上都不起作用。我已经修改了小提琴，使其作为逻辑的扩展工作，但现在当我朝y轴开始/结束方向调整形状时，大小会增加。你能看看吗？这是更新后的代码。是的，我做得太快了，我太乐观了。如果你想要更好的莫

---

vement和缩放效果您必须执行两个单独的函数，而不是像我那样执行一个。谢谢您的回答。移动现在受到限制，但调整大小仍不起作用。请看一看。我修改了它，但cmon付出了一点努力，这是一个非常简单的扩展，希望您快速响应。现在，如果我向左或向右拖动以调整大小，它可以完美地工作，而所有其他方向都在图像外部调整大小移动以及调整大小在Y轴上都不起作用。我已经修改了小提琴，使其作为逻辑的扩展工作，但现在当我朝y轴开始/结束方向调整形状时，大小会增加。你能看看吗？这是更新后的代码。是的，我做得太快了，我太乐观了。考虑如果你想要更好的移动和缩放效果，你必须做2个独立的功能，而不是像我一样。