eventi su canvas

**maluz1** · 30-05-2014, 18:42

salve a tutti

sto cercando di creare una pagina web che simuli piuttosto approssimativamente il noto programma paint.

la "tela" su cui disegnare è ovviamente una canvas, creata con l'apposito tag introdotto nell'html5.
il problema è che qualsiasi evento che aggiungo alla canvas, non si verifica. ho provato a usare sia addEventListener sia l'inline onclick="..." sia object.onclick=... ma nessuno di questi si è dimostrato funzionante. Qui la parte di codice che presenta il problema:

codice:

<canvas id="IDcanvas"> </canvas>   //nel .html

tutto ciò viene invece attivato nel body onload.

codice:

function setDrawing()
{
	var Ecanvas= window.document.getElementById("IDcanvas");
        ...//in realtà ci sarebbe molto altro
	var canvHeight= window.innerHeight - 60;
	var canvWidth= window.innerWidth - 60;
	
	Ecanvas.setAttribute("width", canvWidth );
	Ecanvas.setAttribute("height", canvHeight );
	
	var new_sheet= Ecanvas.getContext("2d");
	
	//qui dovrei aggiungere l'evento
}

in sintesi mi servirebbe sapere come aggiungere un evento( come onclick ) sulla canvas
Grazie

**cavicchiandrea** · 30-05-2014, 19:30

Qui http://www.html.it/guide/canvas-guida-pratica/ hai letto?

**maluz1** · 30-05-2014, 20:50

non avevo letto però ho cercato un po su internet e ho trovato, oltre alla documentazione di w3c e altro, video tutorial di un canale italiano che si chiama fcamuso e li ho trovato sufficiente materiale per portare avanti questo progetto. il problema è che addeventlistener nel mio codice non funziona e non capisco il perchè.

grazie per la risposta

**tampertools** · 30-05-2014, 21:11

fa vedere il codice

Comunque in molti casi puoi sostituire

codice:

oggetto.addEventListener("evento", function () {});

con

codice:

oggetto.onevento = function () {};

PS. Su alcune versioni di ie puoi usare

codice:

oggetto.attachEvent("onevento", function () {});

**maluz1** · 31-05-2014, 08:12

In realtà ho già provato con oggetto.onevento ma il risultato migliore è stato il verificarsi dell' evento solamente appena viene caricato il body, poi non funziona più

appena torno a casa posto il codice

grazie ancora

**maluz1** · 31-05-2014, 14:25

il progetto è ancora in fase di sviluppo, quindi per adesso è ancora piuttosto leggero. Vi posto comunque tutto il codice, anche se per esempio la palette( e altro ) non dovrebbe interessarvi.

html:

codice:

<!DOCTYPE html>
<html>
  <head>
    <link href="stylesheet.css" rel="stylesheet" type="text/css">
    <script src="ExternJava.js" type="text/javascript"></script> 
  <title> PAINT </title>
  </head>
  <body style="margin: 0px; padding: 0px; background-color: grey;" onload="setDrawing();">  
      <div id="IDmain_menu">
        <div class="menu_option" id="IDmenu_file" align="center" onmouseover="menu_option_over('IDmenu_file');" onmouseout="menu_option_out('dyn_menu');">
          File
        </div>
      </div>
      
      <div id="IDpalette">
      	<div class="palette_element" id="pencil" onclick="setTool(0);" onmouseover="change_to_pointer('pencil');"> <img src="images/pencil.jpg" class="imageElPalette"/> </div>
      	<div class="palette_element" id="rubber" onclick="setTool(1);" onmouseover="change_to_pointer('rubber');"> <img src="images/rubber.jpg" class="imageElPalette"/> </div>
      	<div class="palette_element" id="circle" onclick="setTool(2);" onmouseover="change_to_pointer('circle');"> <img src="images/circle.jpg" class="imageElPalette"/> </div>
      	<div class="palette_element" id="square" onclick="setTool(3);" onmouseover="change_to_pointer('square');"> <img src="images/square.jpg" class="imageElPalette"/> </div>
      	
      	<select id="IDcolor" name="Color_pen" style="width: 80%; position: absolute; top: 50%; left: 10%;">
      		<option value="red"> Rosso </option>
      		<option value="yellow"> Giallo </option>
      		<option value="red"> Verde </option>
      		<option value="red"> Nero </option>
      		<option value="red"> Blu </option>
      		<option value="custom"> Personalizzato </option>
      	</select>
      	
      	<input type="text" id="IDwidth" style="position: absolute; width: 80%; left: 10%; top: 55%; "/>
      </div>
      <div id="expandButton" onclick="click_expand_button();" onmouseover="expand_button_hover();" onmouseout="window.document.getElementById('expandButton').style.opacity= 1;"> < </div>
      
      <div id="sheet">
      	<canvas id="IDcanvas"> </canvas>
  	  </div>	
  </body>
