Fatal编程技术网

Javascript HTML5画布：缩放

javascript canvas

Javascript HTML5画布：缩放,javascript,canvas,Javascript,Canvas,有没有简单的方法可以在画布（JavaScript）中放大和缩小？基本上，我有一个400x400px的画布，我希望能够用“鼠标向下”（2x）放大，然后用“鼠标向下”（mouseup）返回 过去两天一直在谷歌上搜索，但到目前为止运气不佳（IIRC画布是光栅样式的位图。它不可缩放，因为没有可缩放的存储信息 最好的办法是在内存中保留两个副本（缩放和非缩放），并在鼠标单击时交换它们。如果您有一个源图像或画布元素，并且您想要绘制400x400画布，则可以使用drawImage方法来实现缩放 例如，完整视图可

有没有简单的方法可以在画布（JavaScript）中放大和缩小？基本上，我有一个400x400px的画布，我希望能够用“鼠标向下”（2x）放大，然后用“鼠标向下”（mouseup）返回

过去两天一直在谷歌上搜索，但到目前为止运气不佳（

IIRC画布是光栅样式的位图。它不可缩放，因为没有可缩放的存储信息

最好的办法是在内存中保留两个副本（缩放和非缩放），并在鼠标单击时交换它们。

如果您有一个源图像或画布元素，并且您想要绘制400x400画布，则可以使用drawImage方法来实现缩放

例如，完整视图可能是这样的

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
ctx.drawImage(img, img.width / 4, img.height / 4, img.width / 2, img.height / 2, 0, 0, canvas.width, canvas.height);
放大的视图可能是这样的

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
ctx.drawImage(img, img.width / 4, img.height / 4, img.width / 2, img.height / 2, 0, 0, canvas.width, canvas.height);
drawImage的第一个参数是要绘制的图像元素或画布元素，接下来的4个参数是要从源中采样的x、y、宽度和高度，最后4个参数是要在画布中绘制的区域的x、y、宽度和高度。然后它将为您处理缩放

您只需要根据缩放级别选择源示例的宽度和高度，并根据鼠标单击位置减去计算的宽度和高度的一半选择x和y（但您需要确保矩形不超出边界）.

基于使用drawImage的建议，您还可以将其与缩放功能结合使用

因此，在绘制图像之前，请将上下文缩放到所需的缩放级别：

ctx.scale(2, 2) // Doubles size of anything draw to canvas.
我在这里创建了一个小示例，它使用drawImage和scale放大鼠标向下和缩小鼠标

<!DOCTYPE HTML>
<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }

            #wrapper {
                position: relative;
                border: 1px solid #9C9898;
                width: 578px;
                height: 200px;
            }

            #buttonWrapper {
                position: absolute;
                width: 30px;
                top: 2px;
                right: 2px;
            }

            input[type =
            "button"] {
                padding: 5px;
                width: 30px;
                margin: 0px 0px 2px 0px;
            }
        </style>
        <script>
            function draw(scale, translatePos){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

                context.save();
                context.translate(translatePos.x, translatePos.y);
                context.scale(scale, scale);
                context.beginPath(); // begin custom shape
                context.moveTo(-119, -20);
                context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
                context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
                context.bezierCurveTo(131, 50, 131, 20, 101, 0);
                context.bezierCurveTo(141, -60, 81, -70, 51, -50);
                context.bezierCurveTo(31, -95, -39, -80, -39, -50);
                context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
                context.closePath(); // complete custom shape
                var grd = context.createLinearGradient(-59, -100, 81, 100);
                grd.addColorStop(0, "#8ED6FF"); // light blue
                grd.addColorStop(1, "#004CB3"); // dark blue
                context.fillStyle = grd;
                context.fill();

                context.lineWidth = 5;
                context.strokeStyle = "#0000ff";
                context.stroke();
                context.restore();
            }

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");

                var translatePos = {
                    x: canvas.width / 2,
                    y: canvas.height / 2
                };

                var scale = 1.0;
                var scaleMultiplier = 0.8;
                var startDragOffset = {};
                var mouseDown = false;

                // add button event listeners
                document.getElementById("plus").addEventListener("click", function(){
                    scale /= scaleMultiplier;
                    draw(scale, translatePos);
                }, false);

                document.getElementById("minus").addEventListener("click", function(){
                    scale *= scaleMultiplier;
                    draw(scale, translatePos);
                }, false);

                // add event listeners to handle screen drag
                canvas.addEventListener("mousedown", function(evt){
                    mouseDown = true;
                    startDragOffset.x = evt.clientX - translatePos.x;
                    startDragOffset.y = evt.clientY - translatePos.y;
                });

                canvas.addEventListener("mouseup", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mouseover", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mouseout", function(evt){
                    mouseDown = false;
                });

                canvas.addEventListener("mousemove", function(evt){
                    if (mouseDown) {
                        translatePos.x = evt.clientX - startDragOffset.x;
                        translatePos.y = evt.clientY - startDragOffset.y;
                        draw(scale, translatePos);
                    }
                });

                draw(scale, translatePos);
            };



            jQuery(document).ready(function(){
               $("#wrapper").mouseover(function(e){
                  $('#status').html(e.pageX +', '+ e.pageY);
               }); 
            })  
        </script>
    </head>
    <body onmousedown="return false;">
        <div id="wrapper">
            <canvas id="myCanvas" width="578" height="200">
            </canvas>
            <div id="buttonWrapper">
                <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
            </div>
        </div>
        <h2 id="status">
        0, 0
        </h2>
    </body>
