codice HTML:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var addMode = 1;
var points = 0;
var mouseX = 0;
var mouseY = 0;
var arrPX = new Array();
var arrPY = new Array();
var cirDiam = 3;
var selPoint = -1;
function setAddPointStatus(value) {
addMode = value;
selPoint = -1;
redrawPoints();
} // function setAddPointStatus(value)
function addPoint() {
if (addMode == 1) {
var a = checkPoint();
if (a == -1) {
drawPoint(mouseX,mouseY);
arrPX[points] = mouseX;
arrPY[points] = mouseY;
points++;
}
showPointsList();
}
if (addMode == 2) {
var a = checkPoint();
if (a != -1) {
removePoint(a);
showPointsList();
}
}
if (addMode == 3) {
var a = checkPoint();
if (a != selPoint) {
if (a != -1) {
if (selPoint == -1) {
selPoint = a;
drawSelectedPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
} else {
drawLine(selPoint,a);
drawPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
selPoint = -1;
}
showPointsList();
}
} else {
drawPoint(parseInt(arrPX[selPoint]),parseInt(arrPY[selPoint]));
showPointsList();
selPoint = -1;
}
}
} // function addPoint()
function showPointsList() {
var list = "";
var str = "";
for (i=0;i<points;i++) {
str = '[' + i + '] = ' + arrPX[i] + ' - ' + arrPY[i];
if (i == checkPoint()) {
str = '<span style="background-color:red;color:white">'+str+'</span>';
}
list = list + str + '<br/>';
}
document.getElementById('pList').innerHTML = list;
document.getElementById('pNum').innerHTML = points;
} // function showPointsList()
function checkPoint() {
var i=0;
for (i=0;i<points;i++) {
if (Math.abs(arrPX[i] - mouseX) <= cirDiam && Math.abs(arrPY[i] - mouseY) <= cirDiam ) {
return i;
}
}
return -1;
} // function checkPoint()
function removePoint(pointToRemove) {
pointToRemove = parseInt(pointToRemove);
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
x = parseInt(arrPX[pointToRemove]);
y = parseInt(arrPY[pointToRemove]);
ctx.beginPath(x,y);
ctx.arc(x,y,cirDiam+1,0,Math.PI*2,true);
ctx.strokeStyle = "white";
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
for (i=pointToRemove;i<points;i++) {
arrPX[i] = arrPX[i+1];
arrPY[i] = arrPY[i+1];
}
arrPX[points] = -1;
arrPY[points] = -1;
points--;
} // function removePoint()
function clearCanvas() {
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.height, c.width);
var i = 0;
for (i=0;i<points;i++) {
arrPX[i] = 0;
arrPY[i] = 0;
}
points = 0;
showPointsList();
} // function clearCanvas()
function drawPoint(x,y) {
drawCircle(x,y,"coral","bisque");
} // function drawPoint(x,y)
function drawSelectedPoint(x,y) {
drawCircle(x,y,"blue","blue");
} // function drawSelectedPoint(x,y)
function resetCanvas() {
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.height, c.width);
redrawPoints();
} // function resetCanvas()
function redrawPoints() {
var i = 0;
for (i=0;i<points;i++) {
drawPoint(arrPX[i],arrPY[i]);
}
} // function redrawPoints()
function drawLine(fromPoint,toPoint) {
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(arrPX[fromPoint],arrPY[fromPoint]);
ctx.lineTo(arrPX[toPoint],arrPY[toPoint]);
ctx.stroke();
}
function drawCircle(x,y,strokeStyle, fillStyle) {
var c = document.getElementById( "mon_canvas" );
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath(x,y);
ctx.arc(x,y,cirDiam,0,Math.PI*2,true);
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.fill();
ctx.stroke();
}
//-->
</script>
</head>
<body>
<table summary="">
<tr>
<td>
<div style="border:1px dotted black;width:351;height:351" >
<canvas id="mon_canvas" width="350" height="350" onclick="addPoint()">
Spiacente. Il tuo browser non gestisce i canvas
</canvas>
</div>
</td>
<td id="pList" align="top">
</td>
</tr>
</table>
<hr/>
<input type="button" value="Clear" id="clear" onclick="clearCanvas()"/>
<input type="button" value="Reset" id="reset" onclick="resetCanvas()"/>
Action :
<select onchange="setAddPointStatus(this.value)">
<option value="1">Add Point</option>
<option value="2">Remove Point</option>
<option value="3">Draw</option>
</select>
<hr/>
<table summary="">
<tr>
<td>Mouse X =</td><td id="mposX"></td>
<td> - </td>
<td>Mouse Y =</td><td id="mposY"></td>
<td> - </td>
<td>Points # =</td><td id="pNum"></td>
<td> - </td>
<td>Mouse over point =</td><td id="mouP"></td>
</tr>
</table>
<hr/>
<p>Add Point : clicca sull'area per aggiungere un punto</p>
<p>Remove Point : clicca sul punto per cancellarlo</p>
<p>Draw : clicca su un punto (cambia colore), poi clicca su un altro punto</p>
<hr/>
<p>Clear : cancella tutto</p>
<p>Reset : ridisegna tutti i punti</p>
<script language="JavaScript" type="text/javascript">
<!--
$("body").mousemove(function(e) {
var c = document.getElementById( "mon_canvas" );
var rect = c.getBoundingClientRect ();
mouseX = parseInt(e.pageX - rect.left);
mouseY = parseInt(e.pageY - rect.top);
document.getElementById('mposX').innerHTML = mouseX;
document.getElementById('mposY').innerHTML = mouseY;
if (checkPoint() != -1) {
document.getElementById('mouP').innerHTML = "yes";
} else {
document.getElementById('mouP').innerHTML = "no";
}
showPointsList();
})
//-->
</script>
</body>
</html>
Rispondi quotando