使用 canvas 显示相似图片

Question

我正在尝试在 canvas 上显示多张图片。 canvas 上最近添加的图像必须是可拖动的。这是 HTML 代码。

 <canvas id="panoramaCanvas" width=1500 height=1000></canvas>

我正在使用一个对象来跟踪已添加的图像。每次我将图像拖到 canvas 上时，都会调用此方法。 storeData 存储当前添加的图像数据。

var storeData = []; // Object
var panoramaImg = new Image();
var imgNumber = 0;

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();
    //
    var url = e.dataTransfer.getData('text/plain');
    // for img elements, url is the img src so 
    // create an Image Object & draw to canvas
    if (url) {
        panoramaImg.onload = function () {
            panoramaCtx.globalAlpha = 0.4;
            panoramaCtx.drawImage(panoramaImg, 0, 0, this.width, this.height, 0, 0, 500, 500);
            panoramaCtx.globalAlpha = 1.0;

            storeData.push({
                imgData: panoramaImg,
                imgNo: imgNumber + 1,
                xPoint: 0,
                yPoint: 0,
            });
            imgNumber = imgNumber + 1;
        }
        //img.width, img.height, 0, 0, rangeWidth.value, rangeHeight.value
        panoramaImg.src = url;
        // for img file(s), read the file & draw to canvas
    } else {
        handleFiles(e.dataTransfer.files);
    }
}

在鼠标事件上调用此方法。

var canvasOffset1 = $("#panoramaCanvas").offset();
var offsetX1 = canvasOffset1.left;
var offsetY1 = canvasOffset1.top;
var canvasWidth = panoramaCanvas.width;
var canvasHeight = panoramaCanvas.height;
var isDragging = false;

function handleMouseDownEvent(e) {
    canMouseX = parseInt(e.clientX - offsetX1);
    canMouseY = parseInt(e.clientY - offsetY1);
    // set the drag flag
    isDragging = true;
}

function handleMouseUpEvent(e) {
    canMouseX = parseInt(e.clientX - offsetX1);
    canMouseY = parseInt(e.clientY - offsetY1);
    // clear the drag flag
    isDragging = false;
}

function handleMouseOutEvent(e) {
    canMouseX = parseInt(e.clientX - offsetX1);
    canMouseY = parseInt(e.clientY - offsetY1);
    // user has left the canvas, so clear the drag flag
    //isDragging=false;
}

function handleMouseMoveEvent(e) {
    canMouseX = parseInt(e.clientX - offsetX1);
    canMouseY = parseInt(e.clientY - offsetY1);
    // if the drag flag is set, clear the canvas and draw the image
    if (isDragging) {
        panoramaCtx.clearRect(0, 0, canvasWidth, canvasHeight);
        panoramaCtx.globalAlpha = 0.4;
        
       if (storeData.length > 1)
        {
            for (var i = 0; i <= storeData.length - 2; i++) {
                panoramaCtx.drawImage(storeData[i].imgData, storeData[i].xPoint, storeData[i].yPoint, 
                500, 500);
            }
        }

         panoramaCtx.drawImage(panoramaImg, canMouseX - 1128 / 2, canMouseY - 120 / 2, 500, 500);
        
        panoramaCtx.globalAlpha = 1.0;
        storeData[imgNumber - 1].xPoint = canMouseX - 1128 / 2;
        storeData[imgNumber - 1].yPoint = canMouseY - 120 / 2;
        console.log(storeData);
        }
     }

当我添加第一张图像时，鼠标事件一切正常，但是当我添加第二张图像时，图像数据首先更改为第二张图像的图像数据。

当我尝试更改第二张图像的位置时，第一张图像的图像数据发生变化。

显示图像时我哪里做错了？

Answer 1

您正在创建一个 HTMLImageElement panoramaImg。因此，所有 storeData 成员的 imgData 属性都是相同的，只有 HTMLImageElement 指向最后一个放置的图像。

只需在您的放置处理程序中创建一个 new Image()，而不是重复使用它。

使用 canvas 显示相似图片

Similar images displaying using canvas

javascript

html

canvas

mouseevent