Solved

connect a series of circles by line based on clicks

Posted on 2016-11-09
4
77 Views
Last Modified: 2016-11-10
Hi

In this script below I have a series of circles with labels . I need to make them connectable by lines based on (x,y) coordinates of clicked

on  previous and current circle node . Now I can get the (X,y) coordinates of clicked circle .  I need to save the information from each

 click so that it is available for  line drawing script both  . Here is the script : https://jsfiddle.net/sarmadm/4tr0ejnc/
0
Comment
Question by:john a
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 41881476
adjust you "if" :
Test page : https://jsfiddle.net/4tr0ejnc/1/

       if(dist <=30)
       { 
          saveLabel=circles[i].label;  
          circX=circles[i].x;
          circY=circles[i].y;
          if(previous_clicked_circle) {
            context.beginPath();
            context.moveTo(previous_clicked_circle[0], previous_clicked_circle[1]);
            context.lineTo(circX, circY);
            context.stroke();
          }
          previous_clicked_circle = [circX, circY];
          break; // break the loop
        }

Open in new window



your full page follow now :

<div id="wrap">
  <p id="msg" class="blue">Please click on the page within the blue lines</p>
  <canvas id="myCanvas" onclick="clickIt(event)" width="600" height="600">
  </canvas>
</div>

Open in new window


var previous_clicked_circle = null;
var circles = [];
circles[circles.length]=Circle({ x: 369, y: 116, label: "A" });
circles[circles.length]=Circle({ x: 231, y: 278, label: "1" });
circles[circles.length]=Circle({ x:133, y: 396, label: "D" });
circles[circles.length]=Circle({ x: 234, y: 511, label: "C" });
circles[circles.length]=Circle({ x: 351, y: 232, label: "B" });
circles[circles.length]=Circle({ x:348, y: 388, label: "4" });
circles[circles.length]=Circle({ x:164, y: 199, label: "5" });
circles[circles.length]=Circle({ x:522, y: 425, label: "3" });
circles[circles.length]=Circle({ x:229, y: 120, label: "E" });
circles[circles.length]=Circle({ x:493, y: 237, label: "2" });
//
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//
circles.forEach(function(circle) { circle.draw(); });
// --------------------
function Circle(I)
  { I.radius = 30;
    I.draw = function() {
       context.beginPath();
       context.arc(I.x, I.y, I.radius, 0, 2 * Math.PI, false);
       context.fillStyle = 'white';
       context.fill();
       context.lineWidth = 2;
       context.strokeStyle = '#003300';
       context.stroke();
       context.font = '15pt Calibri';
       context.fillStyle = 'black';
       context.textAlign = 'center';
       context.fillText(I.label, I.x, I.y);
     };
   return I;
  }
// ----------
 var xPos, yPos, circX, circY, saveLabel; // global
 function clickIt(evt)
  { var i, xDiff, yDiff, dist, result, cX, cY; 
    xPos=null; yPos=null; circX=null; circY=null; saveLabel=""  
    evt= evt || event;
    xPos=evt.offsetX || evt.pageX;
    yPos=evt.offsetY || evt.pageY;
  // check posn against centres
         
    for( i=0;i<circles.length;i++)
     { cX=circles[i].x; cY=circles[i].y;
       xDiff=Math.abs(cX-xPos);
       yDiff=Math.abs(cY-yPos);
       dist=Math.sqrt(Math.pow(xDiff,2)+Math.pow(yDiff,2)); 
      // info on clicked circle       
       if(dist <=30)
       { 
          saveLabel=circles[i].label;  
          circX=circles[i].x;
          circY=circles[i].y;
          if(previous_clicked_circle) {
            context.beginPath();
            context.moveTo(previous_clicked_circle[0], previous_clicked_circle[1]);
            context.lineTo(circX, circY);
            context.stroke();
          }
          previous_clicked_circle = [circX, circY];
          break; // break the loop
        }
     }
		}

  
  function drawArrow(from, to) 
{
    var radians = Math.PI / 180;
    var headlen = 10;
    var angle = Math.atan(Math.abs(from.y - to.y) / Math.abs(from.x - to.x));
    var rise = from.radius * Math.sin(angle);
    var run = to.radius * Math.cos(angle);
    context.beginPath();
    if (from.x < to.x) {
        from.x += run;
        to.x -= run;
    } else {
        from.x -= run;
        to.x += run;
    }
    if (from.y < to.y) {
        from.y += rise;
        to.y -= rise;
    } else {
        from.y -= rise;
        to.y += rise;
    }
    context.moveTo(from.x, from.y);
    context.lineTo(to.x, to.y);
    context.stroke();
    context.lineTo(to.x - headlen * Math.cos(angle - Math.PI / 6), to.y - headlen * Math.sin(angle - Math.PI / 6));
    context.moveTo(to.x, to.y);
    context.lineTo(to.x - headlen * Math.cos(angle + Math.PI / 6), to.y - headlen * Math.sin(angle + Math.PI / 6));
    context.stroke();
}

// ---------

Open in new window


body {
  font-family: arial, helvetica, sans-serif;
  font-weight: normal;
  font-size: 13px;
  color: #000;
  text-align: left;
  margin: 3px 0px;
}

#wrap {
  margin: 20px;
}

#myCanvas {
  border: 1px solid blue;
}

.blue {
  font-size: 18px;
  font-weight: bold;
  color: #00F;
}

Open in new window

