Petit logiciel de dessin, retouche avec canvas

Télécharger le projet
Commenter

Description

pour cette source j'ai exploiter la balise canvas afin de crée un petit logiciel de dessin je dit petit car il lui manque pas mal de choses le désigne lui aussi est critiquable mais un projet dans ce genre pour une personne seul demande beaucoup de temps, étant arrivé a presque mille lignes je me suis dit qu'il etait temp de le mettre en ligne

je met un lien pour testé car les operations sur les pixels demandes a ce que le script soit en ligne pour fonctionner a moins d'utiliser ei9 ou 10

http://kiwik.goldzoneweb.info/scriptsite/paink/paink.html

attention il peut y avoir des espace dans le lien qui doivent etre supprimé

fonctionne bien avec ie 9 10 et Firefox il y a un bug sur chrome avec les ombres et pour opéra ne support pas le drag & drop et le rendu sur les opérations sur les pixels n'est pas conforme.

Source / Exemple : 


<script> 

var decX;
var decY;
var tbdata= new  Array;
var datatb=-1;
var refintermed=0;

function paink(e){

		this.elem=document.getElementById('cvs');
		this.contexte=document.getElementById('cvs').getContext('2d');
		this.gauche=0;
		this.haut=0;
		this.hauteur=document.getElementById('cvs').height;
		this.largeur=document.getElementById('cvs').width;

}

function godrag(e){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var Obj =  e.currentTarget;

	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;

	decX=X-Obj.offsetLeft;
	decY=Y-Obj.offsetTop;
	
	e.dataTransfer.setData('Text', Obj.src);
	e.dataTransfer.effectAllowed = 'copy';
	e.dataTransfer.dropEffect = 'move';
}

function Dragov(e) {

	e.preventDefault();
}

function drop(e) {

	if(e){
		e.preventDefault();
		var dde=(navigator.vendor) ? document.body : document.documentElement;
		var X =e.clientX + dde.scrollLeft;
		var Y =e.clientY + dde.scrollTop;

		if ( e.dataTransfer.files && e.dataTransfer.files.length > 0) {

			if (!e) {
				var fichier = document.getElementById('fileinput').files;
			}
			else {
				var fichier = e.dataTransfer.files;
			}
			if (fichier[0].type.match('image.*')) {
				
				var charge=new FileReader();
				charge.readAsDataURL(fichier[0]);
				
				charge.onloadend = function(e){
					var ctx = paink1.contexte;
					var ima=new Image();
					ima.src=e.target.result;
					ima.onload=function(){
						var dcx=X-document.getElementById('cvs').offsetLeft-(ima.width/2);
						var dcy=Y-document.getElementById('cvs').offsetTop-(ima.height/2);
						ctx.drawImage(ima, dcx, dcy);
						refanul();
					}
				}
			}
		}
		else {
			var draaag=e.dataTransfer.getData('Text');

			var imgz = new Image();
			imgz.src = draaag;
			
			imgz.onload = function(){
				var ctx = paink1.contexte;
				var dcx=X-decX-document.getElementById('cvs').offsetLeft;
				var dcy=Y-decY-document.getElementById('cvs').offsetTop;
				ctx.drawImage(imgz, dcx, dcy);
				refanul();
			}	
		}
	}
	
	else{
		
		var fichier = document.getElementById('fileinput').files;

		if (fichier[0].type.match('image.*')) {
			
			var charge=new FileReader();
			charge.readAsDataURL(fichier[0]);
			charge.onloadend = function(e){
				var ctx = paink1.contexte;
				var ima=new Image();
				ima.src=e.target.result;
				ima.onload=function(){
					raz()
					ctx.drawImage(ima, 0, 0);
					refanul();
				}
			}
		}
	}
}

function sauver() {  
	var moncanvas = document.getElementById("cvs");  
	var base64 = moncanvas.toDataURL("image/png");  
	var gema = document.createElement("img");  
	gema.src = base64;
	var rb=document.createElement("br");
	document.body.appendChild(rb); 
	document.body.appendChild(gema);  
} 

function raz() {

	var ctx = paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	ctx.clearRect(0,0,largeur,hauteur);
	for(var i=tbdata.length; i>0; i--){
		tbdata.pop();
	}
	datatb=-1;
}

