11486 sujets

JavaScript, DOM et API Web HTML5

Déplacer un objet (poo javascript) sur un <canvas>

Bonjour
Je coince sur un problème de déplacement d'un objet graphique (un simple carré) à travers un canvas. J'aimerais réaliser une fonction "drag and drop". Lorsque je clique sur le carré, il doit passer en rouge. Puis je dois pouvoir le déplacer. Lorsque je relache le click, il doit repasser en noir et rester là où je l'ai posé. Et ça ne marche pas.... Smiley decu Il passe bien en rouge, mais ne se déplace pas et ne revient pas en noir. Quelqu'un peut il me dire où sont les erreurs ?


<!DOCTYPE html>
<html lang fr" >
<head>
<meta charset="utf-8">
<style>body {margin: 0; overflow: hidden;}</style>
</head>
<body>
<canvas class="myCanvas"></canvas>
<script>
// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false ;
let pressedBefore = false ;
// Some common data
let lp = 8 ;           // largeur poignee
let demiPoignee = 4 ;
backColor = "rgb(240, 240, 255)" ;
drawColor = "rgb(0, 0, 0)" ;

const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

// update mouse pointer coordinates
document.onmousemove = function(e) {
    curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
canvas.onmousedown = function() {
    pressed = true ;
};
canvas.onmouseup = function() {
    pressed = false ;
}
      
// L'objet poignée
function Poignee (x, y) {
    this.x = x ;
    this.y = y ;
    this.draw = function (color) {
        ctx.strokeStyle = color ;
        ctx.strokeRect(x-demiPoignee, y-demiPoignee, lp, lp);
    }
    this.mouseInside = function () {
        return (curX >= x-demiPoignee) && (curX <= x + demiPoignee) && 
        (curY >= y-demiPoignee) && (curY <= y + demiPoignee) ;
    }
    this.move = function () {
        if (pressed && (curX != this.x) && (curY != this.y)) {
            this.draw (backColor) ;
            this.x = curX ;
            this.y = curY ;
            this.draw ("red") ;
        }
        if (!pressed && pressedBefore) {
            alert (curX + "  " + curY + "   " + this.x + "  " + this.y) ;
            this.draw (drawColor) ;
        }
    }
    this.transform = function () {
        if (!pressed && !pressedBefore) return ;
        if (this.mouseInside()) this.move () ;
    }
}

function draw() {
  poignee1.transform () ;
  pressedBefore = pressed ;
  requestAnimationFrame(draw) ;
}

ctx.fillStyle = backColor ;
ctx.fillRect(0, 0, width, height) ;
ctx.lineWidth = 2 ;

poignee1 = new Poignee (100, 100) ;
poignee1.draw (drawColor) ;
draw();

</script>
</body>
</html>
Sujet clos
Aller à