</html>

javascript:

codice:

const MAX_OPTION= 2;
var btnExpand= 1;
var menu_exist= 0;


var penStyle= {
	Color: "black",
	Width: 1
}


var Tools= {
	Pencil: 0,
	Rubber: 0,
	Circle: 0,
	Square: 0
}


function setDrawing()
{
	var elPalette= window.document.getElementsByClassName("palette_element");
	var IDpalette= window.document.getElementById("IDpalette");
	var Ecanvas= window.document.getElementById("IDcanvas");
	var index= 0;
	
	for( var r= 0; r < (elPalette.length/2 + elPalette.length%2); ++r )
	{
		for( var c= 0; c < 2; ++c )
		{
			index= r*2 + c;
			elPalette[index].style.height= Math.floor(elPalette[index].offsetWidth) + "px";
			elPalette[index].style.top= Math.floor(0.05*IDpalette.offsetHeight*(r+1) + elPalette[index].offsetHeight*r) + "px";
			elPalette[index].style.left= Math.floor(0.12*IDpalette.offsetWidth*(c+1) + elPalette[index].offsetWidth*c) + "px";
		}	
	}
	
	var canvHeight= window.innerHeight - 60;
	var canvWidth= window.innerWidth - 60;
	
	Ecanvas.setAttribute("width", canvWidth );
	Ecanvas.setAttribute("height", canvHeight );
	
	var new_sheet= Ecanvas.getContext("2d");
	
	new_sheet.fillStyle= "#FF0000";
	new_sheet.fillRect( 20, 30, 400, 500 );
	
	//Ecanvas.onclick= draw_Down();
}


function menu_option_over( elementID )
{	
	var option_menu= window.document.getElementById( elementID );
	var submenu= window.document.createElement("div");
	window.document.body.appendChild(submenu);
	submenu.setAttribute("id", "dyn_menu");
	submenu.setAttribute("onmouseover", "setMenu_exist(1);");
	submenu.setAttribute("onmouseout", "setMenu_exist(0);");
	//submenu.addEventListener("mouseover", setMenu_exist(1), false);
	//submenu.addEventListener("mouseout", setMenu_exist(0), false);


	submenu.style.position= "absolute";
	submenu.style.width= option_menu.clientWidth * MAX_OPTION + "px";
	submenu.style.height= option_menu.clientHeight * MAX_OPTION + "px";
	submenu.style.top= option_menu.clientHeight + "px";
	submenu.style.left= window.document.getElementById("IDpalette").offsetWidth + window.document.getElementById("IDpalette").offsetLeft + "px";
	submenu.style.border= "2px solid white";
	submenu.style.background= "black";
	
	create_menu_items("dyn_menu", "Nuovo", "salva");
}	


function setMenu_exist( setter )
{ menu_exist= setter; }


function create_menu_items()
{
	const SIZE_ARG= arguments.length-1;
	var current_menu= window.document.getElementById( arguments[0] );
	var items= new Array(SIZE_ARG);
	
	for( var i= 0; i < SIZE_ARG; ++i )
	{
		items[i]= window.document.createElement("div");
		current_menu.appendChild(items[i]);
		items[i].setAttribute("id", "option" + i );
		items[i].setAttribute("align", "center");
		items[i].setAttribute("onmouseover", "setMenu_exist(1);");
		items[i].setAttribute("onmouseout", "setMenu_exist(0);");
		//items[i].addEventListener("mouseover", setMenu_exist(1), false);
		//items[i].addEventListener("mouseout", setMenu_exist(0), false);
		
		items[i].style.position= "absolute";
		items[i].style.width= "100%";
		items[i].style.height= "30px";
		items[i].style.top= i*30 + "px";
		items[i].style.fontSize= "20px";
		items[i].style.color= "white";
		window.document.getElementById("option" + i).innerHTML= arguments[i+1];
		
	}
}


/*function option_hover( elementID )
{
	var cur_opt= window.document.getElementById(elementID);
	cur_opt.style.background= "rgba(255, 255, 255, 0.4)";
}*/


/*function check_dyn_menu_hover( elementID )
{
	window.alert(event.offsetX);
	
	var checking= true;		
	var cur_menu= window.document.getElementById( elementID );
	
	if (event.offsetX < 0 || event.offsetX > cur_menu.offsetWidth)
		checking= false;
		
	if (event.offsetY < 30 || event.offsetY > (30 + MAX_OPTION*30))	
		checking= false;
	
	return checking;
}*/


