Hallo zusammen,
melde mich auch mal wieder mit einem Problem.
Habe mit dem Canvas-Element etwas gespielt und wollte nun ein kleines Zeichentool erstellen. Ein Fenster, in welchem man mit gedrückter Maustaste malen kann.
Dabei herausgekommen ist: Painting-Editor
Wie man feststellen kann, ist der Punkt, an dem gerade gezeichnet wird, nie direkt unter der Maus, sondern immer etwas versetzt. Dabei scheint die Extreme des Versatzes direkt proportional zum linken und oberen Abstand der Maus zum Viewport zu sein. Zeichnet man oben in der linken Ecke, ist der Versatz minimal, unten rechts gerne 200px.
Ich kann mir das nicht erklären. Bei Scripten wie unter Creating an HTML 5 canvas painting application - Dev.Opera bzw. Canvas Paint - Example 1 (zugehöriges Beispiel) kann ich keine Vorkehrungen erkennen, die ein solches Verhalten umgehen.
Hat vielleicht jemand einen Tipp für mich?
Vielen Dank
Vitus
Javascript:
melde mich auch mal wieder mit einem Problem.
Habe mit dem Canvas-Element etwas gespielt und wollte nun ein kleines Zeichentool erstellen. Ein Fenster, in welchem man mit gedrückter Maustaste malen kann.
Dabei herausgekommen ist: Painting-Editor
Wie man feststellen kann, ist der Punkt, an dem gerade gezeichnet wird, nie direkt unter der Maus, sondern immer etwas versetzt. Dabei scheint die Extreme des Versatzes direkt proportional zum linken und oberen Abstand der Maus zum Viewport zu sein. Zeichnet man oben in der linken Ecke, ist der Versatz minimal, unten rechts gerne 200px.
Ich kann mir das nicht erklären. Bei Scripten wie unter Creating an HTML 5 canvas painting application - Dev.Opera bzw. Canvas Paint - Example 1 (zugehöriges Beispiel) kann ich keine Vorkehrungen erkennen, die ein solches Verhalten umgehen.
Hat vielleicht jemand einen Tipp für mich?
Vielen Dank
Vitus
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Painting-Editor</title>
<style type="text/css">
*{margin:0;padding:0;}
#wrapper{
width: 100%;
height:100%;
}
#editor{
width: 100%;
height: 100%;
}
#editor-canvas{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="editor.js"></script>
</head>
<body onload="initialize()">
<div id="wrapper">
<div id="editor">
<canvas id="editor-canvas" width="800" height="400"></canvas>
</div>
<div id="test" style="position:fixed;left:0;top:0;"></div>
</div>
</body>
</html>
Code:
function initialize(){
var canvas = document.getElementById('editor-canvas');
var test = document.getElementById('test');
if(canvas.getContext){
var c = canvas.getContext('2d');
var drawActive = false;
var drawPositionX = 0;
var drawPositionY = 0;
function drawStart(event){
drawActive = true;
drawPositionX = event.layerX;
drawPositionY = event.layerY;
c.beginPath();
c.moveTo(drawPositionX, drawPositionY);
test.innerHTML = drawPositionX+" "+drawPositionY;
}
function drawStop(){
c.stroke();
drawActive = false;
}
function drawLine(event){
if(drawActive){
drawPositionX = event.layerX;
drawPositionY = event.layerY;
c.lineTo(drawPositionX, drawPositionY);
c.stroke();
}
}
canvas.addEventListener('mousedown', drawStart, false);
canvas.addEventListener('mousemove', drawLine, false);
canvas.addEventListener('mouseup', drawStop, false);
}
}