Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    74
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Math help for parallelograms on canvas

    First let me say that I'm not very good with math. I have a <canvas> with multiple text "boxes" that are rotated to 300°, which basically makes them parallelograms. They are very similar to this:

    http://www.youdraw.com/cgi-bin/solopic.pl?picnum=522860

    I'm trying to detect if the mouse is over one of them, but I don't know how to do that. Please help. Thank you!
    Last edited by Raphael; 01-08-2014 at 02:54 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Show some code!

  • #3
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    There is a boolean context.isPointinPath(float x,float y);

    Since use something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    
    </style>
    </head>
    <body>
    
    <script type="text/javascript">
    // Point constructor
    function Point(x,y){this.x=x;this.y=y};
    // To display objects like array with alert or console.log 
    Object.prototype.toString=function(){return JSON.stringify(this)}
    
    // The test inside triangle
    Point.prototype.inside=function(a,b,c){
    	// Value of Fxy for a Point p (Fxy=0 one équation of the line define by a et b)
    	// The sign of this function(P) define the two half-plan on either side of the line AB.
    	// (It is a scalar product AP*An, with An directly perpendicular to AB).
    	function Fxy(a,b,p){return (p.y-a.y)*(b.x-a.x)-(b.y-a.y)*(p.x-a.x)}
       // Same signs for this three values ?  
       var t=[Fxy(a,b,this),Fxy(b,c,this),Fxy(c,a,this)];
     	if (t[0]*t[1]<0) return false;
    	if (t[1]*t[2]<0) return false;
    	return true;
    }
    // Use 
    var A=new Point(1,0),B=new Point(0,2),C=new Point(-3,0);
    var P=new Point(-1,1),Q=new Point(0.5,1.1);
    alert('A : '+A+' '+'\nB : '+B+'\nC : '+C+'\n'+P+' inside ? '+P.inside(A,B,C)+'\n'+Q+' inside ? '+Q.inside(A,B,C))
    </script>
    </body>
    </html>
    This method is easy to update for convex polygons like parallelograms define by 4 points in order a,b,c,d.
    change only function(a,b,c) to function (a,b,c,d), t to t=[Fxy(a,b,this),Fxy(b,c,this),Fxy(c,d,this),F(d,a,this)];
    and add a test with if (t[2]*t[3]<0) return false;it's essential to proced by circular permutation
    Last edited by 007julien; 01-08-2014 at 10:05 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •