0

カーソル (x, y) を調べて、複数の長方形 ( ) のいずれかに収まるかどうかを確認する関数がありますa<x<b, c<y<d。ただし、カーソルが特定の長方形に収まるかどうかに基づいてブール値を設定し、カーソルが他の長方形に収まったときにのみリセットする必要があります。言い換えると

  1. カーソルが長方形 X 内にある場合、A は真です。

  2. カーソルが四角形 1、2、3、または 4 内にある場合、A は false

  3. Y または Z 以外の場所にある場合、A は以前の値を保持します。

問題は、最初の四角形を離れると、他の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 に答える