function evtrait(e){

	e.currentTarget.addEventListener("mousemove",trait, false);
	e.currentTarget.addEventListener("mouseup",evfin, false);
	document.getElementById('cvs').getContext('2d').beginPath();
}

function evfin(e){

	e.currentTarget.removeEventListener("mousemove",trait, false);
	e.currentTarget.removeEventListener("mouseup",trait, false);
	formombre();
	refanul();
}

function trait(e){
	
	var ctx = paink1.contexte;
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;
	var dcx=X-document.getElementById('cvs').offsetLeft;
	var dcy=Y-document.getElementById('cvs').offsetTop;
	ctx.shadowOffsetX =0;
	ctx.shadowOffsetY =0;
	ctx.shadowBlur =0;
	ctx.lineTo(dcx, dcy);
	ctx.stroke();
}

function couleur(lui){

	var coucoul=window.getComputedStyle(lui,null).getPropertyValue('background-color');
	document.getElementById('cvs').getContext('2d').fillStyle = coucoul;
	document.getElementById('cvs').getContext('2d').strokeStyle = coucoul;
	document.getElementById('petpi').style.backgroundColor = coucoul;
}

function couleur2(lui){

	var coucoul=document.getElementById('leinput').value;
	document.getElementById('cvs').getContext('2d').fillStyle = coucoul;
	document.getElementById('cvs').getContext('2d').strokeStyle = coucoul;
	document.getElementById('petpi').style.backgroundColor = coucoul;
}

function traitaille(lui){

	document.getElementById('cvs').getContext('2d').lineWidth = lui.value;
	document.getElementById('cvs').getContext('2d').lineCap='round';
}

function refanul(){

	if(document.getElementById("cadre")){
		paink1.largeur=document.getElementById('cvs').width;
		paink1.hauteur=document.getElementById('cvs').height;
		paink1.gauche=0;
		paink1.haut=0;
		document.body.removeChild(document.getElementById("cadre"));
	}

	if(datatb+1!=tbdata.length){
		var ret=tbdata.length-datatb-1;
		for(var i=ret; i>=1; i--){
			tbdata.pop();
		}
	}
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	var ctx=paink1.contexte;
	tbdata.push(ctx.getImageData(0,0,largeur,hauteur));
	datatb+=1;
}

function annuler(){

	var ctx=paink1.contexte;
	if(datatb>=0){
		datatb-=1;
		if(datatb==-1){
			var largeur=paink1.largeur;
			var hauteur=paink1.hauteur
			ctx.clearRect(0,0,largeur,hauteur);
			return false;
		}
		ctx.putImageData(tbdata[datatb],0,0);
	}
}

function refaire(){

	if(datatb<tbdata.length-1){
		datatb+=1;
		var ctx=paink1.contexte;
		ctx.putImageData(tbdata[datatb],0,0);
	}
}

function nb() {
	
	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	var idata = ctx.getImageData( paink1.gauche, paink1.haut, largeur, hauteur);
	var data = idata.data;
	for(var i = 0; i < data.length; i+=4){
		var r = data[i];
		var g = data[i+1];
		var b = data[i+2];
		var noireblanc = (r+g+b)/3;
		data[i] = noireblanc;
		data[i+1] = noireblanc;
		data[i+2] = noireblanc;
	}
	idata.data = data;
	ctx.putImageData(idata, paink1.gauche, paink1.haut);
	refanul();
}

function gomme(){

	document.getElementById('cvs').getContext('2d').fillStyle = 'rgba(255,255,255,0.5)';
	document.getElementById('cvs').getContext('2d').strokeStyle = 'rgba(255,255,255,0.5)';
}

function lumiaire(valintermed){

	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	
	var idata = ctx.getImageData(paink1.gauche, paink1.haut, largeur, hauteur);
	var data = idata.data;
	
	for(var i = 0; i < data.length; i+=4){
		data[i] = refintermed[i]+valintermed;
		data[i+1] = refintermed[i+1]+valintermed;
		data[i+2] = refintermed[i+2]+valintermed;
	}
	idata.data = data;
	ctx.putImageData(idata, paink1.gauche, paink1.haut);
}

function lume(){
	
	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	refintermed=ctx.getImageData(paink1.gauche, paink1.haut, largeur, hauteur).data;
	var el=document.getElementById('lumi');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		refanul()
		el.style.display='none';
	}	
}

