如何在單個畫布上繪制多個圖像？

Question

我正在制作一個網站，讓用戶繪制草圖並指定他們的位置和大小； 然后，我將它們保存到數據庫中。 在不同的路線中，我想加載這些圖像並將它們顯示在單個畫布上。

我為此使用了drawImage函數，但發生的情況是第二個圖像被繪制在第一個圖像上。 如下圖所示， circle和triangle的兩個草圖：

這是我在畫布上繪制圖像的方法：

var canvas = document.getElementById("paint");    
var ctx = canvas.getContext("2d");
function loadImages(data, targetX, targetY, targetWidth, targetHeight) {

    data = data.replace(/'/g, '"');
    targetX = targetX.replace(/'/g, '"');
    targetY = targetY.replace(/'/g, '"');
    targetWidth = targetWidth.replace(/'/g, '"');
    targetHeight = targetHeight.replace(/'/g, '"');

    data = JSON.parse(data);
    targetX = JSON.parse(targetX);
    targetY = JSON.parse(targetY);
    targetWidth = JSON.parse(targetWidth);
    targetHeight = JSON.parse(targetHeight);

    for(var i = 0; i < data.length; i++) {
        var img = new Image();
        var tx = parseInt(targetX[i]);
        var ty = parseInt(targetY[i]);
        var tw = parseInt(targetWidth[i]);
        var th = parseInt(targetHeight[i]);
        img.src = data[i];
        img.onload = function() {
            ctx.drawImage(this, tx, ty, tw, th);
        };

        
    }

}

此處的字符串格式化將從數據庫（通過 Flask）獲取的數據轉換為 JavaScript 數組。 我已經在所有變量上使用了console.log() ，比如img ， tx ， ty ， tw ， th並且它們都具有所需的值，但仍然在畫布上它們沒有被正確繪制，所以我無法縮小范圍問題。

下面是我在 HTML 文件中調用函數的方法：

{% block content %}
{% if files %}

<button id="show" onclick="loadImages(`{{ data }}`, `{{ targetX }}`, `{{ targetY }}`, `{{ sizeX }}`, `{{ sizeY }}`)">View</button>

<canvas id="paint" width="512" height="512" style="border: 5px solid #000000;"></canvas>
{% endif %}
    
<script src=" {{ url_for('static', filename='edit.js') }}"></script>

{% endblock %}

Answer 1

您正在同步循環中執行異步操作。 嘗試這個..

 var canvas = document.getElementById("paint"); var ctx = canvas.getContext("2d"); async function loadImages(data, targetX, targetY, targetWidth, targetHeight) { var images = {}; data = data.replace(/'/g, '"'); targetX = targetX.replace(/'/g, '"'); targetY = targetY.replace(/'/g, '"'); targetWidth = targetWidth.replace(/'/g, '"'); targetHeight = targetHeight.replace(/'/g, '"'); data = JSON.parse(data); targetX = JSON.parse(targetX); targetY = JSON.parse(targetY); targetWidth = JSON.parse(targetWidth); targetHeight = JSON.parse(targetHeight); for (var i = 0; i < data.length; i++) { var tx = parseInt(targetX[i]); var ty = parseInt(targetY[i]); var tw = parseInt(targetWidth[i]); var th = parseInt(targetHeight[i]); var img = await loadImage(data[i]); ctx.drawImage(img, tx, ty, tw, th); } } function loadImage(src){ return new Promise(done=>{ var img = new Image(); img.src = src; img.onload = function() { done(img); }; }); }