翻转画布不反转答案

【问题标题】：Flipping canvas not reversing翻转画布不反转
【发布时间】：2013-06-11 01:03:02
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html html5-canvas

【解决方案1】：

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

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

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

另请参阅此short demo。

【讨论】：

【解决方案2】：

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

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

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

// 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");

});

【讨论】：

【解决方案3】：

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

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

所以每次调用它时都会加载并翻转原始图像。

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

【讨论】：