function coulplus(valintermed,couleur){

	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	
	var idata = ctx.getImageData( paink1.gauche, paink1.haut, largeur, hauteur);
	var data = idata.data;
	
	for(var i = 0; i < data.length; i+=4){
		
		if(couleur=='bleu'){
			data[i] = refintermed[i]+valintermed;
		}
		if(couleur=='rouge'){
			data[i+1] = refintermed[i+1]+valintermed;
		}
		if(couleur=='vert'){
			data[i+2] = refintermed[i+2]+valintermed;
		}
	}
	idata.data = data;
	ctx.putImageData(idata, paink1.gauche, paink1.haut);
}

function coule(){

	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	refintermed=ctx.getImageData(paink1.gauche, paink1.haut, largeur, hauteur).data;
	var el=document.getElementById('fencolorimetre');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		refanul()
		el.style.display='none';
	}	
}

function evcadre(e){

	e.preventDefault();
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	omt =e.clientY + dde.scrollTop;
	oml =e.clientX + dde.scrollLeft;
	
	if(!document.getElementById("cadre")){

		var cd=document.createElement('div');
		cd.setAttribute("id",'cadre');
		cd.style.position='absolute';
		cd.style.left=e.clientX+"px";
		cd.style.top=e.clientY+"px";
		cd.style.minWidth  =5+"px";
		cd.style.minHeight =5+"px";
		cd.style.borderStyle='solid';
		cd.style.borderSize=1+'px'
		document.body.appendChild(cd)
	}
	
	dde.addEventListener("mousemove",evcadretaille, false);
	dde.addEventListener("mouseup",evcadrefin, false);
}

function evcadretaille(e){
	
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var cd=document.getElementById('cadre');
	var omtt=e.clientY + dde.scrollTop;
	var omll=e.clientX + dde.scrollLeft;

	if(omtt-omt>0){
		cd.style.height = omtt-omt+"px";
		cd.style.top = omt+"px";
	}
	else{
		cd.style.height = (Math.abs(omtt-omt))+"px";
		cd.style.top = omt-(omt-omtt)+"px";
	}

	if(omll-oml>0){
		cd.style.width = omll-oml+"px";
		cd.style.left = oml+"px";
	}
	else{
		cd.style.width = Math.abs(omll-oml)+"px";
		cd.style.left = oml-(oml-omll)+"px";
	}
}

function evcadrefin(e){

	document.documentElement.removeEventListener("mousemove",evcadretaille, false);
	document.documentElement.removeEventListener("mouseup",evcadrefin, false);
	var cadre=document.getElementById('cadre');
	paink1.largeur=cadre.offsetWidth;
	paink1.hauteur=cadre.offsetHeight;
	paink1.gauche=cadre.offsetLeft-document.getElementById('cvs').offsetLeft;
	paink1.haut=cadre.offsetTop-document.getElementById('cvs').offsetTop;
	}
	
	
function recadre(){	

	var ctx=paink1.contexte;
	var donneimage = ctx.getImageData( paink1.gauche, paink1.haut, paink1.largeur, paink1.hauteur);
	var largeurcv=paink1.largeur;
	var hauteurcv=paink1.hauteur
	ctx.clearRect(0, 0, paink1.largeur, paink1.hauteur);
	document.getElementById('cvs').width=paink1.largeur;
	document.getElementById('cvs').height=paink1.hauteur;
	document.getElementById('cvs').parentNode.style.width=paink1.largeur+"px";
	document.getElementById('cvs').parentNode.style.height=paink1.hauteur+"px";
	ctx.putImageData(donneimage, 0, 0);
	refanul();
}

function pipette(e){
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var ctx=paink1.contexte;
	var X =e.clientX + dde.scrollLeft-document.getElementById('cvs').offsetLeft;
	var Y =e.clientY + dde.scrollTop-document.getElementById('cvs').offsetTop;
	var idata = ctx.getImageData(X,Y,1,1);
	var data = idata.data;
	var rg='rgb('+data[0]+','+data[1]+','+data[2]+')';
	document.getElementById('petpi').style.backgroundColor=rg;
	document.getElementById('cvs').getContext('2d').fillStyle = rg;
	document.getElementById('cvs').getContext('2d').strokeStyle = rg;
}

function dispatche(outil){

	var ctx = paink1.elem;

	if(outil=='pipette'){
		ctx.setAttribute("onmousedown","pipette(event)");
	}
	
	if(outil=='cadre'){
		ctx.setAttribute("onmousedown","evcadre(event)");
	}
	
	if(outil=='trait'){
		ctx.setAttribute("onmousedown","evtrait(event)");
	}
	
	if(outil=='pot'){
		ctx.setAttribute("onmousedown","pot(event)");
	}
	
}

function texte(e){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	omt =e.clientY + dde.scrollTop;
	oml =e.clientX + dde.scrollLeft;
	
	if(document.getElementById('texte')==null){
		
		var cd=document.createElement('pre');
		cd.setAttribute("id",'texte');
		cd.style.position='absolute';
		cd.style.left=50+"px";
		cd.style.top=50+"px";
		cd.style.borderStyle='solid';
		cd.style.borderSize=1+'px'
		cd.addEventListener("mousedown",kdrag.sp, false);
		var txt = document.createTextNode('texte');
		cd.appendChild(txt);
		document.body.appendChild(cd);
	}
	
	var el=document.getElementById('xetes');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
	}
	else{
		el.style.display='none';
	}	
	
}

function chtxt(lui){
	document.getElementById('texte').firstChild.nodeValue=lui.value;
}

function stylefont(lui){
	document.getElementById('texte').style.fontFamily=lui.value;
}

function textefin(){

	var lui=document.getElementById('texte');
	var taille=parseInt(window.getComputedStyle(lui,null).getPropertyValue('font-size'));
	var famille=window.getComputedStyle(lui,null).getPropertyValue('font-family');
	var posx=document.getElementById('texte').offsetLeft-document.getElementById('cvs').offsetLeft;
	var posy=document.getElementById('texte').offsetTop-document.getElementById('cvs').offsetTop;
	var ctx = paink1.contexte;
	ctx.font = (taille-2)+"pt "+famille;
	ctx.textBaseline="top";
	ctx.fillText(document.getElementById('texte').firstChild.nodeValue, posx, posy);
	document.body.removeChild(lui);
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 0;
	ctx.shadowBlur = 0;
	document.getElementById('xetes').style.display='none';
	refanul();
}

//////////////////////////////
///////scroll barre//////////
////////////////////////////

var kscroll={

elem:null,
cible:null,

ajoutevent:function(e,cause){
		
		this.elem=e.currentTarget.childNodes[1]
		this.cible=cause;
		this.process(e);
		e.preventDefault();
		document.documentElement.addEventListener("mousemove", kscroll.process, false);
		document.documentElement.addEventListener("mouseup", kscroll.retireevent, false);
	},

	retireevent :function(){

		document.documentElement.removeEventListener("mousemove", kscroll.process, false);
		document.documentElement.removeEventListener("mouseup", kscroll.retireevent, false);
	},

	process :function(e) {
		
		var db=kscroll.elem;	  
		var ixe =e.clientX-db.parentNode.parentNode.offsetLeft-db.parentNode.offsetLeft;
		var taille=db.parentNode.offsetWidth-db.offsetWidth;
		var fac=ixe/taille;
		fac = fac>1 ? 1 : fac;
		fac = fac<0 ? 0 : fac;
		kscroll.gescroll(fac,taille);
		db.style.marginLeft=fac*taille+'px';
	},

	gescroll :function(fac,taille){

		if(kscroll.cible=='texte'){

			var valeur=fac*taille;
			document.getElementById("texte").style.fontSize=valeur+16+'px';
		}

		else if(kscroll.cible=='rouge' || kscroll.cible=='vert' || kscroll.cible=='bleu'){
			valeur=((fac*taille)-(taille*0.5))*2;
			coulplus(valeur,kscroll.cible);
		}
		
		else if(kscroll.cible=='prouge' || kscroll.cible=='pvert' || kscroll.cible=='pbleu'){
			valeur=fac*taille;
			palcoul(valeur)
		}

		else if(kscroll.cible=='lumiaire'){

			valeur=((fac*taille)-(taille*0.5));
			lumiaire(valeur);
		}

		else if(kscroll.cible=='ombrex' || kscroll.cible=='ombrey'){

			valeur=((fac*taille)-(taille*0.5));
			formombre(valeur);
		}

		else if(kscroll.cible=='ombref'){

			valeur=(fac*taille);
			formombre(valeur);
		}

	},

}

