保持图像的一部分始终在 canvas 上可见

Question

我想确保我的 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);
    }
});

我创建了一个示例：https://jsfiddle.net/krio/wg0aL8ef/24/

请注意，当没有应用旋转（角度）时，您无法强制图像离开可见区域 canvas。现在，为图像添加一些旋转并移动它。我怎样才能让旋转的图像也始终保持在视野范围内？谢谢

Answer 1

Fabric.js 提供了两个对象属性 isContainedWithinRect 和 intersectsWithRect 我们可以用来解决问题。

不应允许对象超出 canvas 边界。如果我们以某种方式设法确保对象位于 canvas 内，或者至少与 canvas 边界相交，则可以实现这一点。

对于这种情况，由于您希望图像的某些部分位于 canvas 内，我们将采用小于 canvas 的矩形而不是 canvas 边界作为包含图像的矩形。

使用提到的属性来确保在任何移动后满足上述两个条件。代码如下所示：

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

link 到 fiddle：https://jsfiddle.net/1ghvjxbk/ and documentation 中提到了这些属性。

保持图像的一部分始终在 canvas 上可见

Keeping a portion of an image always visible on the canvas

html

javascript

fabricjs