Question

我正在尝试缩放已经绘制到canvas中的图像。我使用this answer 在canvas中绘制/旋转图像。这个样本对我来说很好，并且正确调整画布。我想使用缩放（ZoomIn / ZoomOut）一个图像工作正常但画布没有正确调整大小。我想在缩放后根据图像大小调整画布大小。以下是示例代码http://jsfiddle.net/6ZsCz/97/

var zoomDelta = 0.1;
var currentScale = 1;
var ctx = canvas.getContext("2d");
var imgWidth;
var imgHeight;
var size = {};
var rotation = 0;
 img = new Image();
 img.onload = function () {
     rotation = 0;
    imgWidth = img.width;
    imgHeight = img.height;
    size = {
        width: imgWidth,
        height: imgHeight
    };
    draw();
    newSize(imgWidth, imgHeight, rotation);
};

 $("#zoomOut").click(function () {
    currentScale -= zoomDelta;
    draw();
    newSize(imgWidth / currentScale, imgHeight / currentScale, rotation);
});

    function draw() {
    canvas.width = size.width;
    canvas.height = size.height;
    var cx = canvas.width / 2;
    var cy = canvas.height / 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(cx, cy);
    ctx.scale(currentScale, currentScale);
    ctx.rotate(rotation * deg2Rad);
    ctx.drawImage(img, (-imgWidth / 2) , (-imgHeight / 2) );
}
 function newSize(w, h, a) {
    var rads = a * Math.PI / 180;
    var c = Math.cos(rads);
    var s = Math.sin(rads);
    if (s < 0) {
        s = -s;
    }
    if (c < 0) {
        c = -c;
    }
    size.width = (h * s + w * c) ;
    size.height = (h * c + w * s);

}

Answer 1

您可以通过将画布大小乘以currentScale来调整大小然后缩放比例：

canvas.width = size.width*currentScale;
canvas.height = size.height*currentScale;

缩放图像后调整画布大小

1 个答案: