Question

我一直在努力解决问题。我试图在画布上创建一个图像，当用户点击画布外的div时，画布的背景应该更改为该图像。这是有效的，但问题是，当我点击图像时没有任何反应，如果我点击不同的图像，我点击之前的图像就会被加载。这让我很沮丧，我真的需要一套新的眼睛。

生成图像的代码非常复杂，它是一个有角度的应用程序，它依赖于许多指令来做一些繁重的工作。生成图像的代码如下：

var canvas = document.getElementById("image");
var context = canvas.getContext("2d");
// Setup the margin box
context.fillStyle = '#000000';
context.globalAlpha = 0;
context.fillRect(53, 53, 319, 107);
context.globalAlpha = 1;
$scope.resultTempImage = false;
$scope.generate = {
    price: 1
};
$scope.color = "#ffffff";
$scope.product = {
    bg: 'img/bg/bg-green-pattern.png',
    icon: '',
    color: "#000000",
    font: 'Acme',
    text1: "",
    text2: "",
    text3: "",
    quantity: 120,
    price: {
        id: 1,
        value: 17900
    }
};
// Generates the first image  
var firstLoadBg = false;
var bgImage = new Image();
var loadBg = function(image, callback) {
    bgImage.src = '';
    bgImage.onload = function() {
        firstLoadBg = true;
        callback(this);
    };
    bgImage.src = image;
}
var iconImage = new Image();
iconImage.onload = function() {
    console.log('icon image loaded');
    context.drawImage(this, 53, 53);
};
$scope.generateImage = function(product) {
    /**
     * Generates the image in the canvas
     */
    // Generate a bg image
    loadBg(product.bg, function(image) {
        if (firstLoadBg == true) {
            context.drawImage(image, 0, 0);
            console.log('bg drawn');
        }
        if (product.icon) {
            iconImage.src = '';
            iconImage.src = product.icon;
        }
        // Add lines to the lines array 
        var lines = [];
        if (product.text1 != "") {
            lines.push(product.text1);
        }
        if (product.text2 != "") {
            lines.push(product.text2);
        }
        if (product.text3 != "") {
            lines.push(product.text3);
        }
        calculatePaint(lines, product.icon, product.font, function(Paint) {
            /**
             * Response from the Paint function, holds the position of the generated text.
             */
            context.font = Paint.textSize;
            context.fillStyle = product.color;
            context.textAlign = "center";
            context.textBaseline = "middle";
            // Draw text lines
            var y = Paint.bleedHeight;
            angular.forEach(lines, function(value, key) {
                if (lines.length == 2) {
                    context.textBaseline = "top";
                    if (key == 0) {
                        y = y - Paint.topPadding;
                    }
                    if (key == 1) {
                        y = y + Paint.padding;
                    }
                }
                if (lines.length == 3) {
                    context.textBaseline = "top";
                    if (key == 0) {
                        y = y - Paint.topPadding;
                    }
                    if (key == 1) {
                        y = y + Paint.padding;
                    }
                    if (key == 2) {
                        y = y + Paint.padding;
                    }
                }
                context.fillText(lines[key], Paint.bleedWidth, y, Paint.maxWidth);
            });
            var dataURL = canvas.toDataURL();
            $scope.resultTempImage = dataURL;
            console.log('done painting');
        });
    });
}

function calculatePaint(lines, icon, font, callback) {
    /**
     * @function for fitting text to the margin box 
     * @param line1 String
     * @param line2 String
     * @param line3 String
     * @return obj
     */
    // Margin of icon 
    var iconMargin = 90;
    // Initial fontSize
    var fontSize = 80;
    // Bleed 
    var marginWidth = 53;
    var marginHeight = 53;
    // Inner box width 
    var w = 319;
    var iconw = 319 - 100;
    // Inner box height
    var h = 107;
    var Paint = {
        bleedWidth: marginWidth + (w / 2),
        bleedHeight: marginHeight + (h / 2),
        maxWidth: w,
        padding: 2,
        topPadding: 53
    };
    if (icon) {
        Paint.bleedWidth = marginWidth + 100 + (iconw / 2);
        Paint.textSize = fontSize + 'px ' + font;
        Paint.maxWidth = iconw;
        fontSize = 60;
    }
    // Check lines array 
    if (lines.length == 1) {
        // only one line is present 
        Paint.textSize = fontSize + 'px ' + font;
    }
    if (lines.length == 2) {
        Paint.textSize = (Paint.bleedHeight / 2) - 8 + 'px ' + font;
        Paint.padding = Paint.padding + (Paint.bleedHeight / 2) - 2;
    }
    if (lines.length == 3) {
        Paint.textSize = (Paint.bleedHeight / 3) - 8 + 'px ' + font;
        Paint.padding = Paint.padding + (Paint.bleedHeight / 3) - 2;
    }
    callback(Paint);
}

Answer 1

我找到了解决自己问题的方法。我所做的是在页面加载时预加载所有图像。像这样：

 Data.get( 'assets/images' ).then( function( res ) {
            if( res.success == true ) {


               $scope.items = res.message;
               angular.forEach( res.message, function( item, key ) {
                   preload( item.data, function(image) {
                       item.image = image;   
                   } )
               } );

            }
        } );
var preload = function( src, callback ) {
            var image = new Image();
            image.onload = function() {
                callback( this );
            }
            image.src = src;
        }

这会预加载我的所有图像，当我准备好绘制画布时，我已经准备好了所有图像。

用画布点击更改图像

1 个答案: