无法使用缩放按钮操作图像

Failed to manipulate image with zoom button

本文关键字：按钮 操作 图像 缩放      更新时间：2023-09-26
<!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");
             var imageObj = new Image();
              imageObj.onload = function() {
                context.drawImage(imageObj, 69, 50);
              };
              imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
            // 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>

上面的代码取自这个问题，只需复制所有代码即可正常工作。我的目标是保持一切保持不变，但使用图像而不是通过上下文绘制的云形状。我尝试了drawImage方法并成功绘制了图像，但我无法放大/缩小甚至无法再拖动。我可以知道context有什么问题吗？

好的，现在代码中发生的事情是您在调用还原调用后绘制图像，导致什么也没发生。

这是因为图像加载是异步的。

您需要做的是集成图像加载，使其在管道线中更早完成，然后使用集成在缩放中的图像，例如通过从draw函数中删除图像加载：

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
    /// now the image has loaded, now we can scale it
    draw();
};
imageObj.src = 'image-url';
function draw() {
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.translate(translatePos.x, translatePos.y);
    context.scale(scale, scale);
    /// draw image here
    context.drawImage(imageObj, 69, 50);
    context.restore();
}

然后，对于每次需要重新缩放图像时，只需调用draw()即可。

在线演示在这里

相关文章：