CODEWITHSUNDEEP
javascriptjquerymath
Koerr
Koerr

Reputation: 15733

How to test if a coordinate is in a diamond area?

code link: http://jsbin.com/ozoma3/edit

codes (can copy/paste to a .html file, and run it) : 

<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
*{margin:0;}
#main{
    background-image:url('http://clip2net.com/clip/m10494/1277192389-c-811b.png');
    width:660px;
    height:320px;
}
</style>
</HEAD>
<BODY><div id="main"></div></BODY>
</HTML>
<script>
var CELL_WIDTH=66;  //diamond area width
var CELL_HEIGHT=32; //diamond area height
var activeCell=$("<img src=http://clip2net.com/clip/m10494/1277193046-block-698b.png>")
    .appendTo("#main")
    .css({"position": "absolute"});

//active diamond area
function overCell(x,y){
    var xC=parseInt(x/(CELL_WIDTH/2));
    var yC=parseInt(y/(CELL_HEIGHT/2));
    var xO=(xC%2==1);
    var yO=(yC%2==0);
    if((xO&&yO) || (!xO&&!yO)){
        //skip
    }else{
        activeCell.css({
            "left":(xC*(CELL_WIDTH/2))+"px",
            "top" :(yC*(CELL_HEIGHT/2))+"px"
        });
    }
}
$(function(){
    $("#main").mousemove(function(e){
        overCell(e.pageX,e.pageY);
   });  
});
</script>

i want when i move mouse over the diamond area,show activeCell on it.

but now ,it is not good,because mouse move to diamond area lower right,it will active next area,not very exactitude.

hot to optimize these codes? (i think i need a better arithmetic)

thanks all! :)

Upvotes: 1

Views: 298

Answers (1)

Zsolti
Zsolti

Reputation: 1607

This function should do the trick:

function overCell(x,y)
{ 
    //top left
    var f1 = -CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + CELL_HEIGHT/2;
    //bottom left
    var f2 =  CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + CELL_HEIGHT/2;
    //top right
    var f3 =  CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) - CELL_HEIGHT/2;
    //bottom right
    var f4 = -CELL_HEIGHT/CELL_WIDTH * (x%CELL_WIDTH) + 3*CELL_HEIGHT/2;

    if (f1 > 0 && f1 < CELL_HEIGHT/2 && y%CELL_HEIGHT <= f1)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH - CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT - CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f2 > CELL_HEIGHT/2 && f2 < CELL_HEIGHT && y%CELL_HEIGHT >= f2)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH - CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT + CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f3 > 0 && f3 < CELL_HEIGHT/2 && y%CELL_HEIGHT <= f3)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH + CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT - CELL_HEIGHT/2)+"px" 
        }); 
    }
    else if (f4 < CELL_WIDTH/2 && f4 > CELL_WIDTH/4 && y%CELL_HEIGHT >= f4)
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH + CELL_WIDTH/2)+"px", 
            "top" :(y-y%CELL_HEIGHT + CELL_HEIGHT/2)+"px" 
        }); 
    }
    else
    {
        activeCell.css({ 
            "left":(x-x%CELL_WIDTH)+"px", 
            "top" :(y-y%CELL_HEIGHT)+"px" 
        });
    }
}

Upvotes: 3

Related Questions