Fatal编程技术网
  • javascript/
  • Javascript HTML5画布缩放我的图形

Javascript HTML5画布缩放我的图形

javascript html canvas

Javascript HTML5画布缩放我的图形,javascript,html,canvas,Javascript,Html,Canvas,您好，我创建的程序就像HTML5画布上的绘画一样。我有问题，我需要创建一些工具绘图和缩放。我不知道如何毫不拖延地创建缩放。绘图示例： 如何缩放图形 图纸代码： <style> canvas { background-color: #CECECE; } html, body { background-color: #FFFFFF; } </style&

您好，我创建的程序就像HTML5画布上的绘画一样。我有问题，我需要创建一些工具绘图和缩放。我不知道如何毫不拖延地创建缩放。绘图示例：

如何缩放图形

图纸代码：

    <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>


帆布{
背景色：#CECECE；
}
html，正文{
背景色：#FFFFFF；
}
$（文档）.ready（函数（）{
var paintCanvas=document.getElementById（“paintCanvas”）；
var paintCtx=paintCanvas.getContext（“2d”）；
变量大小=500；
paintCanvas.width=大小；
paintCanvas.height=大小；
var-draw=false；
var-prevMouseX=0；
var-prevMouseY=0；
函数getMousePos（画布，evt）{
evt=evt.originalEvent | | window.event | | evt；
var rect=canvas.getBoundingClientRect（）；
if（evt.clientX！==未定义和&evt.clientY！==未定义）{
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};   
}
} 
$（#paintCanvas”）。在（“mousedown”，函数（e）上{
绘制=真；
var coords=getMousePos（paintCanvas）；
prevMouseX=coords.x；
prevMouseY=coords.y；
});
$（#paintCanvas”）。在（“mousemove”上，函数（e）{
如果（抽签）{
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”）。在（“mouseup”上，函数（e）{
绘制=假；
});
});
这是最新的小提琴：具有基本的缩放功能

如果在鼠标移动时绘制多条路径，则草图将显示为断开或断开连接，相反，在发生“mouseup”事件之前，您应该只绘制一条路径

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

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

函数缩放（上下文、路径、样式、比例）{
clearRect（0,0，context.canvas.width，context.canvas.height）；
context.save（）；
应用程序样式（上下文、样式）；
scaleFromCenter（上下文、比例）；
对于（var i=0；i
这是最新的小提琴：具有基本的缩放功能

如果在鼠标移动时绘制多条路径，则草图将显示为断开或断开连接，相反，在发生“mouseup”事件之前，您应该只绘制一条路径

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

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

函数缩放（上下文、路径、样式、比例）{
clearRect（0,0，context.canvas.width，context.canvas.height）；
context.save（）；
应用程序样式（上下文、样式）；
scaleFromCenter（上下文、比例）；
对于（var i=0；i
如果要在缩放中保持像素效果，需要在临时画布上绘制，然后将临时画布复制到主屏幕上。
您不再需要放大临时画布，只需始终以1:1的比例绘制即可。复制到视图画布时，可以应用所需的缩放（可能还有平移）

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

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

如果要在缩放中保持像素效果，需要在临时画布上绘制，然后将临时画布复制到主屏幕。
您不再需要放大临时画布，只需始终以1:1的比例绘制即可。复制到视图画布时，可以应用所需的缩放（可能还有平移）

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

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

您遇到问题的缩放代码在哪里？请把它也贴出来，这样我们就可以看一看。我没有缩放代码，我需要知道如何制作：/你有问题的缩放代码在哪里？请把它也贴出来，这样我们就可以看一看。我没有缩放代码，我需要知道如何做：/redrawing不是很好的解决方法，因为如果paint有独特的画笔，比如鼠标速度变量、preassure等，这种方法就无法重绘correctly@Yourchoice：重画是一种方法，它将准确地重新绘制记录的内容。当然，它不能处理压力，但鼠标也不能，很好：-）这种方法就像svg一样，如果你缩放，你在这种方法上看不到像素。。我需要真实的缩放，如果缩放，我可以看到像素@GameA