//////////////////////////////
/////palette de couleur//////
////////////////////////////

function selecte(ev){
	ev.preventDefault();
}

function palcoul(valeur){

	var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

		var el2=tabcode[Math.floor((valeur)/16)];
		el=tabcode[Math.round(((valeur)%16))];
		el=el2+el;
		
		var ch=document.getElementById('leinput').value;

		switch (kscroll.cible){
		case "prouge": el=ch.substring(0,1)+el+ch.substring(3,7); break;
		case "pvert": el=ch.substring(0,3)+el+ch.substring(5,7); break;
		case "pbleu": el=ch.substring(0,5)+el; break;
		}
		document.getElementById('leinput').value=el;
		document.getElementById('dv').style.backgroundColor=el;
		}

function arcenmouse(e){

	dde=(navigator.vendor) ? document.body : document.documentElement;
	var lui=document.getElementById('arccoul')
	var j =Math.floor(e.clientX + dde.scrollLeft-lui.parentNode.parentNode.offsetLeft-lui.parentNode.offsetLeft);
	var el=document.getElementById('dv')

	if (j<=42){
		var i=Math.floor(6*j)
		el.style.backgroundColor='rgb(255,'+i+',0)'
	}
	else if (j<=85){
		var i=256-Math.floor(6*(j-42))
		el.style.backgroundColor='rgb('+i+',255,0)'
	}
	else if (j<=128){
		var i=Math.floor(6*(j-85))
		el.style.backgroundColor='rgb(0,255,'+i+')'
	}
	else if (j<=170){
		var i=256-Math.floor(6*(j-128))
		el.style.backgroundColor='rgb(0,'+i+',255)'
	}
	else if (j<=213){
		var i=Math.floor(6*(j-170))
		el.style.backgroundColor='rgb('+i+',0,255)'
	}
	else if (j<=256){
		var i=256-Math.floor(6*(j-213))
		el.style.backgroundColor='rgb(255,0,'+i+')'
	}
	gesticoul()
}

function arcenevent(){
	var dde=document.documentElement
	dde.addEventListener("mousemove",arcenmouse, false);
	dde.addEventListener("mousedown", selecte, false);
	dde.addEventListener("mouseup",arcenout, false);

}

function arcenout(){
	var dde=document.documentElement
	dde.removeEventListener("mousemove",arcenmouse, false);
	dde.removeEventListener("mousedown", selecte, false);
	dde.removeEventListener("mouseup",arcenout, false);

}

function gesticoul(ev){

	var tabcode=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

	var val=document.getElementById('dv').style.backgroundColor;
	
	if(val.substr(0,1)=='#'){
		val=[parseInt(val.substr(1,2),16),parseInt(val.substr(3,2),16),parseInt(val.substr(5,2),16)]
	}
	else{
		val=val.replace(/rgb\(/gi,"");
		val=val.replace(/\)/gi,"");
		val=val.split(",");
	}
	
	var allelem=document.getElementById('fencouleur').getElementsByClassName('curscrolcoul');
	

	allelem[0].style.marginLeft=parseInt(val[0])+'px';
	allelem[1].style.marginLeft=parseInt(val[1])+'px';
	allelem[2].style.marginLeft=parseInt(val[2])+'px';
	var valcoul='';
	for (var i=0; i<=2; i++){
		var el2=tabcode[Math.floor((val[i]/16))];
		var el=tabcode[Math.round((val[i]%16))];
		valcoul+=el2+el;
	}
	document.getElementById('leinput').value='#'+valcoul;
}

//////////////////////////////
/////////////////////////////

function ombre(){

	var el=document.getElementById('boiteombre');
	
	if(el.style.display=='none' || el.style.display==''){
		el.style.display='block';
		var ctx = document.getElementById('omb').getContext('2d');
		ctx.fillRect(25,25,50,50);
	}
	else{
		el.style.display='none';
	}	
}

