javascript - 适合并防止 Canvas 内的图像位置

Question

我有一个页面，可让您在 Canvas 元素内插入图像并且工作完美。

现在，我需要的是一种防止图像在 Canvas 内定位的方法，无论图像的位置如何，都不允许留下空白。

图像选择选项处于事件状态。重新定位是通过拖放完成的。我正在使用 Fabric js 来定位图像。

Example

我需要类似 this 的东西当图像缩放时，但我需要有一个固定大小的 Canvas ，并且图像将大于 Canvas

Canvas

<canvas id="c" height="300" width="200"></canvas>

图片

<img id="image" src="images/test.jpg">

JS

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

        var imageSrc = "images/test.jpg";

        fabric.Image.fromURL(imageSrc, function(img) {
            img.scaleToWidth(c.getWidth());
            img.scaleToHeight(c.getHeight());
            img.set('selectable', true);
            img.set('hasControls', false);
            c.add(img);
        });

Answer 1

我能够修改您的第二个示例以按照您想要的方式运行。

这是修改后的script.js:

var canvas = window._canvas = new fabric.Canvas('canvas', {
    preserveObjectStacking: true
});

var imageObj = new Image(), path = 'http://i.imgur.com/tEeSJcr.jpg';

imageObj.src = path;

imageObj.onload = function () {
    var image = new fabric.Image(imageObj);

    canvas.setHeight(250);
    canvas.setWidth(250);
    image.set({
        id: 'img',
        left: 0,
        top: 0,
        selectable: true,
        hasBorders: false,
        hasControls: false,
        hasRotatingPoint: false
    });
    canvas.add(image);
};


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

    var boundingRect = obj.getBoundingRect();
    var zoom = canvas.getZoom();
    var viewportMatrix = canvas.viewportTransform;

    //there is a bug in fabric that causes bounding rects to not be transformed by viewport matrix
    //this code should compensate for the bug for now
    boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
    boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
    boundingRect.width /= zoom;
    boundingRect.height /= zoom;

    var canvasHeight = obj.canvas.height / zoom,
        canvasWidth = obj.canvas.width / zoom;

    if(boundingRect.top > 0){
        obj.top = 0;
    }

    if(boundingRect.left > 0){
        obj.left = 0;
    }

    if (boundingRect.top < canvasHeight - boundingRect.height){
        obj.top = canvasHeight - boundingRect.height;
    }

    if (boundingRect.left < canvasWidth - boundingRect.width){
        obj.left = canvasWidth - boundingRect.width;
    }

});

$('#zoomIn').click(function () {
    if (canvas.getZoom() < 3) {
        canvas.setZoom(canvas.getZoom() + 0.1);
    }
});

$('#zoomOut').click(function () {
    if (canvas.getZoom() !== 1) {
        canvas.setZoom(canvas.getZoom() - 0.1);
    }
});

这是working example.

有关解决方案的一些说明:为了防止图像边框被拖动到 Canvas 内，您需要限制其顶部和左侧位置。 Canvas 的左上角位置从 (0,0) 开始，从上到下、从左到右递增值。要约束图像的顶部，请检查其位置 (obj.top) 是否大于 0，如果是，则只需将其更改回 0。左侧同样有效。对于右侧和底部，情况略有不同，因为您没有要检查对象的左侧和右侧属性。要解决这个问题，您只需要计算顶部和左侧值可以达到的最大负数，这是通过从图像高度中减去 Canvas 高度来获得顶部值和从左侧图像宽度中获得 Canvas 宽度来完成的，如果值减少超过您只需将其设置回您计算的值。例如:对于 200x200 Canvas 和 250x250 图像，顶部和左侧值 -50 将阻止图像被拖入内部。