0
 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 250 total points
ID: 41881740
I worked on this yesterday but ran out of time to finish. I modified your code, however, your arrow heads still need some work as the sometimes draw incorrectly. I'm not sure if leakim already answered but I already did the work so posting anyway. Hope this helps.

I include it as a standalone html file below.

Regards
Pierre

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
		  font-family: arial, helvetica, sans-serif;
		  font-weight: normal;
		  font-size: 13px;
		  color: #000;
		  text-align: left;
		  margin: 3px 0px;
		}

		#wrap {
		  margin: 20px;
		}

		#myCanvas {
		  border: 1px solid blue;
		}

		.blue {
		  font-size: 18px;
		  font-weight: bold;
		  color: #00F;
		}

	</style>
</head>
<body>
	<div id="wrap">
	  <p id="msg" class="blue">Please click on the page within the blue lines</p>
	  <canvas id="myCanvas" onclick="clickIt(event)" width="600" height="600">
	  </canvas>
	</div>

		<script>
		var circles = [];
		circles[circles.length]=Circle({ x: 369, y: 116, label: "A" });
		circles[circles.length]=Circle({ x: 231, y: 278, label: "1" });
		circles[circles.length]=Circle({ x:133, y: 396, label: "D" });
		circles[circles.length]=Circle({ x: 234, y: 511, label: "C" });
		circles[circles.length]=Circle({ x: 351, y: 232, label: "B" });
		circles[circles.length]=Circle({ x:348, y: 388, label: "4" });
		circles[circles.length]=Circle({ x:164, y: 199, label: "5" });
		circles[circles.length]=Circle({ x:522, y: 425, label: "3" });
		circles[circles.length]=Circle({ x:229, y: 120, label: "E" });
		circles[circles.length]=Circle({ x:493, y: 237, label: "2" });
		//
		var canvas = document.getElementById('myCanvas');
		var context = canvas.getContext('2d');
		//
		circles.forEach(function(circle) { circle.draw(); });
		// --------------------
		function Circle(I)
		  { I.radius = 30;
			I.draw = function() {
			   context.beginPath();
			   context.arc(I.x, I.y, I.radius, 0, 2 * Math.PI, false);
			   context.fillStyle = 'white';
			   context.fill();
			   context.lineWidth = 2;
			   context.strokeStyle = '#003300';
			   context.stroke();
			   context.font = '15pt Calibri';
			   context.fillStyle = 'black';
			   context.textAlign = 'center';
			   context.fillText(I.label, I.x, I.y);
			 };
		   return I;
		  }
		// ----------
		
		// global
		var last_circle_index=-1; 
		 
		 function index_of_circle(x,y)
		 { 	
			//return index of circle at x and y coords
		  //returns -1 if not found
		  var i, dist, xDiff, yDiff;
		  for( i=0;i<circles.length;i++)
			 { 
			   xDiff=Math.abs(circles[i].x-x);
			   yDiff=Math.abs(circles[i].y-y);
			   dist=Math.sqrt(Math.pow(xDiff,2)+Math.pow(yDiff,2)); 
			  // info on clicked circle       
			   if(dist <=30) return i;
				
			 }
			return -1; //not found
		 }
		 
		 function clickIt(evt)
		  { var i=-1, cx, cy; 
			//xPos=null; yPos=null; circX=null; circY=null; saveLabel=""  
			evt= evt || event;
			cx=evt.offsetX || evt.pageX;
			cy=evt.offsetY || evt.pageY;
		  // check posn against centres
			 i = index_of_circle(cx, cy);  
			 if (i!=-1 && last_circle_index!=-1)
			 {
				//two circles clicked consecutively				
				drawArrow(circles[last_circle_index], circles[i]);
			 }
			 last_circle_index = i;			   
		  }
		  
		  function drawArrow(from, to) 
		{
			//from and to are references to the circle objects. use local vars in order to not change circle object values
			var fx= from.x, fy=from.y, tx=to.x, ty=to.y;
			
			var radians = Math.PI / 180;
			var headlen = 10;
			var angle = Math.atan(Math.abs(from.y - to.y) / Math.abs(from.x - to.x));
			var rise = from.radius * Math.sin(angle);
			var run = to.radius * Math.cos(angle);
			context.beginPath();
			if (fx < tx) {
				fx += run;
				tx -= run;
			} else {
				fx -= run;
				tx += run;
			}
			if (fy < ty) {
				fy += rise;
				ty -= rise;
			} else {
				fy -= rise;
				ty += rise;
			}
			context.moveTo(fx, fy);
			context.lineTo(tx, ty);
			context.stroke();
			
			//this needs work: arrow heads sometimes drawn incorrectly...
			context.lineTo(tx - headlen * Math.cos(angle - Math.PI / 6), ty - headlen * Math.sin(angle - Math.PI / 6));
			context.moveTo(tx, ty);
			context.lineTo(tx - headlen * Math.cos(angle + Math.PI / 6), ty - headlen * Math.sin(angle + Math.PI / 6));
			context.stroke();
		}

		// ---------


	</script>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:john a
ID: 41882556
thanks very much dear leakim971 , Pierre your answers are perfect

thanks for help
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 41883341
You're welcome. Good luck :)
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Difference between Nuget Package and using Bower/Node.Js/Gulp 2 42
javascript duplicates 9 25
Google Chrome: Debugging AJAX call 6 38
Slow Down an Animation 3 29
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question