在画布中绘制文本HTML会停止我的算法

时间：2015-10-05 08:54:24

标签： javascript canvas html5-canvas

我有一个算法用于在Canvas HTML中绘制由点给出的行程。 Evrything工作正常，但没有在我的观点上添加名字。

＆＃13;
＆＃13; 
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
	
	<body>
		<canvas id="mycanvas" width="100" height="100" style="margin-top: 20px; margin-left: 50px;"></canvas>
		<script type='text/javascript'> 
window.onload=function(){
			
	var jsonServicesTT = [{"NAME":"Elephant","DIRECTION":"4"},{"NAME":"Sunshine","DIRECTION":"4"},{"NAME":"Flower","DIRECTION":"4"},{"NAME":"Abricot","DIRECTION":"4"},{"NAME":"Cake","DIRECTION":"4"},{"NAME":"Mouse","DIRECTION":"4"},{"NAME":"Uther","DIRECTION":"3"},{"NAME":"Arriba","DIRECTION":"3"},{"NAME":"Hola","DIRECTION":"3"},{"NAME":"Elephant","DIRECTION":"3"}];
	

	widthCan = 792;
	heightCan = 423;
	width = widthCan - 150;
	height = heightCan - 130;
	var perimetre = (width * 2 + height * 2);
	var colors = [];
	var colorTemp = '';
	var table = [];
	var direction = [];
	var resteFaire = [];
	var doubleColor = '';
	var nbSegment = 0;
	var percent = 0;
	var up =0;
	var right = 1;
	var left = 0;
	var bot = 0;
	var tailleSegment = 0;
	var decalX = 75;
	var decalY = 60;
	var NAME = '';
	
	
	var cRot='';
	var cRot2 = '';
	cRot = document.getElementById("mycanvas");
	ctxRot = cRot.getContext('2d');
	ctxRot.canvas.width = widthCan;
	ctxRot.canvas.height = heightCan;
	
	function findColors(direction){
		switch(direction)
		{
			case '1': 
				colors.push('red');
				colorTemp = 'red';
				break;
			case '2': 
				colors.push('blue');
				colorTemp = 'blue';
				break;
			case '3': 
				colors.push('DeepSkyBlue');
				colorTemp = 'DeepSkyBlue';
				break;
			case '4': 
				colors.push('Green');
				colorTemp = 'Green';
				break;
			default:  
				colors.push('Darkorange');		
				colorTemp = 'Darkorange';
		}	
	}
	/************** Rounded Rect *************/
	function roundRect(x, y, w, h, radius) {
		var r = x + w;
		var b = y + h;
		ctxRot.beginPath();
		ctxRot.strokeStyle = "#BDBDBD";
		ctxRot.lineWidth = "2";
		ctxRot.moveTo(x + radius, y);
		ctxRot.lineTo(r - radius, y);
		ctxRot.quadraticCurveTo(r, y, r, y + radius);
		ctxRot.lineTo(r, y + h - radius);
		ctxRot.quadraticCurveTo(r, b, r - radius, b);
		ctxRot.lineTo(x + radius, b);
		ctxRot.quadraticCurveTo(x, b, x, b - radius);
		ctxRot.lineTo(x, y + radius);
		ctxRot.quadraticCurveTo(x, y, x + radius, y);
		ctxRot.stroke();
	}
	
	function drawCircle(centerXFrom, centerYFrom, color){
		var radius = 5;
		ctxRot.beginPath();
		ctxRot.arc(centerXFrom + decalX, centerYFrom + decalY, radius, 0, 2 * Math.PI, false);
		ctxRot.fillStyle = color;
		ctxRot.fill();
		ctxRot.lineWidth = 1;
		ctxRot.strokeStyle = '#003300';
		ctxRot.stroke();
		ctxRot.beginPath();
		/*if(bot == 1){
			ctxRot.translate(centerXFrom, centerYFrom);
			ctxRot.rotate(-Math.PI / 4);
			ctxRot.fillText(NAME, name.length - 50 , name.length);
			ctxRot.restore();
		}*/
	
	}
		
	function getSide(leg, taille) {
		findColors(leg["DIRECTION"]);
		NAME = leg["NAME"];
		if(right == 1 && taille < (height - yPrec)) { //si on peut placer le point sur le même côté que précédemment
			yPrec += taille;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (right == 1 && taille > (height - yPrec)) { 
			var reste = height - yPrec; //calcul de combien de right il y a
			if(reste > width){ //si on passe de right à left sans passer par bot
				var resteY = reste - width;
				yPrec = height - resteY;
				xPrec = 0;
				right = 0;
				bot = 0;
				up =0;
				left = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
				
			}
			else //si on passe de right à bot
			{
				var resteX = taille - reste; // calcul de combien il reste de distance après avoir déduit le right
				xPrec = width - resteX; // positionnement du point en Bot x
				yPrec = height;
				//writeBot(leg["NAME"], xPrec, yPrec);	
				right = 0;
				bot = 1;
				up =0;
				left = 0;	
				drawCircle(xPrec, yPrec, colorTemp, NAME);								
			}
				
		}
		else if (bot == 1 && taille < xPrec){ //si on peut placer le point sur le même côté que précédemment
			xPrec = xPrec - taille;
			yPrec = height;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
				
		}
		else if(bot == 1 && taille > xPrec){ // si le nouveau point ne peut pas être sur le bot
			var resteY = taille - xPrec;
			if(resteY > height){ //si on passe de bot à up
				xPrec = resteY - height;
				yPrec = 0;
				right = 0;
				bot = 0;
				up =1;
				left = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);				
					
			}
			else{ //si on passe de bot à left
				yPrec = height - resteY;
				xPrec = 0;
				bot = 0;
				left = 1;
				right = 0;
				up =0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if (left == 1 && taille < yPrec){
			yPrec = yPrec - taille;
			xPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (left == 1 && taille > yPrec){
			var resteX = taille - yPrec;
			if (resteX > width){ //si on passe de left à right
				yPrec = resteX - width;
				xPrec = 0;
				up = 0;
				bot = 0;
				left = 0;
				right = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			else{ //si on passe de left à bot
				xPrec = resteX;
				yPrec = 0;
				up = 1;
				bot = 0;
				left = 0;
				right = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if(up == 1 && taille < (width - xPrec) ){
			xPrec += taille;
			yPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if(up == 1 && taille > (width - xPrec)){
			var resteX = width - xPrec;
			xPrec = width;
			yPrec = taille - resteX;
			up = 0;
			bot = 0;
			left = 0;
			right = 1;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
	
		
	}
	
	function drawCircleFirst(X, Y) {
		if(jsonServicesTT[0]["NAME"] == jsonServicesTT[(jsonServicesTT.length) - 1]["NAME"])
		{
			table.push(jsonServicesTT[0]);
			table.push(jsonServicesTT[(jsonServicesTT.length) - 1]);
			for(var i = 0; i < table.length; i++){
				findColors(table[i]["DIRECTION"]);
			}
			doubleColor = true;
		}
		
		else
		{
			findColors(table[0]["DIRECTION"]);
			doubleColor = false;
		}		
		
		var radius = 6;
		var currentAngle = -0.5 * Math.PI;
		for (var i = 0; i < 2; i++) {
			var sliceAngle = 0.5 * 2 * Math.PI;
			ctxRot.beginPath();
			ctxRot.arc(X + decalX, Y + decalY, radius,currentAngle, currentAngle + sliceAngle);
			ctxRot.strokeStyle = '#003300';
			ctxRot.stroke();
			currentAngle += sliceAngle;
			ctxRot.lineTo(X + decalX, X + decalX);
			ctxRot.fillStyle = colors[i];
			
			ctxRot.fill();
		}
	}
	
	function getProportion(){
		if(doubleColor){
			nbSegment = jsonServicesTT.slice(1).length;
		}
		else nbSegment = jsonServicesTT.length;
		percent = 100/nbSegment;
		tailleSegment = (perimetre*percent)/100;
		
		for (var i = 1; i < nbSegment; i++){//premier et dernier points déjà placés
			getSide(jsonServicesTT[i], tailleSegment);
		}		
	}
		
	roundRect(decalX, decalY, width, height, 20);
	var firstPointX = width ;
	var firstPointY = (height/2);
	yPrec = firstPointY;
	xPrec = firstPointX;
	drawCircleFirst(firstPointX, firstPointY);
	getProportion();
}

		</script>	
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

但是当您在drawCircle函数中取消注释用于插入文本的部分时（请不要注意名称的位置，因为我只是想让它首先工作），你可以看到我的分数不再被绘制了。 我猜这是一个背景问题，因为我的名字采用了这一点的颜色，但我不知道如何解决这个问题。

＆＃13;
＆＃13; 
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
	
	<body>
		<canvas id="mycanvas" width="100" height="100" style="margin-top: 20px; margin-left: 50px;"></canvas>
		<script type='text/javascript'> 
window.onload=function(){
			
	var jsonServicesTT = [{"NAME":"Elephant","DIRECTION":"4"},{"NAME":"Sunshine","DIRECTION":"4"},{"NAME":"Flower","DIRECTION":"4"},{"NAME":"Abricot","DIRECTION":"4"},{"NAME":"Cake","DIRECTION":"4"},{"NAME":"Mouse","DIRECTION":"4"},{"NAME":"Uther","DIRECTION":"3"},{"NAME":"Arriba","DIRECTION":"3"},{"NAME":"Hola","DIRECTION":"3"},{"NAME":"Elephant","DIRECTION":"3"}];
	

	widthCan = 792;
	heightCan = 423;
	width = widthCan - 150;
	height = heightCan - 130;
	var perimetre = (width * 2 + height * 2);
	var colors = [];
	var colorTemp = '';
	var table = [];
	var direction = [];
	var resteFaire = [];
	var doubleColor = '';
	var nbSegment = 0;
	var percent = 0;
	var up =0;
	var right = 1;
	var left = 0;
	var bot = 0;
	var tailleSegment = 0;
	var decalX = 75;
	var decalY = 60;
	var NAME = '';
	
	
	var cRot='';
	var cRot2 = '';
	cRot = document.getElementById("mycanvas");
	ctxRot = cRot.getContext('2d');
	ctxRot.canvas.width = widthCan;
	ctxRot.canvas.height = heightCan;
	
	function findColors(direction){
		switch(direction)
		{
			case '1': 
				colors.push('red');
				colorTemp = 'red';
				break;
			case '2': 
				colors.push('blue');
				colorTemp = 'blue';
				break;
			case '3': 
				colors.push('DeepSkyBlue');
				colorTemp = 'DeepSkyBlue';
				break;
			case '4': 
				colors.push('Green');
				colorTemp = 'Green';
				break;
			default:  
				colors.push('Darkorange');		
				colorTemp = 'Darkorange';
		}	
	}
	/************** Rounded Rect *************/
	function roundRect(x, y, w, h, radius) {
		var r = x + w;
		var b = y + h;
		ctxRot.beginPath();
		ctxRot.strokeStyle = "#BDBDBD";
		ctxRot.lineWidth = "2";
		ctxRot.moveTo(x + radius, y);
		ctxRot.lineTo(r - radius, y);
		ctxRot.quadraticCurveTo(r, y, r, y + radius);
		ctxRot.lineTo(r, y + h - radius);
		ctxRot.quadraticCurveTo(r, b, r - radius, b);
		ctxRot.lineTo(x + radius, b);
		ctxRot.quadraticCurveTo(x, b, x, b - radius);
		ctxRot.lineTo(x, y + radius);
		ctxRot.quadraticCurveTo(x, y, x + radius, y);
		ctxRot.stroke();
	}
	
	function drawCircle(centerXFrom, centerYFrom, color){
		var radius = 5;
		ctxRot.beginPath();
		ctxRot.arc(centerXFrom + decalX, centerYFrom + decalY, radius, 0, 2 * Math.PI, false);
		ctxRot.fillStyle = color;
		ctxRot.fill();
		ctxRot.lineWidth = 1;
		ctxRot.strokeStyle = '#003300';
		ctxRot.stroke();
		ctxRot.beginPath();
		if(bot == 1){
			ctxRot.translate(centerXFrom, centerYFrom);
			ctxRot.rotate(-Math.PI / 4);
			ctxRot.fillText(NAME, name.length - 50 , name.length);
			ctxRot.restore();
		}
	
	}
		
	function getSide(leg, taille) {
		findColors(leg["DIRECTION"]);
		NAME = leg["NAME"];
		if(right == 1 && taille < (height - yPrec)) { //si on peut placer le point sur le même côté que précédemment
			yPrec += taille;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (right == 1 && taille > (height - yPrec)) { 
			var reste = height - yPrec; //calcul de combien de right il y a
			if(reste > width){ //si on passe de right à left sans passer par bot
				var resteY = reste - width;
				yPrec = height - resteY;
				xPrec = 0;
				right = 0;
				bot = 0;
				up =0;
				left = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
				
			}
			else //si on passe de right à bot
			{
				var resteX = taille - reste; // calcul de combien il reste de distance après avoir déduit le right
				xPrec = width - resteX; // positionnement du point en Bot x
				yPrec = height;
				//writeBot(leg["NAME"], xPrec, yPrec);	
				right = 0;
				bot = 1;
				up =0;
				left = 0;	
				drawCircle(xPrec, yPrec, colorTemp, NAME);								
			}
				
		}
		else if (bot == 1 && taille < xPrec){ //si on peut placer le point sur le même côté que précédemment
			xPrec = xPrec - taille;
			yPrec = height;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
				
		}
		else if(bot == 1 && taille > xPrec){ // si le nouveau point ne peut pas être sur le bot
			var resteY = taille - xPrec;
			if(resteY > height){ //si on passe de bot à up
				xPrec = resteY - height;
				yPrec = 0;
				right = 0;
				bot = 0;
				up =1;
				left = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);				
					
			}
			else{ //si on passe de bot à left
				yPrec = height - resteY;
				xPrec = 0;
				bot = 0;
				left = 1;
				right = 0;
				up =0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if (left == 1 && taille < yPrec){
			yPrec = yPrec - taille;
			xPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (left == 1 && taille > yPrec){
			var resteX = taille - yPrec;
			if (resteX > width){ //si on passe de left à right
				yPrec = resteX - width;
				xPrec = 0;
				up = 0;
				bot = 0;
				left = 0;
				right = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			else{ //si on passe de left à bot
				xPrec = resteX;
				yPrec = 0;
				up = 1;
				bot = 0;
				left = 0;
				right = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if(up == 1 && taille < (width - xPrec) ){
			xPrec += taille;
			yPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if(up == 1 && taille > (width - xPrec)){
			var resteX = width - xPrec;
			xPrec = width;
			yPrec = taille - resteX;
			up = 0;
			bot = 0;
			left = 0;
			right = 1;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
	
		
	}
	
	function drawCircleFirst(X, Y) {
		if(jsonServicesTT[0]["NAME"] == jsonServicesTT[(jsonServicesTT.length) - 1]["NAME"])
		{
			table.push(jsonServicesTT[0]);
			table.push(jsonServicesTT[(jsonServicesTT.length) - 1]);
			for(var i = 0; i < table.length; i++){
				findColors(table[i]["DIRECTION"]);
			}
			doubleColor = true;
		}
		
		else
		{
			findColors(table[0]["DIRECTION"]);
			doubleColor = false;
		}		
		
		var radius = 6;
		var currentAngle = -0.5 * Math.PI;
		for (var i = 0; i < 2; i++) {
			var sliceAngle = 0.5 * 2 * Math.PI;
			ctxRot.beginPath();
			ctxRot.arc(X + decalX, Y + decalY, radius,currentAngle, currentAngle + sliceAngle);
			ctxRot.strokeStyle = '#003300';
			ctxRot.stroke();
			currentAngle += sliceAngle;
			ctxRot.lineTo(X + decalX, X + decalX);
			ctxRot.fillStyle = colors[i];
			
			ctxRot.fill();
		}
	}
	
	function getProportion(){
		if(doubleColor){
			nbSegment = jsonServicesTT.slice(1).length;
		}
		else nbSegment = jsonServicesTT.length;
		percent = 100/nbSegment;
		tailleSegment = (perimetre*percent)/100;
		
		for (var i = 1; i < nbSegment; i++){//premier et dernier points déjà placés
			getSide(jsonServicesTT[i], tailleSegment);
		}		
	}
		
	roundRect(decalX, decalY, width, height, 20);
	var firstPointX = width ;
	var firstPointY = (height/2);
	yPrec = firstPointY;
	xPrec = firstPointX;
	drawCircleFirst(firstPointX, firstPointY);
	getProportion();
}

		</script>	
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

ctx.restore将以前保存的状态恢复到调用它的ctx。我在你的问题代码中看到你调用了这个函数（在ctxRot对象上）问题是，你正在尝试恢复一个你似乎没有预先保存的状态。

添加对ctxRot.save()的调用似乎可以解决问题 - 将文本渲染到底部3个圆圈，并显示所有9个圆圈。 这就是我如何改变它来处理这个特殊问题。我看起来不够密切，不知道我是否应该期待看到更多文字。

＆＃13;
＆＃13; 
<html>
<head>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
	
	<body>
		<canvas id="mycanvas" width="100" height="100" style="margin-top: 20px; margin-left: 50px;"></canvas>
		<script type='text/javascript'> 
window.onload=function(){
			
	var jsonServicesTT = [{"NAME":"Elephant","DIRECTION":"4"},{"NAME":"Sunshine","DIRECTION":"4"},{"NAME":"Flower","DIRECTION":"4"},{"NAME":"Abricot","DIRECTION":"4"},{"NAME":"Cake","DIRECTION":"4"},{"NAME":"Mouse","DIRECTION":"4"},{"NAME":"Uther","DIRECTION":"3"},{"NAME":"Arriba","DIRECTION":"3"},{"NAME":"Hola","DIRECTION":"3"},{"NAME":"Elephant","DIRECTION":"3"}];
	

	widthCan = 792;
	heightCan = 423;
	width = widthCan - 150;
	height = heightCan - 130;
	var perimetre = (width * 2 + height * 2);
	var colors = [];
	var colorTemp = '';
	var table = [];
	var direction = [];
	var resteFaire = [];
	var doubleColor = '';
	var nbSegment = 0;
	var percent = 0;
	var up =0;
	var right = 1;
	var left = 0;
	var bot = 0;
	var tailleSegment = 0;
	var decalX = 75;
	var decalY = 60;
	var NAME = '';
	
	
	var cRot='';
	var cRot2 = '';
	cRot = document.getElementById("mycanvas");
	ctxRot = cRot.getContext('2d');
	ctxRot.canvas.width = widthCan;
	ctxRot.canvas.height = heightCan;
	
	function findColors(direction){
		switch(direction)
		{
			case '1': 
				colors.push('red');
				colorTemp = 'red';
				break;
			case '2': 
				colors.push('blue');
				colorTemp = 'blue';
				break;
			case '3': 
				colors.push('DeepSkyBlue');
				colorTemp = 'DeepSkyBlue';
				break;
			case '4': 
				colors.push('Green');
				colorTemp = 'Green';
				break;
			default:  
				colors.push('Darkorange');		
				colorTemp = 'Darkorange';
		}	
	}
	/************** Rounded Rect *************/
	function roundRect(x, y, w, h, radius) {
		var r = x + w;
		var b = y + h;
		ctxRot.beginPath();
		ctxRot.strokeStyle = "#BDBDBD";
		ctxRot.lineWidth = "2";
		ctxRot.moveTo(x + radius, y);
		ctxRot.lineTo(r - radius, y);
		ctxRot.quadraticCurveTo(r, y, r, y + radius);
		ctxRot.lineTo(r, y + h - radius);
		ctxRot.quadraticCurveTo(r, b, r - radius, b);
		ctxRot.lineTo(x + radius, b);
		ctxRot.quadraticCurveTo(x, b, x, b - radius);
		ctxRot.lineTo(x, y + radius);
		ctxRot.quadraticCurveTo(x, y, x + radius, y);
		ctxRot.stroke();
	}
	
	function drawCircle(centerXFrom, centerYFrom, color){
		var radius = 5;
		ctxRot.beginPath();
		ctxRot.arc(centerXFrom + decalX, centerYFrom + decalY, radius, 0, 2 * Math.PI, false);
		ctxRot.fillStyle = color;
		ctxRot.fill();
		ctxRot.lineWidth = 1;
		ctxRot.strokeStyle = '#003300';
		ctxRot.stroke();
		ctxRot.beginPath();
		if(bot == 1){
			ctxRot.save();   // *** Added this line *** //
			ctxRot.translate(centerXFrom, centerYFrom);
			ctxRot.rotate(-Math.PI / 4);
			ctxRot.fillText(NAME, name.length - 50 , name.length);
			ctxRot.restore();
		}
	
	}
		
	function getSide(leg, taille) {
		findColors(leg["DIRECTION"]);
		NAME = leg["NAME"];
		if(right == 1 && taille < (height - yPrec)) { //si on peut placer le point sur le même côté que précédemment
			yPrec += taille;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (right == 1 && taille > (height - yPrec)) { 
			var reste = height - yPrec; //calcul de combien de right il y a
			if(reste > width){ //si on passe de right à left sans passer par bot
				var resteY = reste - width;
				yPrec = height - resteY;
				xPrec = 0;
				right = 0;
				bot = 0;
				up =0;
				left = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
				
			}
			else //si on passe de right à bot
			{
				var resteX = taille - reste; // calcul de combien il reste de distance après avoir déduit le right
				xPrec = width - resteX; // positionnement du point en Bot x
				yPrec = height;
				//writeBot(leg["NAME"], xPrec, yPrec);	
				right = 0;
				bot = 1;
				up =0;
				left = 0;	
				drawCircle(xPrec, yPrec, colorTemp, NAME);								
			}
				
		}
		else if (bot == 1 && taille < xPrec){ //si on peut placer le point sur le même côté que précédemment
			xPrec = xPrec - taille;
			yPrec = height;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
				
		}
		else if(bot == 1 && taille > xPrec){ // si le nouveau point ne peut pas être sur le bot
			var resteY = taille - xPrec;
			if(resteY > height){ //si on passe de bot à up
				xPrec = resteY - height;
				yPrec = 0;
				right = 0;
				bot = 0;
				up =1;
				left = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);				
					
			}
			else{ //si on passe de bot à left
				yPrec = height - resteY;
				xPrec = 0;
				bot = 0;
				left = 1;
				right = 0;
				up =0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if (left == 1 && taille < yPrec){
			yPrec = yPrec - taille;
			xPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if (left == 1 && taille > yPrec){
			var resteX = taille - yPrec;
			if (resteX > width){ //si on passe de left à right
				yPrec = resteX - width;
				xPrec = 0;
				up = 0;
				bot = 0;
				left = 0;
				right = 1;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			else{ //si on passe de left à bot
				xPrec = resteX;
				yPrec = 0;
				up = 1;
				bot = 0;
				left = 0;
				right = 0;
				drawCircle(xPrec, yPrec, colorTemp, NAME);
			}
			
		}
		else if(up == 1 && taille < (width - xPrec) ){
			xPrec += taille;
			yPrec = 0;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
		else if(up == 1 && taille > (width - xPrec)){
			var resteX = width - xPrec;
			xPrec = width;
			yPrec = taille - resteX;
			up = 0;
			bot = 0;
			left = 0;
			right = 1;
			drawCircle(xPrec, yPrec, colorTemp, NAME);
		}
	
		
	}
	
	function drawCircleFirst(X, Y) {
		if(jsonServicesTT[0]["NAME"] == jsonServicesTT[(jsonServicesTT.length) - 1]["NAME"])
		{
			table.push(jsonServicesTT[0]);
			table.push(jsonServicesTT[(jsonServicesTT.length) - 1]);
			for(var i = 0; i < table.length; i++){
				findColors(table[i]["DIRECTION"]);
			}
			doubleColor = true;
		}
		
		else
		{
			findColors(table[0]["DIRECTION"]);
			doubleColor = false;
		}		
		
		var radius = 6;
		var currentAngle = -0.5 * Math.PI;
		for (var i = 0; i < 2; i++) {
			var sliceAngle = 0.5 * 2 * Math.PI;
			ctxRot.beginPath();
			ctxRot.arc(X + decalX, Y + decalY, radius,currentAngle, currentAngle + sliceAngle);
			ctxRot.strokeStyle = '#003300';
			ctxRot.stroke();
			currentAngle += sliceAngle;
			ctxRot.lineTo(X + decalX, X + decalX);
			ctxRot.fillStyle = colors[i];
			
			ctxRot.fill();
		}
	}
	
	function getProportion(){
		if(doubleColor){
			nbSegment = jsonServicesTT.slice(1).length;
		}
		else nbSegment = jsonServicesTT.length;
		percent = 100/nbSegment;
		tailleSegment = (perimetre*percent)/100;
		
		for (var i = 1; i < nbSegment; i++){//premier et dernier points déjà placés
			getSide(jsonServicesTT[i], tailleSegment);
		}		
	}
		
	roundRect(decalX, decalY, width, height, 20);
	var firstPointX = width ;
	var firstPointY = (height/2);
	yPrec = firstPointY;
	xPrec = firstPointX;
	drawCircleFirst(firstPointX, firstPointY);
	getProportion();
}

		</script>	
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题