HTML5 画布缩放我的绘图

HTML5 canvas zoom my drawings

本文关键字：我的绘图缩放布缩放 HTML5 更新时间：2023-09-26

你好，我在HTML5画布上像绘画一样创建程序。我有问题，我需要创建一些工具绘图和缩放。我不知道如何毫不拖延地创建缩放。绘图示例：http://jsfiddle.net/x5rrvcr0/

如何缩放我的图纸？

绘图代码：

    <style>
        canvas {
            background-color: #CECECE;
        }
        html, body {
            background-color: #FFFFFF;
        }
    </style>

<script>
    $(document).ready(function () {
        var paintCanvas = document.getElementById("paintCanvas");
        var paintCtx = paintCanvas.getContext("2d");
        var size = 500;
        paintCanvas.width = size;
        paintCanvas.height = size;
        var draw = false;
        var prevMouseX = 0;
        var prevMouseY = 0;
        function getMousePos(canvas, evt) {
            evt = evt.originalEvent || window.event || evt;
            var rect = canvas.getBoundingClientRect();

            if (evt.clientX !== undefined && evt.clientY !== undefined) {
                return {
                    x: evt.clientX - rect.left,
                    y: evt.clientY - rect.top
                };   
            }
        } 


        $("#paintCanvas").on("mousedown", function(e) {
            draw = true;
            var coords = getMousePos(paintCanvas);
            prevMouseX = coords.x;
            prevMouseY = coords.y;
        });
        $("#paintCanvas").on("mousemove", function(e) {
            if(draw) {
                var coords = getMousePos(paintCanvas, e);
                paintCtx.beginPath();
                paintCtx.lineWidth = 10;
                paintCtx.strokeStyle = "#000000";
                paintCtx.moveTo(prevMouseX, prevMouseY);
                paintCtx.lineTo(coords.x, coords.y);
                paintCtx.stroke();
                prevMouseX = coords.x;
                prevMouseY = coords.y;
            }
        });
        $("#paintCanvas").on("mouseup", function(e) {
            draw = false;
        });

    });
</script>

<body>
    <canvas id="paintCanvas"></canvas>
</body>

如果要

在缩放中保留像素化效果，则需要在临时画布上绘制，然后仅在将该临时画布复制到主屏幕之后。
您不再需要放大临时画布，只需始终以 1：1 的比例绘制即可。复制到视图画布时，您可以应用所需的缩放（并可能翻译）。

请记住，绘图是抗锯齿的，因此在缩放时，例如，在黑色绘图时，您会看到一些灰色阴影。

我保留了@FurqanZafar的记录代码，因为如果您想执行撤消，最好记录内容：在这种情况下，只需删除最后一个记录条目并重新绘制所有内容。

http://jsfiddle.net/gamealchemist/x5rrvcr0/4/

function updatePaintCanvas() {
    paintContext.clearRect(0, 0, paintContext.canvas.width, paintContext.canvas.height);
    paintContext.save();
    paintContext.translate(cvSize * 0.5, cvSize * 0.5);
    paintContext.scale(scale, scale);
    paintContext.drawImage(drawCanvas, -cvSize * 0.5, -cvSize * 0.5);
    paintContext.restore();
}

这是

更新的小提琴：具有基本缩放功能的 http://jsfiddle.net/x5rrvcr0/2/

如果您在鼠标移动时绘制多条路径，那么您的草图将显示为断开或断开连接，相反，您应该只描边一条路径，直到"鼠标向上"事件。

然后，您可以将这些路径存储在数组中，然后以不同的缩放级别重绘它们：

    function zoom(context, paths, styles, scale) {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        context.save();
        applyStyles(context, styles);
        scaleFromCenter(context, scale);
        for (var i = 0; i < paths.length; i++) {
            context.beginPath();                
            context.moveTo(paths[i][0].x, paths[i][0].y);                
            for (var j = 1; j < paths[i].length; j++)
                context.lineTo(paths[i][j].x, paths[i][j].y);
            context.stroke();
        }
        context.restore();
    };