function formombre(valeur){
	
	var el=document.getElementById('boiteombre').getElementsByTagName('input');
	var ctx = document.getElementById('omb').getContext('2d');
	ctx.clearRect(0,0,100,100);
	
	if(kscroll.cible=='ombrex'){
		ctx.shadowOffsetX = valeur;
	}
	else if(kscroll.cible=='ombrey'){
		ctx.shadowOffsetY = valeur;
	}
	else if(kscroll.cible=='ombref'){
		ctx.shadowBlur = valeur/2;
	}
	ctx.shadowColor = el[0].value=='' ? "#000000" : el[0].value;
	ctx.fillRect(25,25,50,50);

}

function validombre(){

	var el=document.getElementById('boiteombre').getElementsByTagName('input');
	var cty = document.getElementById('omb').getContext('2d');
	var ctx = paink1.contexte;
	ctx.shadowOffsetX = cty.shadowOffsetX;
	ctx.shadowOffsetY = cty.shadowOffsetY;
	ctx.shadowBlur = cty.shadowBlur;
	ctx.shadowColor = el[0].value=='' ? "#000000" : el[0].value;
	document.getElementById('boiteombre').style.display='none';
}

//////////////////////////////
///////drag drop/////////////
////////////////////////////

var kdrag={

elemdrag:null,
decx:null,
decy:null,
rar:true,
ttb:[],
	nb_de_fenetre:0,

sp:function(s){

		if(kdrag.rar && kdrag.elemdrag==null){
			
			if(arguments.length==1){
				kdrag.elemdrag=s.currentTarget;
			}
			else{
				kdrag.elemdrag=s.currentTarget.parentNode;
			}
			
			var dbe=(navigator.vendor) ? document.body : document.documentElement;

			kdrag.decx=s.clientX + dbe.scrollLeft - kdrag.elemdrag.offsetLeft;
			kdrag.decy=s.clientY + dbe.scrollTop - kdrag.elemdrag.offsetTop;

			s.preventDefault();
			document.documentElement.addEventListener("mousemove", kdrag.posi, false);
			document.documentElement.addEventListener("mouseup", kdrag.sp, false);

			kdrag.rar=false;
		}

		else if(kdrag.rar==false && kdrag.elemdrag!=null){
			document.documentElement.removeEventListener("mousemove", kdrag.posi, false);
			s.currentTarget.removeEventListener("mouseup", kdrag.sp, false);
			kdrag.elemdrag=null;
			kdrag.rar=true;
		}
	},

posi:function(s){

		var dde=(navigator.vendor) ? document.body : document.documentElement;

		var setX =s.clientX + dde.scrollLeft;
		var setY =s.clientY + dde.scrollTop;
		kdrag.elemdrag.style.left=(setX-kdrag.decx)+"px";
		kdrag.elemdrag.style.top=(setY-kdrag.decy)+"px";
	},
	
plans:function(e){   // fonction de gestion de position des fenetre au niveau du zindex//

		var pp=e.currentTarget;
		kdrag.ttb[(kdrag.nb_de_fenetre-1)]=pp;
		for(mul=parseInt(pp.style.zIndex)+1;mul<kdrag.nb_de_fenetre;mul++){
			kdrag.ttb[mul-1]=kdrag.ttb[mul];
			kdrag.ttb[mul].style.zIndex=(mul-1);
		}
	},
	
	init_drag:function(){

		var allElements = document.getElementsByClassName("cdrag");
		for (var i = 0; i< allElements.length; i++){
			kdrag.ttb.push(allElements[i].parentNode);
			allElements[i].parentNode.addEventListener("mousedown",kdrag.plans, false);
			allElements[i].parentNode.style.zIndex=i;
		}
		kdrag.ttb.push("ttfin");
		kdrag.nb_de_fenetre=kdrag.ttb.length;
	}
}
///////////////////////////////////////
//////////////////////////////////////
function miroir(sens){

	var ctx=paink1.contexte;
	var largeur=paink1.largeur;
	var hauteur=paink1.hauteur
	var gauche=paink1.gauche;
	var haut=paink1.haut;
	
	var idata = ctx.getImageData(gauche, haut, largeur, hauteur);
	var data = idata.data;
	var idata2 = ctx.getImageData(gauche, haut, largeur, hauteur);
	var data2 = idata2.data;
	
	if(sens=="h"){
		for(var i = 0; i < hauteur ; i++) {
			for(var j = 0; j < largeur*4; j++){
				data2[j+(i*largeur*4)] = data[(largeur*4*(hauteur-i-1))+j];
			}
		}
	}
	
	if(sens=="v"){
		for(var i = 0; i < hauteur ; i++) {
			for(var j = 0; j < largeur*4 ; j+=4){
				data2[j+(i*largeur*4)] = data[(largeur*4)-j-4+(i*largeur*4)];
				data2[j+(i*largeur*4)+1] = data[(largeur*4)-j-3+(i*largeur*4)];
				data2[j+(i*largeur*4)+2] = data[(largeur*4)-j-2+(i*largeur*4)];
				data2[j+(i*largeur*4)+3] = data[(largeur*4)-j-1+(i*largeur*4)];
			}
		}
	}
	idata2.data = data2;
	ctx.clearRect(gauche, haut, largeur, hauteur);
	ctx.putImageData(idata2, gauche, haut);
	refanul();
}

