AlanHorman
Mitglied
Hallo,
habe folgendes Problem:
Nachdem ich eine Sinus-Kurve gezeichnet und über die Windows-Viewport-Transformation in meinem Canvas übertragen habe, habe ich das Canvas wieder geleert.
Doch wenn ich wieder die gleiche Sinus-Kurv, bloß mit anderen Windows-Transform-Koordinaten, wieder zeichne, dann wird die vorherige Kurve auch dazu gezeichnet, obwohl sie eigentlich gelöscht wurde.
Hier der Quellcode:
habe folgendes Problem:
Nachdem ich eine Sinus-Kurve gezeichnet und über die Windows-Viewport-Transformation in meinem Canvas übertragen habe, habe ich das Canvas wieder geleert.
Doch wenn ich wieder die gleiche Sinus-Kurv, bloß mit anderen Windows-Transform-Koordinaten, wieder zeichne, dann wird die vorherige Kurve auch dazu gezeichnet, obwohl sie eigentlich gelöscht wurde.
Hier der Quellcode:
HTML:
<html>
<head>
<title>Canvas Example</title>
<style>
body {
background-color: #ffc;
font-family: sans-serif;
}
#myCanvas {
border: solid 1px black;
position: relative;
float: left;
cursor: pointer;
}
</style>
<script type='text/javascript'>
// let's first declare some ugly globals here...
var mouse_drag_x = 0, mouse_drag_y = 0;
var last_mouse_drag_x = -1, last_mouse_drag_y = -1;
var mouse_dragging = false;
function clearImage(canvas) {
// get the 2d drawing context
var context = canvas.getContext("2d");
// clear canvas
context.fillStyle = 'rgb(255,255,255)';
context.fillRect(0, 0, canvas.width, canvas.height);
// some defaults
context.lineCap = "round";
context.lineWidth = pen_size;
context.strokeStyle = pen_col;
}
function updateImage(canvas) {
if (!mouse_dragging)
return;
// on first click, only set start point of stroke
if (last_mouse_drag_x < 0 || last_mouse_drag_y < 0) {
last_mouse_drag_x = mouse_drag_x;
last_mouse_drag_y = mouse_drag_y;
}
var context = canvas.getContext("2d");
context.lineWidth = pen_size;
context.strokeStyle = pen_col;
// draw a line
context.beginPath();
context.moveTo(last_mouse_drag_x, last_mouse_drag_y);
context.lineTo(mouse_drag_x, mouse_drag_y);
//context.closePath();
context.stroke();
last_mouse_drag_x = mouse_drag_x;
last_mouse_drag_y = mouse_drag_y;
}
// add event listeners to canvas object
function attachMouseHandler(canvas) {
canvas.addEventListener('mousedown', function (evt) {
mouse_dragging = true;
mouse_drag_x = evt.layerX;
mouse_drag_y = evt.layerY;
if (points.length < 3)
{
var p = {
x : mouse_drag_x,
y : mouse_drag_y};
points.push(p);
console.log(p);
}
updateImage(canvas);
}, false);
canvas.addEventListener('mouseup', function (evt) {
mouse_dragging = false;
last_mouse_drag_x = -1;
last_mouse_drag_y = -1;
updateImage(canvas);
}, false);
canvas.addEventListener('mouseout', function (evt) {
mouse_dragging = false;
last_mouse_drag_x = -1;
last_mouse_drag_y = -1;
updateImage(canvas);
}, false);
canvas.addEventListener('mousemove', function (evt) {
if (!mouse_dragging)
return;
mouse_drag_x = evt.layerX;
mouse_drag_y = evt.layerY;
updateImage(canvas);
}, false);
}
function window_viewport_transformation(dx0, dx1, wx, wx0, wx1)
{
return ((dx1 - dx0) / (wx1 - wx0)) * wx + (dx0 - ( (wx0 * (dx1 - dx0) ) / (wx1 - wx0) ) );
}
function get_world_Coordinates(string, iX, iY)
{
var sw = string.split(" ");
var coord = {
x : parseFloat(sw[iX]),
y : parseFloat(sw[iY])
};
return coord;
}
function get_device_size(canvas)
{
var size = {
d0x : 0,
d0y : parseFloat(canvas.height),
d1x : parseFloat(canvas.width),
d1y : 0
};
return size;
}
function drawSinus(canvas)
{
var context = canvas;
var c_size = get_device_size(document.getElementById("myCanvas"));
console.log(c_size);
var w0 = get_world_Coordinates(document.getElementById("sw").value, 0, 1);
console.log(w0);
var w1 = get_world_Coordinates(document.getElementById("sw").value, 2, 3);
console.log(w1);
var p = {
x : 0,
y : 0
};
var r = 70;
var N = 100;
for (var i = 0; i < N; i++)
{
var phi = i * (2 * Math.PI / N);
var x = i + p.x;
var y = r * Math.sin(phi) + p.y;
var dx = window_viewport_transformation(c_size.d0x, c_size.d1x, x, w0.x, w1.x);
var dy = window_viewport_transformation(c_size.d0y, c_size.d1y, y, w0.y, w1.y);
if (i == 0)
{
context.moveTo(dx, dy);
console.log(dx + ", " + dy);
}
else
{
context.lineTo(dx, dy);
console.log(dx + ", " + dy);
}
}
context.stroke();
}
function main() {
var myCanvas = document.getElementById("myCanvas");
attachMouseHandler(myCanvas);
clearImage(myCanvas);
}
</script>
</head>
<body onload='main();'>
<h1>2D painting via the HTML5 <canvas> tag</h1>
<canvas width='400' height='400' id='myCanvas'></canvas>
<div>
<button type="button" onclick="clearImage(document.getElementById('myCanvas'));">
Clear Image
</button>
</div>
<div>
Set window (min/max): <input type="textfield" id="sw" size="25" maxlength="25">
Window-Viewport trafo: <input type="button" value="WcToCc" onclick="setPoint(document.getElementById('myCanvas'));">
</div>
<div>
<button onclick="drawSinus(myCanvas.getContext('2d'));">Draw Sinus</button>
</div>
</body>
</html>
