Question

您好我在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>

Answer 1

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

如果您在鼠标移动时绘制多个路径，那么您的草图将显示为断开或断开连接，而您应该只扫描单个路径，直到＆＃34; mouseup＆＃34;事件。

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

    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();
    };

Answer 2

如果要在缩放中保持像素化效果，则需要在临时画布上绘制，然后才能将该临时画布复制到主屏幕。
您不再需要放大临时画布，只需按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();
}

HTML5画布缩放我的绘图

2 个答案: