0

我有一个函数可以查看光标 (x, y) 以查看它是否落在几个矩形 ( a<x<b, c<y<d) 之一内。但是，我需要根据光标是否落入特定矩形来设置布尔值，并且仅在光标落入其他矩形时才重置它。换句话说

  1. 如果光标落在矩形 X 内，则 A 为真

  2. 如果光标落在矩形 1、2、3 或 4 内，则 A 为假

  3. 如果 A 在 Y 或 Z 之外的任何位置，则保留其以前的值

问题是无论我做什么，如果我离开第一个矩形，无论我是否访问其他 2 个矩形，布尔值都会返回 false。我尝试将布尔值设为全局，但这无济于事。

代码;

var r
var s
var l
var inCenter = false

function makeRects(a,b)


{       
    r = a-b
    s = (a/2) - (b/2)
    l = (a/2) + (b/2)

    lSide = new Array(4)
    lSide[0] = 0
    lSide[1] = 0
    lSide[2] = a
    lSide[3] = b

    tSide = new Array(4)
    tSide[0] = 0
    tSide[1] = 0
    tSide[2] = b
    tSide[3] = a

    rSide = new Array(4)
    rSide[0] = r
    rSide[1] = 0
    rSide[2] = b
    rSide[3] = b

    bSide = new Array(4)
    bSide[0] = 0
    bSide[1] = r
    bSide[2] = b
    bSide[3] = b

    aSquare = new Array(4)
    aSquare[0] = 0
    aSquare[1] = 0
    aSquare[2] = s
    aSquare[3] = s

    bSquare = new Array(4)
    bSquare[0] = l
    bSquare[1] = 0
    bSquare[2] = b
    bSquare[3] = s

    cSquare = new Array(4)
    cSquare[0] = 0
    cSquare[1] = l
    cSquare[2] = s
    cSquare[3] = r

    dSquare = new Array(4)
    dSquare[0] = l
    dSquare[1] = l
    dSquare[2] = r
    dSquare[3] = r

    lCenter = new Array(4)
    lCenter[0] = 0
    lCenter[1] = s
    lCenter[2] = b
    lCenter[3] = l

    tCenter = new Array(4)
    tCenter[0] = s
    tCenter[1] = 0
    tCenter[2] = l
    tCenter[3] = b

    rCenter = new Array(4)
    rCenter[0] = r
    rCenter[1] = s
    rCenter[2] = a
    rCenter[3] = l

    bCenter = new Array(4)
    bCenter[0] = s
    bCenter[1] = r
    bCenter[2] = l
    bCenter[3] = a

    mCenter = new Array(4)
    mCenter[0] = s
    mCenter[1] = s
    mCenter[2] = l
    mCenter[3] = l
} 

function cursor(a,b) 

{
    var inaSquare = false
    var inbSquare = false
    var incSquare = false
    var indSquare = false
    var inCenter = false

    if ((a>aSquare[0] && a<aSquare[2])&&(b>aSquare[1] && b<aSquare[3]))
    {
    inaSquare = true
    post("aSquare");
    post();
    }

    if ((a>bSquare[0] && a<bSquare[2])&&(b>bSquare[1] && b<bSquare[3]))
    {
    inbSquare = true
    post("bSquare");
    post();
    }

    if ((a>cSquare[0] && a<cSquare[2])&&(b>cSquare[1] && b<cSquare[3]))
    {
    inbSquare = true
    post("cSquare");
    post();
    }

    if ((a>dSquare[0] && a<dSquare[2])&&(b>dSquare[1] && b<dSquare[3]))
    {
    indSquare = true
    post("dSquare");
    post();
    }

    if (inaSquare||inbSquare||incSquare||indSquare)
    {
    inCenter = false
    }

    if ((a>mCenter[0] && a<mCenter[2])&&(b>mCenter[1] && b<mCenter[3]))
    {
    inCenter = true
    inaSquare = false
    inbSquare = false
    incSquare = false
    indSquare = false
    }

    if (((inCenter && a>s) && a<l) && b<lCenter[3])

    {
    outlet (1, 1)
    }

    else if (((inCenter && a>s) && a<l) && b>rCenter[0])

    {
    outlet (1, 2)
    }

    else if (((inCenter && b>s) && b<l) && a<tCenter[3])

    {
    outlet (1, 3)
    }


    else if (((inCenter && b>s) && b<l) && b>bCenter[1])

    {
    outlet (1, 4)
    }

    else

    {
    outlet (1, 0)
    }
    post("inCenter");
    post(inCenter);
    post();
    post("inaSquare");
    post(inaSquare);
    post();
    post("inbSquare");
    post(inbSquare);
    post();
    post("incSquare");
    post(incSquare);
    post();
    post("indSquare");
    post(indSquare);
    post();

}
4

3 回答 3

1

很抱歉，这不是一个真正的答案，但我已经编辑了您的代码以使用循环和数组/映射。这样你就可以得到更多的帮助。希望你也能从中学到一些东西:)

因此，您的代码也可能如下所示：

var r
var s
var l

function makeRects(a,b)
{  
    r = a-b
    s = (a/2) - (b/2)
    l = (a/2) + (b/2)

    // Place all arrays inside maps, so that we can loop through them later.
    side = {
        l: [0, 0, a, b],
        t: [0, 0, b, a],
        r: [r, 0, b, b],
        b: [0, r, b, b],
    }

    square = {
        a: [0, 0, s, s],
        b: [l, 0, b, s],
        c: [0, l, s, r],
        d: [l, l, r, r]
    }

    center = {
        l: [0, s, b, l],
        t: [s, 0, l, b],
        r: [r, s, a, l],
        b: [s, r, l, a],
        m: [s, s, l, l]
    }
}

function cursor(a,b)
{
    var inside = {
        a: false,
        b: false,
        c: false,
        d: false,
        center: true
    }

    // This loop will run through every key of the map, and x will hold the key
    for (var x in square) {
        if ((a>square[a][x] && a<square[x][2])&&(b>square[x][1] && b<square[x][3]))
        {
            inside[x] = true;
            // Instead of checking if the cursor is inside the center, we assume it
            // is by default, and if it is found inside a square, inside['center'] is set to false
            inside['center'] = false;
            post(x + "Square");
            post();
        }
    }

    // Not sure what you want to do here...
    if (((inside['center'] && a>s) && a<l) && b<center['l'][3])
    {
    outlet (1, 1)
    }

    else if (((inside['center'] && a>s) && a<l) && b>center['r'][0])
    {
    outlet (1, 2)
    }

    else if (((inside['center'] && b>s) && b<l) && a<center['t'][3])
    {
    outlet (1, 3)
    }


    else if (((inside['center'] && b>s) && b<l) && b>center['b'][1])
    {
    outlet (1, 4)
    }

    else
    {
    outlet (1, 0)
    }


}
于 2012-06-05T00:10:53.887 回答
0

好的，我根据我认为您要完成的工作修改了原始演示，但它仍然不是很清楚，因此您需要更好地描述您要完成的工作，而不是如何根据矩形坐标命中测试切换布尔值。您尝试完成的工作可能会以更简单的方式完成，而无需借助基于坐标的命中测试。

演示：

http://jsfiddle.net/DaveAlger/cVPpU/5/

html:

<p id="toggle-state">false: center not hit</p>
<p id="mouse-xy"></p>

<canvas id="top" class="box" x="200" y="50" width="100" height="100" c="#933" b="#faa"></canvas>
<canvas id="left" class="box" x="50" y="200" width="100" height="100" c="#993" b="#ffa"></canvas>
<canvas id="right" class="box" x="350" y="200" width="100" height="100" c="#696" b="#dfd"></canvas>
<canvas id="bottom" class="box" x="200" y="350" width="100" height="100" c="#369" b="#adf"></canvas>
<canvas id="center" class="box" x="200" y="200" width="100" height="100" c="#999" b="#ddd"></canvas>

CSS：

.box{position: absolute;}
#mouse-xy{float:right;padding:30px;color:#999;font-family:sans-serif;}

js：

var isCenterHit = false;
var checkCenterHit = true;

// draw canvas rectangles
$('.box').each(function(i) {
    //alert(i);
    var id = $(this).attr('id')
    var w = $(this).width();
    var h = $(this).height();
    var c = $(this).attr('c');
    var x = $(this).attr('x');
    var y = $(this).attr('y');

    drawRect( document.getElementById( id ).getContext('2d'), w, h, c, id );
    $(this).offset({top: y, left: x});
});

function drawRect( ctx, width, height, color, text ) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = '#fff';
    ctx.font = '30px sans-serif';
    ctx.textBaseline = 'top';
    ctx.fillText(text, 0, 0);
}

// listen for mouse over
$(document).mousemove(function(e){
    var x = e.pageX;
    var y = e.pageY;

    var tX = $(e.target).attr('x');
    var tY = $(e.target).attr('y');
    var tW = $(e.target).width();
    var tH = $(e.target).height();

    // update mouse location
    $('#mouse-xy').html("center hit: " + isCenterHit + "  |  X: " + x + " Y: " + y);

    // rectangle coordinate hit test (this can be done other ways too)
    if ( x > tX && x < tX + tW && y > tY && y < tY + tH ) {

        // toggle the boolean
        if ( checkCenterHit && $(e.target).attr('id') === 'center' ) {
            isCenterHit = !isCenterHit;
            checkCenterHit = false;
        }

        if ( isCenterHit ) {
            // do this when center hit state is 'on'
            $('body').css('background-color',$(e.target).attr('b'));
            $('canvas').css('cursor','pointer');
        } else {
            // do this when center hit state is 'off'
            $('body').css('background-color','');
            $('canvas').css('cursor','');
        }
    }
    else {
        $('body').css('background-color','#ffffff');
        checkCenterHit = true;
    }
});
于 2012-06-04T23:25:38.487 回答
0

可能您的命中测试函数需要一个名为的标志doTest最初设置为 true，然后在命中中心矩形后设置为 false

然后你可以doTest再次设置为 true 一旦不同的矩形被击中

于 2012-06-06T19:05:39.327 回答