function rotata(sens){

	var ctx=paink1.contexte;
	var base64 = paink1.elem.toDataURL("image/png"); 
 
	var widt=paink1.elem.height;
	paink1.elem.height=paink1.elem.width;
	paink1.hauteur=paink1.elem.width;
	paink1.elem.width=widt;
	paink1.largeur=widt;
	paink1.elem.parentNode.style.height=paink1.elem.height+'px';
	paink1.elem.parentNode.style.width=paink1.elem.width+'px';
	
	
	var ima=new Image();
				ima.src=base64;
				ima.onload=function(){
				ctx.save();
				ctx.rotate(90 * (Math.PI / 180));
				ctx.translate(0,-(paink1.largeur));
				ctx.drawImage(ima, 0, 0);
				refanul();
				ctx.restore();
				}
	
}

function pot(e){

	var context = paink1.contexte;
	var context2 = paink1.elem;
	var canvasWidth = context2.width
	var canvasHeight = context2.height
	var colorLayer=context.getImageData(0, 0, canvasWidth, canvasHeight);
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var X =e.clientX + dde.scrollLeft;
	var Y =e.clientY + dde.scrollTop;
	var startX = X-document.getElementById('cvs').offsetLeft;
	var startY = Y-document.getElementById('cvs').offsetTop;
	var idata = context.getImageData(startX,startY,1,1);
	var data = idata.data;
	var startR = data[0]
	var startG = data[1]
	var startB = data[2]

pixelStack = startX, startY;

while(pixelStack.length)
{
  var newPos, x, y, pixelPos, reachLeft, reachRight;
  newPos = pixelStack.pop();
  x = newPos[0];
  y = newPos[1];
  
  pixelPos = (y*canvasWidth + x) * 4;
  while(y-- >= 0 && matchStartColor(pixelPos))
  {
    pixelPos -= canvasWidth * 4;
  }
  pixelPos += canvasWidth * 4;
  ++y;
  reachLeft = false;
  reachRight = false;
  while(y++ < canvasHeight-1 && matchStartColor(pixelPos))
  {
    colorPixel(pixelPos);

    if(x > 0)
    {
      if(matchStartColor(pixelPos - 4))
      {
        if(!reachLeft){
          pixelStack.push([x - 1, y]);
          reachLeft = true;
        }
      }
      else if(reachLeft)
      {
        reachLeft = false;
      }
    }
	
    if(x < canvasWidth-1)
    {
      if(matchStartColor(pixelPos + 4))
      {
        if(!reachRight)
        {
          pixelStack.push([x + 1, y]);
          reachRight = true;
        }
      }
      else if(reachRight)
      {
        reachRight = false;
      }
    }
			
    pixelPos += canvasWidth * 4;
  }
}
context.putImageData(colorLayer, 0, 0);
  
function matchStartColor(pixelPos){

  var r = colorLayer.data[pixelPos];	
  var g = colorLayer.data[pixelPos+1];	
  var b = colorLayer.data[pixelPos+2];

  return (r == startR && g == startG && b == startB);
}

function colorPixel(pixelPos){

  colorLayer.data[pixelPos] = 100;
  colorLayer.data[pixelPos+1] = 200;
  colorLayer.data[pixelPos+2] = 100;
  colorLayer.data[pixelPos+3] = 255;
}
}

function init(){
	paink1=new paink();
	kdrag.init_drag();
}
onload=init

Conclusion :


il y a des choses a prendre dans tous ca
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)