Petit logiciel de dessin, retouche avec canvas

Soyez le premier à donner votre avis sur cette source.

Vue 8 064 fois - Téléchargée 1 093 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
je m'etait deja mis en tete de faire cette meme fonction sans l'avoir jamais fait du coup j'ai plus besoin de le faire ++
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

re et pour info:
Avec cette fonction ça fonctionne impeccable, elle permet de retrouver les coordonner un div ou qu'il soit dans l'arborescence du DOM,même si les barre de défilement ont été déplacées.

function getElementCoords(element) {
var coords = {left: 0, top: 0};

while (element) {
coords.left += element.offsetLeft;
coords.top += element.offsetTop;
element = element.offsetParent;
}

return coords;
}

Je l'ai trouvé ici:
http://www.miasmatech.net/scripts/accueil/permalink.php?post_id=33

JJDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

Bonsoir Kazma
effectivement les div dans les div et les bordures posent des problèmes, mais pas insurmontables.
pour la définition de la taille dans le CSS, a priori c'est un problème connu du à l’unité par défaut du CSS, il suffit de mettre largeur et hauteur directement dans la balise.
JJdai
Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
je ne saurait que dire sinon quand j'ai cree l'ensemble j'ai fait en sorte qu'il n'y ai pas de mesures tordu ce qu'il faut eviter c'est mettre le canvas dans un div lui meme imbriqué dans un autre div et qui serait en position absolute ou relative les bordures aussi peuvent créé des problemes et aussi les float left right
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015

re bonjour, après m’être cassé la tête depuis 2 jours, j'ai fini par trouver la raison, (mais l'explication);
J'ai défini la taille du canvas dans la feuille de style, et apparemment il aime pas du tout, ou il manque quelque chose dans ma feuille.
Bref j'ai retiré la taille de la feuille de style et l'ai mise dans les attributs de la balise:
<canvas id='paint_canvas' width="640px" height="320px" onmousedown='test_onclick(event);'></canvas>
et tout est renté dans l'ordre, 1 pixel est 1pîxel;
par contre je ne comprends pas pourquoi, je suis preneur de toute explication
JJDai
Afficher les 20 commentaires

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.