</html>


身体{
边际：0px；
填充：0px；
}
#包装纸{
位置：相对位置；
边框：1px实心#9C9898；
宽度：578px；
高度：200px；
}
#扣环{
位置：绝对位置；
宽度：30px；
顶部：2个；
右：2px；
}
输入[类型]=
“按钮”]{
填充物：5px；
宽度：30px；
保证金：0px 0px 2px 0px；
}
功能图（比例、平移）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（translatePos.x，translatePos.y）；
语境。尺度（尺度，尺度）；
context.beginPath（）；//开始自定义形状
上下文。移动到（-119，-20）；
贝塞尔曲线图（-159,0，-159,50，-59,50）；
贝塞尔曲线图（-39,80,31,80,51,50）；
贝塞尔曲线图（131,50,131,20,101,0）；
贝塞尔曲线图（141，-60,81，-70,51，-50）；
贝塞尔曲线图（31，-95，-39，-80，-39，-50）；
贝塞尔曲线图（-89，-95，-139，-80，-119，-20）；
context.closePath（）；//完成自定义形状
var grd=context.createLinearGradient（-59，-100,81,100）；
grd.addColorStop（0，#8ED6FF）；//浅蓝色
grd.addColorStop（1，“#004CB3”）；//深蓝色
context.fillStyle=grd；
context.fill（）；
context.lineWidth=5；
context.strokeStyle=“#0000ff”；
stroke（）；
restore（）；
}
window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
变量translatePos={
x:canvas.width/2，
y:canvas.height/2
};
var标度=1.0；
var scaleMultiplier=0.8；
var startDragOffset={}；
var mouseDown=false；
//添加按钮事件侦听器
document.getElementById（“plus”）.addEventListener（“单击”，函数）（）{
scale/=scaleMultiplier；
绘制（缩放、平移）；
}，假）；
document.getElementById（“减号”）.addEventListener（“单击”，函数（）{
scale*=scaleMultiplier；
绘制（缩放、平移）；
}，假）；
//添加事件侦听器以处理屏幕拖动
canvas.addEventListener（“鼠标向下”，函数（evt）{
mouseDown=true；
startDragOffset.x=evt.clientX-translatePos.x；
startDragOffset.y=evt.clientY-translatePos.y；
});
canvas.addEventListener（“鼠标”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“鼠标悬停”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“mouseout”，函数（evt）{
mouseDown=false；
});
canvas.addEventListener（“mousemove”，函数（evt）{
如果（鼠标向下）{
translatePos.x=evt.clientX-startDragOffset.x；
translatePos.y=evt.clientY-startDragOffset.y；
绘制（缩放、平移）；
}
});
绘制（缩放、平移）；
};
jQuery（文档）.ready（函数（）{
$（“#包装器”）.mouseover（函数（e）{
$（'#status'）.html（e.pageX+，'+e.pageY）；
}); 
})  
0, 0