function menu_option_out( elementID )
{
	var del_menu= window.document.getElementById( elementID );
	
	if( /*del_menu!= null ||*/ menu_exist== 0 )
		window.document.body.removeChild(del_menu);
}


var IDinterval= 0;


function click_expand_button()
{
	IDinterval= window.setInterval(palette_expand, 1 );
}


function expand_button_hover()
{
	var btn= window.document.getElementById("expandButton");
	
	btn.style.cursor= 'pointer';
	btn.style.opacity= 0.8;
}


function change_to_pointer( elementID )
{
	window.document.getElementById(elementID).style.cursor= "pointer";
}


function palette_expand()
{
	var palette= window.document.getElementById("IDpalette");
	var button_expand= window.document.getElementById("expandButton");
	var first_menu= window.document.getElementById("IDmain_menu");
	
	if( btnExpand== 1)
	{
		palette.style.left= (palette.offsetLeft - 1) + "px";
		button_expand.style.left= (button_expand.offsetLeft - 1) + "px";
		first_menu.style.left=  (first_menu.offsetLeft - 1) + "px";
	}
	
	if( btnExpand== -1)
	{
		palette.style.left= ( palette.offsetLeft + 1 ) + "px";
		button_expand.style.left= ( button_expand.offsetLeft + 1 ) + "px";
		first_menu.style.left=  (first_menu.offsetLeft + 1) + "px";
	}
	
	if( palette.offsetLeft== -(palette.clientWidth) )
	{
		window.clearInterval(IDinterval);
		button_expand.innerText= ">";
		btnExpand= -1;
	}
	
	if ( palette.offsetLeft== 0 ) 
	{
		window.clearInterval(IDinterval);
		button_expand.innerText= "<";
		btnExpand= 1;
	}
}


function setTool( mod )
{
	Tools.Pencil= 0; Tools.Rubber= 0; Tools.Circle= 0; Tools.Square= 0;
	
	switch( mod )
	{
		case 0: Tools.Pencil= 1; break;
		case 1: Tools.Rubber= 1; break;
		case 2: Tools.Circle= 1; break;
		case 3: Tools.Square= 1; break;
	}
}


function draw_Down()
{
	//penStyle.Color= window.getElementById("IDcolor").value;
	window.alert("ciao");
	//penStyle.Width= 
}

css:

codice:

html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}


#IDpalette{
    position: absolute;
    background-color: red;
    width: 10%;
    top: 0px;
    height: 100%;
    z-index: 0;
}


#expandButton{
	position: absolute;
	width: 30px;
	height: 60px;
	bottom: 0px;
	left: 10%;
	background-color: red;
	text-align: center;
	line-height: 65px;
	font-size: 40px;
	font-weight: bold;
}


#sheet{
	width: 100%;
	height: 100%;
	position: absolute; 
	background-color: grey;
	z-index: -1;
}


#IDmain_menu{
    position: absolute;
    background-color: black;
    height: 30px;
    width: 100%;
    left: 10%;
}


#IDcanvas{
	position: absolute;
	top: 40px;
	left: 40px;
	background-color: white;
}


.menu_option{
    position: relative;
    height: 100%;
    width: 5%;
    border: 2px solid white;
    border-bottom-width: 0px;
    border-top-width: 0px;
    color: white;
    font-size: 20px;
}


.palette_element{
	position: absolute;
	width: 32%;
	border: 1px solid black;
	margin: 0px;
}


.imageElPalette{
	position: absolute;
	width: 100%;
	height: 100%;
}

ringrazio chiunque abbia voglia di darci un occhiata

**maluz1** · 01-06-2014, 08:48

nella guida di html.it sull'uso delle canvas dice di usare la funzione querySelector ma a me neanche funziona

**cavicchiandrea** · 01-06-2014, 09:19

Io migrerei ad jquery e installerei uno script (in rete qualcosa si trova) che simula un foglio da disegno, invece che ricrearlo da zero (avendo poco esperienza), se il consiglio non è stato gradito come non detto e buon proseguo.

**maluz1** · 01-06-2014, 09:25

proprio stamattina ho cominciato a studiarmi il jquery infatti. be grazie ancora dell'aiuto

**maluz1** · 02-06-2014, 23:13

scusatemi se ripropongo la conversazione, ma aprirne un altra non aveva senso siccome ho solo bisogno di uno script che simuli un foglio da disegno( cioè quello che cavicchiandrea mi ha suggerito ). sapreste consigliarmene uno?
grazie

Discussione: eventi su canvas

Strumenti discussione

Ricerca discussione

Visualizza

eventi su canvas

Permessi di invio