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/

请注意，如果不应用旋转（角度），则无法强制图像离开可见画布。现在，为图像添加一些旋转并移动它。如何让旋转的图像始终保持在视图中？感谢。

Answer 1

Fabric.js提供了两个对象属性isContainedWithinRect和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;
});

这里是指向小提琴的链接：https://jsfiddle.net/1ghvjxbk/和documentation，其中提到了这些属性。

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

1 个答案: