Question

我有一个页面，可以让你在canvas元素中插入一个图像并且效果很好。

现在，我需要的是一种防止图像在画布内定位的方法，不管是否留在空白区域，无论图像的位置如何。

图像选择选项处于活动状态。使用拖放完成重新定位。我使用fabric js定位图像。

当图像被缩放时我需要类似this的东西，但我需要一个固定尺寸的画布，图像将比画布大

帆布

<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.

关于解决方案的一些解释：为了防止图像边框被拖动到画布内，您需要约束其顶部和左侧位置。画布的左上角位置以（0,0）开头，并从上到下，从左到右增加值。要约束图像的顶部，请检查其位置（obj.top）是否大于0，如果是，则只需将其更改回0.对左侧有效。对于右侧和底部，它会有所不同，因为您没有要检查的对象的左右属性。要解决此问题，您只需计算顶部和左侧值可以达到的最大负数，这可以通过从图像高度减去画布高度来获得顶部值，并从左侧图像宽度中获得画布宽度，如果值减少的次数超过您将其设置回您计算的值。例如：对于200x200画布和250x250图像，-50的顶部和左侧值将阻止图像被拖入内部。

适合并防止画布内的图像位置

1 个答案: