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开发者_如何学C,it will active next area,not very exactitude.
hot to optimize these codes? (i think i need a better arithmetic)
thanks all! :)
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"
});
}
}
加载中,请稍侯......
精彩评论