Wie man ein Objekt auf eine beliebige Seite der 2D-Leinwand mit allem hinein zieht

Question

Ich habe hier wenig Schwierigkeiten. Arbeiten auf 2D-Leinwand und ich kann Rechteck mit der Maus in 2D-Leinwand mit vier Eckwinkeln ziehen. Dieses Rechteck ist flexibel und kann mit der Maus in jede Richtung bewegt werden.

Dieses Rechteck sollte genau so aussehen wie in Image1, egal wo ich es verschiebe. Es sieht perfekt aus, wenn ich dieses Rechteck von oben nach unten durch Ziehen mit der Maus erzeuge, aber wenn ich dies auf die linke Seite drehe, sieht man Image2, Eckenwinkel ist außerhalb der Box und seltsam. Das Gleiche passiert, wenn ich den Cursor zur oberen Seite bewege, siehe Image3.

Ich möchte dieses Rechteck wie Image1 auf jeder Seite aussehen. Kann mir bitte jemand helfen, wie ich das beheben kann?

Image1 - Wunschbild. Egal, welcher Seite der Mauszeiger ist.

Image2 - Wenn ich die Maus Punkt Linke Seite des Leinwand bewegen

Image3 - Wenn ich die Maus Punkt Oberseite Leinwand

function drawBox(x, y, w, h, crosshairSize, detailWidth, fill, detailCol) { 
     ctx.globalAlpha = 0.3; 
     function drawCross(x, y, s, w) { // draw crosshair s is size, w is width 
      const hw = w/2; // half width 
      ctx.beginPath(); 
      ctx.lineTo(x - hw, y - hw); 
      ctx.lineTo(x - hw, y - s); 
      ctx.lineTo(x + hw, y - s); 
      ctx.lineTo(x + hw, y - hw); 
      ctx.lineTo(x + s, y - hw); 
      ctx.lineTo(x + s, y + hw); 
      ctx.lineTo(x + hw, y + hw); 
      ctx.lineTo(x + hw, y + s); 
      ctx.lineTo(x - hw, y + s); 
      ctx.lineTo(x - hw, y + hw); 
      ctx.lineTo(x - s, y + hw); 
      ctx.lineTo(x - s, y - hw); 
      ctx.closePath(); 
      ctx.fill() 
     } 

     function drawCorner(x, y, dx, dy, s, w) { // draw crosshair s is size, w is width 
      // dx and dy are directions   
      const hw = w/2; // half width 
      ctx.beginPath(); 
      ctx.lineTo(x, y); 
      ctx.lineTo(x + dx * s, y); 
      ctx.lineTo(x + dx * s, y + dy * w); 
      ctx.lineTo(x + dx * w, y + dy * w); 
      ctx.lineTo(x + dx * w, y + dy * s); 
      ctx.lineTo(x, y + dy * s); 
      ctx.closePath(); 
      ctx.fill(); 
     } 
     ctx.fillStyle = fill; 
     ctx.fillRect(x, y, w, h); 
     ctx.fillStyle = detailCol; 
     drawCross(x + w/2, y + h/2, crosshairSize, detailWidth); 
     drawCorner(x, y, 1, 1, crosshairSize * 2, detailWidth); 
     drawCorner(x + w, y, -1, 1, crosshairSize * 2, detailWidth); 
     drawCorner(x + w, y + h, -1, -1, crosshairSize * 2, detailWidth); 
     drawCorner(x, y + h, 1, -1, crosshairSize * 2, detailWidth); 
}` //end of function` 



//calling drawBox function 
drawBox(startposition.x, startposition.y, width * 2, height * 2, crosshairSize, 1, "#6E97B1", '#0055FE'); 

Answer 1

bewegen analysieren wir die Ecken und kamen mit dieser Lösung Wie ich die Richtung brauchte, in welche Richtung ich dieses Rechteck ziehe. so berechnen Richtung wie diese

 directionX = previousMousePosition.x - startposition.x; 
    directionY = previousMousePosition.y - startposition.y; 

dann eine Bedingung mit Hilfe der Richtung gelten

function drawCorner(x, y, dx, dy, s, w) { // draw crosshair s is size, w is width 

     // dx and dy are directions   
     const hw = w/2; // half width 
     ctx.beginPath(); 
     ctx.lineTo(x, y); 
     ctx.lineTo(x + dx * s, y); 
     ctx.lineTo(x + dx * s, y + dy * w); 
     ctx.lineTo(x + dx * w, y + dy * w); 
     ctx.lineTo(x + dx * w, y + dy * s); 
     ctx.lineTo(x, y + dy * s); 
     ctx.closePath(); 
     ctx.fill(); 

    } 

    var crosshairSize = 10; 
    var detailWidth = 2; 
    if (directionY > 0 && directionX > 0) // down 
    { 
     drawCorner(startposition.x, startposition.y, 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x + directionY , startposition.y, -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x + directionY , startposition.y + directionX , -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x, startposition.y + directionX , 1, -1, crosshairSize * 2, detailWidth); //4 
    } 
    if (directionY < 0 && directionX > 0) {  // up 

     drawCorner(startposition.x, startposition.y + directionY , 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x + directionX , startposition.y + directionY , -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x + directionX , startposition.y, -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x, startposition.y, 1, -1, crosshairSize * 2, detailWidth); //4 
    } 
    if (directionY > 0 && directionX < 0) { //left 

     drawCorner(startposition.x + directionX , startposition.y, 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x, startposition.y, -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x, startposition.y + directionY , -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x + directionX , startposition.y + directionY , 1, -1, crosshairSize * 2, detailWidth); //4 
    } 

    if (directionY < 0 && directionX < 0) { // upper left 

     drawCorner(startposition.x + directionX , startposition.y + directionY , 1, 1, crosshairSize * 2, detailWidth); //1 
     drawCorner(startposition.x, startposition.y + directionY , -1, 1, crosshairSize * 2, detailWidth); //2 
     drawCorner(startposition.x, startposition.y, -1, -1, crosshairSize * 2, detailWidth); //3 
     drawCorner(startposition.x + directionX , startposition.y, 1, -1, crosshairSize * 2, detailWidth); //4 
    }