javascript - 使用画布显示的类似图像

问题描述

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

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

我正在使用一个对象来跟踪已添加的图像。每次我在画布上拖动 Image 时，都会调用此方法。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);
        }
     }

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

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

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

标签： javascripthtmlcanvasmouseevent

javascript - 使用画布显示的类似图像

问题描述

解决方案

推荐阅读