jquery - 翻转画布不反转

Question

我正在使用以下代码翻转画布，它可以完美运行，但是如果我再次调用它，它不会将画布翻转回来

$(document).on("click", "#verticalFlip", function() { // save

        var canvasH = document.getElementById("myCanvas");
        var ctxH = canvasH.getContext("2d");
        var img = new Image();
        img.onload = function () {
            // flip vertical
            canvasH.width = img.width;
            canvasH.height = img.height;
            ctxH.save();
            ctxH.scale(1, -1);
            ctxH.translate(0, -img.height);
            ctxH.drawImage(img, 0, 0);
            ctxH.restore();
        }
        img.src = "http://myurl.com/" + user_id + "_temp.jpg";
    });

如何将画布恢复到原始状态？

Answer 1

每次，您都在加载原始（未翻转的）图像，然后将其翻转到画布上。

实现您想要的最简单的方法是使用一个表示画布状态（翻转/未翻转）的变量，然后“正常”或“翻转”绘制图像，例如

var isFlipped = <true/false>;
function() flipAndDraw(...) {
    ...
    if (isFlipped) { /* Draw normaly */ }
    else { /* Draw flipped */ }
    isFlipped = !isFlipped;
    ...

另请参阅这个简短的演示。

Answer 2

#verticalFlip每次单击元素时，您都在重复完全相同的一系列操作：

1. 选择画布元素
2. 获取对其上下文的引用
3. 创建新图像并将事件侦听器添加到其加载事件
4. 通过设置源来加载图像
5. 加载图像时在画布上绘制图像的“翻转”版本

由于每次单击文档时都在加载然后翻转图像，因此永远不会有任何跟踪的“状态”来确定方向。您的方法存在一些问题，请允许我提供重构的解决方案：

// jQuery document ready function
$(function() {

    // Cache jQuery selections
    var $verticalFlip = $("#verticalFlip");

    // Cache canvas element and context
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // Cache the image object
    var image = new Image();

    // Create loaded and flipped states for the image
    var imageFlipped = false;
    var imageLoaded = false;

    // Add event handlers
    $verticalFlip.on("click", onVerticalFlipClick);
    image.onload = onImageLoad;



    // Load image function
    function loadImage(src) {
        imageLoaded = false;
        image.src = src;
    };

    // Draw image function
    function drawImage(flip) {

        // Only draw the image on the canvas if it has loaded
        if (imageLoaded) {

            // Set the scale and translate the context based on the passed flip boolean
            context.save();
            context.scale(1, flip ? -1 : 1);
            context.translate(0, flip ? -image.height : 0);
            context.drawImage(image, 0, 0);
            context.restore();
        }
    };



    // Image load callback
    function onImageLoad(event) {
        imageLoaded = true;
        canvas.width = image.width;
        canvas.height = image.height;
        drawImage(imageFlipped);
    };

    // Click callback
    function onVerticalFlipClick(event) {

        // Invert the flip state
        imageFlipped = !imageFlipped;

        // Draw the image on the canvas
        drawImage(imageFlipped);
    };



    // Finally, load the image
    loadImage("http://myurl.com/" + user_id + "_temp.jpg");

});

Answer 3

每次调用时，您的代码都会执行以下步骤

(1) 加载图像 (2) 加载时垂直翻转

所以每次你调用它时，你都会加载然后翻转原始图像。

您需要使用单独的函数加载图像，并在加载后设置将翻转图像的函数。