eventi su canvas

**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

Discussione: eventi su canvas

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio