如何测试坐标是否在菱形区域中？

Question

code link: http://jsbin.com/ozoma3/edit 代码链接： http : //jsbin.com/ozoma3/edit

codes (can copy/paste to a .html file, and run it) : 代码（可以将其复制/粘贴到.html文件并运行）：

<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. 我想将鼠标移到菱形区域上，在其上显示activeCell。

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! 谢谢大家！ :) :)

Answer 1

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" 
        });
    }
}

如何测试坐标是否在菱形区域中？

问题描述

1 个解决方案

解决方案1
3 已采纳 2010-06-23 05:55:50

如何测试坐标是否在菱形区域中？

问题描述

1 个解决方案

解决方案1 3 已采纳 2010-06-23 05:55:50

解决方案1
3 已采纳 2010-06-23 05:55:50