Leinwand Zeichnung margin correction

Ich versuche, einige Draw Techniken, die ich in dieser URL gefunden:Leinwand Zeichnung margin correction

http://perfectionkills.com/exploring-canvas-drawing-techniques/

Ich habe gerade bemerkt, dass die fortschrittlicheren CSS-Eigenschaften sind nicht auf die Canvas-Element Mausereignisse angewendet. Gibt es eine einfache Möglichkeit, das zu beheben?

<head> 

    <meta charset="utf-8"> 
    <title>Spray Can</title> 

    <style> 

    body { 
     margin: 0; 
     padding: 0; 
    } 

    #container { 
     border: 1px solid #ccc; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 

    #canvas { 
    } 

    </style> 

    <script> 

     document.addEventListener('DOMContentLoaded', function() { 

      var canvas = document.getElementById('canvas'); 
      var context = canvas.getContext('2d'); 
      var isDrawing; 

      canvas.onmousedown = function(e) { 
       isDrawing = true; 
       context.moveTo(e.clientX, e.clientY); 
      }; 

      canvas.onmousemove = function(e) { 

       if (isDrawing) { 

        var k = 4; 

        var radgrad = context.createRadialGradient(e.clientX, e.clientY, k, e.clientX, e.clientY, k * 2); 

        radgrad.addColorStop(0, 'rgba(0,0,0,1)'); 
        radgrad.addColorStop(0.5, 'rgba(0,0,0,0.5)'); 
        radgrad.addColorStop(1, 'rgba(0,0,0,0)'); 
        context.fillStyle = radgrad; 

        context.fillRect(e.clientX - k * 2, e.clientY - k * 2, k * 2 * 2, k * 2 * 2); 

       } 

      }; 

      canvas.onmouseup = function() { 
       isDrawing = false; 
      }; 

     }); 

    </script> 

</head> 

<body> 

    <div id="container"> 
     <canvas id="canvas" width="400" height="400"></canvas> 
    </div> 

</body>

https://jsfiddle.net/crpq8t5q/1/

Quelle

2016-12-17 lolol

Was Sie brauchen, ist der Maus-Ereignis des Koordinaten konvertieren auf die Leinwand diejenigen relativ zu sein.

Da hier weder die Skala noch die Drehung berührt wird, ist dies nur eine einfache canvasX = mouseX - canvas.offsetLeft und canvasY = mouseY - canvas.offsetTop. Die Eigenschaften sind auf der Zeichenfläche verfügbar, aber Sie können auch getBoundingClientRect() verwenden, was zu besseren Ergebnissen führt, wenn Ihr CSS komplizierter ist (z. B. verschachtelte Elemente mit verschiedenen scrollbaren Bereichen).

Da sich dieser Offset jedoch jedes Mal ändert, wenn Sie die Seite scrollen oder die Größe ändern, müssen Sie diese Werte aktualisieren.

Es ist auch eine sehr schlechte Idee, einen readialGradient in einem Mausereignis zu erstellen. Dieses Ereignis kann mit einer sehr hohen Rate ausgelöst werden, und das Erstellen von Farbverläufen dient der Speicherung von Speicher.
Es ist dann besser, einen einzigen Gradienten zu erzeugen, und Ihre gesamte Kontext der Matrix modifizieren, so dass der Gradient an der Maus platziert werden Koordinaten:

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
var isDrawing; 
 

 
var k = 4; 
 
// create the gradient only once 
 
var radgrad = context.createRadialGradient(0, 0, k, 0, 0, k * 2); 
 
radgrad.addColorStop(0, 'rgba(0,0,0,1)'); 
 
radgrad.addColorStop(0.5, 'rgba(0,0,0,0.5)'); 
 
radgrad.addColorStop(1, 'rgba(0,0,0,0)'); 
 
// get our canvas margins; 
 
var rect; 
 

 
function getRect() { 
 
    rect = canvas.getBoundingClientRect(); 
 
} 
 

 
canvas.onmousedown = function(e) { 
 
    isDrawing = true; 
 
    context.moveTo(e.clientX, e.clientY); 
 
}; 
 

 
canvas.onmousemove = function(e) { 
 

 
    if (isDrawing) { 
 
    // normalize our mouse event's coordinates 
 
    var x = e.clientX - rect.left; 
 
    var y = e.clientY - rect.top; 
 
    // change the canvas matrix coordinates so we draw at mouse positions 
 
    context.setTransform(1, 0, 0, 1, x, y) 
 
    context.fillStyle = radgrad; 
 
    context.fillRect(-k * 2, -k * 2, k * 2 * 2, k * 2 * 2); 
 
    } 
 
}; 
 

 
canvas.onmouseup = function() { 
 
    isDrawing = false; 
 
}; 
 
var debouncing = false; 
 

 
function resizeHandler() { 
 
    debouncing = false; 
 
    getRect(); 
 
} 
 
window.onscroll = window.onresize = function() { 
 
    // debounce the events 
 
    if (!debouncing) { 
 
    requestAnimationFrame(resizeHandler); 
 
    } 
 
    debouncing = true; 
 
} 
 

 
getRect();

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
#canvas {}

<div id="container"> 
 
    <canvas id="canvas" width="400" height="400"></canvas> 
 
</div>

Quelle

2016-12-18 02:17:42 Kaiido

Leinwand Zeichnung margin correction

Antwort

Verwandte Themen