HTML 5 - 如何缩放画布背景图像 [英] HTML 5 - how to zoom canvas background image

问题描述

我是HTML 5的初学者，

I am a beginner in HTML 5,

我已经为画布缩放编写了一个代码，但我不想缩放实际的画布，但画布的背景图像就像 http://www.customink.com/lab

I have written a code for canvas zoom but I dont want to zoom actual canvas but the background image of canvas like in the http://www.customink.com/lab

以下是我写的代码：

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

canvas.setBackgroundImage('images/1front.png', function() {

    canvas.backgroundImageStretch = true;
    canvas.renderAll();
});

var canvasScale = 1;
var SCALE_FACTOR = 1.2;
function zoomIn() {
    // TODO limit the max canvas zoom in

    canvasScale = canvasScale * SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * SCALE_FACTOR;
        var tempScaleY = scaleY * SCALE_FACTOR;
        var tempLeft = left * SCALE_FACTOR;
        var tempTop = top * SCALE_FACTOR;

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();
}

// Zoom Out
function zoomOut() {
    // TODO limit max cavas zoom out

    canvasScale = canvasScale / SCALE_FACTOR;

    canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
    canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

    var objects = canvas.getObjects();
    for (var i in objects) {
        var scaleX = objects[i].scaleX;
        var scaleY = objects[i].scaleY;
        var left = objects[i].left;
        var top = objects[i].top;

        var tempScaleX = scaleX * (1 / SCALE_FACTOR);
        var tempScaleY = scaleY * (1 / SCALE_FACTOR);
        var tempLeft = left * (1 / SCALE_FACTOR);
        var tempTop = top * (1 / SCALE_FACTOR);

        objects[i].scaleX = tempScaleX;
        objects[i].scaleY = tempScaleY;
        objects[i].left = tempLeft;
        objects[i].top = tempTop;

        objects[i].setCoords();
    }

    canvas.renderAll();        
}

推荐答案

您可以使用 drawImage 如user2422324建议的那样，但在绘制图像时必须使用其他参数来缩放图像。

You can use drawImage as user2422324 suggests, but you must use additional arguments to scale the image while drawing it.

此外，您必须将背景图像缩放到临时画布，因为fabricjs在设置背景时需要imageURL

In addition, you must scale the background image to a temporary canvas because fabricjs expects an imageURL when setting it's background

以下是缩放的工作原理：

Here's how the scaling works:

首先，创建一个临时画布并将其大小设置为您想要的缩放大小。例如，要将背景图像缩放到200％，您可以这样做：

First, create a temporary canvas and set it's size to the zoom size you desire. For example to scale the background image to 200% you would do this:

tempCanvas.width=myBackgroundImage.width*2.0;
tempCanvas.height=myBackgroundImage.height*2.0;

现在使用drawImage将背景图像绘制到tempCanvas。通过提供最后4个参数，图像将缩放到所需的缩放（这是当前的tempCanvas大小）。

Now use drawImage to both draw the background image to the tempCanvas. By supplying the last 4 arguments, the image will be scaled to the desired zoom (which is the current tempCanvas size).

tempContext.drawImage(myBackgroundImage,

    // the source of the draw will be the full background image
    0,0, myBackgroundImage.width, myBackgroundImage.height,

    // and this causes the full image to be scaled to fit the resized tempCanvas
    0,0, tempCanvas.width, tempCanvas.height
);

然后使用fabricJS的setBackgroundImage应用缩放的背景。我们可以使用tempCanvas.toDataURL（）创建结构所需的imageURL：

Then use fabricJS's setBackgroundImage to apply the scaled background. We can create the imageURL that fabric expects by using tempCanvas.toDataURL():

canvas.setBackgroundImage( tempCanvas.toDataURL(), function(){
    canvas.backgroundImageStretch=true;
    canvas.renderAll();
});

请注意 backgroundImageStretch = true 可能导致图像按比例扭曲。相反，您可能想要设置backgroundImageStretch = false并设置backgroundImageLeft / backgroundImageTop来偏移背景图像。

Note that backgroundImageStretch=true may cause the image to proportionally distort. Instead, you might want to set backgroundImageStretch=false and set backgroundImageLeft/backgroundImageTop to offset the background image.

这是一个相当完整但完全未经测试的起始代码：

Here is a fairly complete, but totally untested starting code:

// this is the current scaling factor of the background image
// hint: originally set it at less than full size
//       so it doesn't pixelate when scaled up.
var scaleFactor=.50;

// create a background image object we can later scale
var fullBk=document.createElement("img");
fullBk.onload=function(){
    setBkZoom(scaleFactor);
}
fullBk.src="images/1front.png";

// create a temp canvas used to scale the bk image
var zoomCanvas=document.createElement("canvas");
var zoomCtx=zoomCanvas.getContext("2d");

// scale the bk image and set it as the fabric background
function setBkZoom(scaleFactor){
    // scale the temp zoomCanvas to desired bk size
    // note: changing canvas width automatically clears it
    zoomCanvas.width=fullBk.width*scaleFactor;
    zoomCanvas.height=fullBk.height*scaleFactor;
    // draw a scaled version of fullBk to zoomCanvas
    zoomCtx.drawImage(fullBk,
        0,0,fullBk.width,fullBk.height,
        0,0,zoomCanvas.width,zoomCanvas.height);
    // now use the scaled zoomCanvas to set the fabric background
    canvas.setBackgroundImage(zoomCanvas.toDataURL(),function(){
        // stretch=true may cause your image to distort proportions
        // instead you might want to set backgroundImageLeft/backgroundImageTop 
        // to offset the scaled image
        canvas.backgroundImageStretch=true;
        canvas.renderAll();
    }
}

这篇关于HTML 5 - 如何缩放画布背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！