Javascript 使图像的一部分在画布上始终可见

我想确保

fabric.Image

的实例始终可见

它不需要100%可见，但它的一部分应该始终可见。我看到了一些其他类似的问题，我的解决方案就是基于这些问题，但我还没有找到任何能完全解决问题的方法

我当前的解决方案在没有对图像应用旋转（角度）时有效。如果角度为0，那么这个解决方案是完美的，但是一旦角度开始改变，我就有问题了

this.canvas.on('object:moving', function (e) {
    var obj = e.target;
    obj.setCoords();

    var boundingRect = obj.getBoundingRect();
    var max_pad_left_over_width = 50;//obj.currentWidth * .08;
    var max_pad_left_over_height = 50;//obj.currentHeight * .08;
    var max_top_pos = -(obj.currentHeight - max_pad_left_over_height);
    var max_bottom_pos = obj.canvas.height - max_pad_left_over_height;
    var max_left_pos = -(obj.currentWidth - max_pad_left_over_width);
    var max_right_pos = obj.canvas.width - max_pad_left_over_width;

    if(boundingRect.top < max_top_pos) {
        obj.setTop(max_top_pos);
    }

    if(boundingRect.left < max_left_pos){
        obj.setLeft(max_left_pos);
    }

    if(boundingRect.top > max_bottom_pos) {
        obj.setTop(max_bottom_pos);
    }

    if(boundingRect.left > max_right_pos) {
        obj.setLeft(max_right_pos);
    }
});

this.canvas.on（'object:moving'，function（e）{
var obj=e.target；
obj.setCoords（）；
var boundingRect=obj.getBoundingRect（）；
var max_pad_left_over_width=50；//obj.currentWidth*.08；
var max_pad_left_over_height=50；//obj.currentHeight*.08；
var max_top_pos=-（对象当前高度-最大焊盘左上方高度）；
var max_bottom_pos=obj.canvas.height-max_pad_left_over_height；
var max_left_pos=-（obj.currentWidth-max_pad_left_over_width）；
var max_right_pos=obj.canvas.width-max_pad_left_over_width；
if（边界矩形顶部<最大顶部位置）{
对象设置顶部（最大顶部位置）；
}
if（边界矩形左<最大左位置）{
对象设置左（最大左位置）；
}
如果（boundingRect.top>最大底部位置）{
对象设置顶部（最大底部位置）；
}
如果（boundingRect.left>max_right_pos）{
对象设置左（最大右位置）；
}
});

我创建了一个示例：

---

请注意，如果不应用旋转（角度），则无法强制图像离开可见画布。现在，向图像添加一些旋转并将其四处移动。如何使旋转后的图像始终保持在视图内？谢谢。

Fabric.js提供了两个对象属性

包含在rect

和

intersectsWithRect

中，我们可以使用它们来解决问题

不应允许对象超出画布边界。如果我们设法确保对象位于画布内部，或者至少与画布边界相交，就可以实现这一点

在这种情况下，由于您希望图像的某些部分位于画布内，因此我们将使用小于画布的矩形（而不是画布边界）作为图像的包含矩形

使用上述属性确保在任何移动后满足上述两个条件。下面是代码的样子：

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

var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
    top: 0,
    left: 0

});
imgInstance.setScaleX(0.6);
imgInstance.setScaleY(0.6);
canvas.add(imgInstance);

var prevLeft = 0,
    prevTop = 0;

var max_pad_left_over_width = imgInstance.currentWidth * .08;
var max_pad_left_over_height = imgInstance.currentHeight * .08;
var max_top_pos = max_pad_left_over_height;
var max_bottom_pos = imgInstance.canvas.height - max_pad_left_over_height;
var max_left_pos = max_pad_left_over_width;
var max_right_pos = imgInstance.canvas.width - max_pad_left_over_width;

var pointTL = new fabric.Point(max_left_pos, max_top_pos);
var pointBR = new fabric.Point(max_right_pos, max_bottom_pos);

canvas.on('object:moving', function(e) {
    var obj = e.target;
    obj.setCoords();

    if (!obj.intersectsWithRect(pointTL, pointBR) && !obj.isContainedWithinRect(pointTL, pointBR)) {
        obj.setTop(prevTop);
        obj.setLeft(prevLeft);
    }

    prevLeft = obj.left;
    prevTop = obj.top;
});

---

这是小提琴的链接：这些属性在哪里被提到。

你的问题并不清楚你想要什么。你能提供一些你的代码吗？我已经添加了一个问题描述的链接。谢谢