Ubuntu-fr

worfhack

reprendre deplacement image dans un canvas

je cherche à avoir le systeme suivant

1) Une image dans canvas

2) Une liste de picto sur la droite , qu'on peut ajouter en drag and drop sur le canvas

fonctionelemet ca marche

j'ai mon image à gauche, mes 4 picto à droites

et on peut avec la souris integer ce picto sur l'image dans le canvas

la seul choses que je n'arrive pas à faire , c'est de pouvoir deplacer directement le picto sur le canvas

la il faut replacer le picto à droite

Merci de votre aide

voila mon code JS

 let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = document.createElement("img");
let pictoListTentreLoup = [
	document.createElement("img"),
	document.createElement("img"),
	document.createElement("img"),
	document.createElement("img"),
]

let pictoPositions = [
	{x: -10, y: -10},
	{x: -10, y: -10},
	{x: -10, y: -10},
	{x: -10, y: -10},
]
let originalImage;

pictoListTentreLoup.forEach(picto => {
    picto.src = "picto1.png";
});
let draggablePicto = null;
let draggablePictoIndex;

// Initialisation de l'image à afficher
img.src = "logo.png";
img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    originalImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
    pictoListTentreLoup.forEach((picto, i) => {
        //ctx.drawImage(picto, pictoPositions[i].x, pictoPositions[i].y);
    });
}



// Gestion du drag & drop des picto
pictoListTentreLoup.forEach((picto, i) => {
    ctx.beginPath();
    ctx.rect(pictoPositions[i].x, pictoPositions[i].y, picto.width, picto.height);
    picto.addEventListener("mousedown", e => {
		//if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
            draggablePicto = picto;
            draggablePictoIndex = i;
			ctx.strokeStyle = 'red';
			ctx.strokeRect(pictoPositions[i].x, pictoPositions[i].y, picto.width, picto.height);
    //    }
    });
});

canvas.addEventListener("mousemove", e => {
    if (draggablePicto) {
        ctx.putImageData(originalImage, 0, 0);
        pictoPositions[draggablePictoIndex].x = e.offsetX;
        pictoPositions[draggablePictoIndex].y = e.offsetY;
        pictoListTentreLoup.forEach((picto, i) => {
			if (pictoPositions[i].x > 0)
			console.log(ctx.drawImage(picto, pictoPositions[i].x, pictoPositions[i].y));
			if (picto === draggablePicto) {
				ctx.strokeStyle = 'red';
				ctx.strokeRect(pictoPositions[i].x, pictoPositions[i].y, picto.width, picto.height);
			}
				
        });
    }
});

canvas.addEventListener("mouseup", e => {
    draggablePicto = null;
});

document.body.appendChild(canvas);
pictoListTentreLoup.forEach(picto => {
    document.body.appendChild(picto);
});