javascript - 使用 JavaScript 中的鼠标滚轮事件在 Canvas 上缩放 jpeg 图像

Question

我在java脚本中编写了简单的代码，它在 Canvas 上添加JPEG图像并使用简单的mousedown和mouseup事件在该图像上添加线条。现在我想在该图像上添加放大和缩小效果。有人可以帮我吗？

我的 js 文件如下所示。

var canvas;
var context;
var width;
var height;
var finalPos = {x: 0, y: 0};
var startPos = {x: 0, y: 0};


function main() {

    canvas = document.getElementById('imageCanvas');
    context = canvas.getContext('2d');
    loadImage();

    width = canvas.width;
    height = canvas.height;

    var canvasOffset = $('#imageCanvas').offset();
    function line(cnvs) {
        cnvs.beginPath();
        cnvs.moveTo(startPos.x, startPos.y);
        cnvs.lineTo(finalPos.x, finalPos.y);
        cnvs.stroke();
    }

    $('#imageCanvas').mousedown(function (e) {
        context.strokeStyle = 'blue';
        context.lineWidth = 5;
        context.lineCap = 'round';
        context.beginPath();
        startPos = {x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top};
    });

    $('#imageCanvas').mouseup(function (e) {
        // Replace with var that is second canvas
        finalPos = {x: e.pageX - canvasOffset.left, y: e.pageY - canvasOffset.top};
        line(context);
    });
}
;

function loadImage() {
    system_image = new Image();
    system_image.src = 'img/Google_OH_406TwentySecondStreet.jpg';

    system_image.onload = function () {
        context.drawImage(system_image, 0, 0, width, height);
    };
}

Answer 1

您可以使用鼠标滚轮的缩放功能

context.scale(scaleValue, scaleValue);

您必须在上下文中绘制图像之前执行此操作。

我在这里创建了示例:[链接]:http://jsfiddle.net/itsjawad/5wohz3r1/