Question

我正在开发一个webapp，它包含一个部分，我绘制一个函数的图形，坐标系由Canvas制作。问题是，我无法放大我的坐标系。我想让它能够放大和缩小+使用鼠标移动坐标系。放大/缩小时，x和y值也应增大/减小。

有人可以帮我吗？

我搜索了一些解决方案，但我找不到任何有用的东西。这就是我决定在这里问的原因。

以下是我的代码：

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>

<!--Canva startup-->
<script>
    // Setup values
    var height = 300;
    var width = 300;
    var zoomFactor = 15;

    // --------
    var c = document.getElementById("myCanvas");
    var xZero = width / 2;
    var yZero = height / 2;
    var ctx = c.getContext("2d");

    // Draw Cord-System-Grid
    ctx.beginPath();
    ctx.moveTo(xZero, 0);
    ctx.lineTo(xZero, height);
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    ctx.moveTo(0, yZero);
    ctx.lineTo(width, yZero);
    ctx.strokeStyle = "#000000";
    ctx.stroke();
    ctx.beginPath();

    // Draw Numbers
    ctx.font = "10px Georgia";
    var heightTextX = yZero + 10;
    for(var i = 0; i < width; i = i + width / 10) {
        var numberX = (-1 * xZero / zoomFactor) + i / zoomFactor;  
        ctx.fillText(numberX, i, heightTextX);
    }

    var heightTextY = yZero + 10;
    for(var n = 0; n < height; n = n + height / 10) {
        var numberY = (-1 * yZero / zoomFactor) + n / zoomFactor;
        if(numberY !== 0)
            ctx.fillText(numberY * -1, heightTextY, n);
    }

</script>

我在一周前问了这个问题，但无法得到答案。我希望有人可以帮助我

Answer 1

将onwheel事件附加到某个功能，然后使用ctx.scale()功能放大和缩小。

您可能希望执行类似

的操作

let canvas = document.getElementById('myCanvas');
ctx.translate(canvas.width/2, canvas.height/2);
ctx.scale(zoomFactor, zoomFactor);
ctx.translate(-canvas.width/2, -canvas.height/2);

确保从中心放大。

对于我手机上写的这些小错误，我们深表歉意。

如何使用鼠标向我的画布添加缩放功能

1 个答案: