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

Keeping a portion of an image always visible on the canvas

本文关键字：图像 一部分      更新时间：2024-06-02

我想确保我的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/

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

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/以及提及这些属性的文档。

相关文章：