Hi
in this code here : http://jsfiddle.net/sarmadm/9pq2a6j8/
how to detect a mouse press and (X,Y) coordinates on a circle and which circle is the mouse is released, and save these (x,y) values for both events (click and release) ?
The following script detects clicks on your canvas and reports where you clicked. If you click within a circle it will tell you the label of the circle. If you click outside a circle it will tell you that you clicked on the page.
The script works by detecting the position you click on the canvas (x,y) and then comparing this with the x and y circle centre positions in your Circles array. If the distance between the click point and a circle centre point is smaller that the 30 radius, then you have clicked within a circle and the label for this circle is saved for display after the comparison is completed.
<script type="text/javascript">
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;
}
// ----------
function clickIt(evt)
{ var i, xPos, yPos, saveLabel="", xDiff, yDiff, dist, result, cX, cY;
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));
if(dist <=30){saveLabel=circles[i].label; }
}
result=(saveLabel.length >0)? "You hit circle "+saveLabel+"" : "Try to click on a circle";
document.getElementById("msg").innerHTML=result;
}
// ---------
</script>
There is a working demo in jsFiddle HERE
Hi Allan
How can I get the X,Y coordinates of the clicked circle ?
I have added : $display.text('x: ’ + xPos + ', y: ’ + yPos);
but I doesn’t show x,y muse clicks .
also can I use these unctions with drawArrow(from, to) in my jsfiddle . becuase I need to draw a line from
each circle that is clicked on to the circle that is click release on
I have modified the function registering the mouse clicks so that it stores the click co-ordinates and the circle centre co-ordinates in global variables.this will allow you to access them from your line drawing script. The click co-ordinates are xPos and yPos and the clicked circle centre co-ordinates are circX and circY. I have added an alert message giving this information after every click. You can remove this after you have tried it out.
If you are planning to click on two different circles to link them with a line you will need to modify this script to allow you to save the information from each click so that it is available for your line drawing script.
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;
}
}
result=(saveLabel.length >0)? "You hit circle "+saveLabel+"" : "Try to click on a circle";
document.getElementById("msg").innerHTML=result;
alert("Label= "+saveLabel+": xPos= "+xPos+": yPos= "+yPos+": circX= "+circX+": circY= "+circY+":");
}
// ---------
1 Like
I have tried this to save information about previous and current click but it is not giving me the expected results
Pre_cirx; Pre-ciry;
for( i=1;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;
Pre_cirx=circles[i-1].x; Pre_ciry=circles[i-1].x;
}}
You need to save the information from each click in an array, so that they are available for your line drawing script. I have modified the previous clickIt() script by adding an array clickInfo=[] this holds objects created for each of the two clicks as follows:
clickInfo[clickInfo.length]={label:circles[i].label, circX:circles[i].x, circY:circles[i].y, xPos:xPos, yPos:yPos };
You can access the information from each click as follows
clickInfo[0].label; clickInfo[0].circX .... etc.
I have modified the example on JSFiddle HERE
Thanks allanp I got it .
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.