【问题标题】:Calculate quadrant for triangles inside a rectangle计算矩形内三角形的象限
【发布时间】:2012-08-29 23:56:41
【问题描述】:

我有以下方法计算一个正方形中的象限,宽度和高度相等,除以四个三角形:

function getQuadtrant(x, y, width, height){
    if(y < width/2 && x < width-y && x > y) {

    alert('top triangle');

    }

    if(y > width/2 && x > width-y && x < y) {

    alert('bottom triangle');

    }

    if(x < height/2 && x < width-y && x < y) {

    alert('left triangle');

    }


    if(x > height/2 && x > width-y && x > y) {

    alert('right triangle');

    }
}

但是,我有一个矩形 div,宽度为 249px,高度为 404px,如何获得象限?上面的代码在当前状态下会给出错误的输出,当我选择三角形的特定区域(例如顶部三角形)时,它会提示“底部三角形”。

【问题讨论】:

  • "上面的代码在当前状态下会给出错误的输出。" --- 我们需要猜测吗?
  • @zerkms 抱歉,我已经更新了问题。

标签: javascript


【解决方案1】:

我会这样做:

function getQ(x, y, w, h) {
    var quadrants = [
        ['left', 'top'],
        ['bottom', 'right']
    ];

    if (y > h / w * x) {
        quadrants = quadrants[0];
    } else {
        quadrants = quadrants[1];
    }

    return (y < -h / w * x + h) ? quadrants[0] : quadrants[1];
}


console.log(getQ(10, 20, 20, 20));​

这个解决方案非常简单,并且基于对角线方程。如果y 在主对角线上方 - 那么它要么是left 要么是top (quadrants[0])。如果y 低于次对角线 - 它是left,否则它是top。底部也一样。

http://jsfiddle.net/zerkms/aCAfw/

【讨论】:

  • @Imran Azad:从我的角度来看,这个解决方案更加更清晰
  • 是的,你是对的,我必须承认它更容易阅读和理解。
  • 在 2021 年遇到了这个优雅的解决方案。非常好!
【解决方案2】:

您的前两个测试是将ywidth/2 进行比较,而我认为它应该与height/2 进行比较。

编辑:这里有一些修改后的代码适用于所有矩形,而不仅仅是正方形:

function getQuadrant(x,y,width,height) {
    var l = {x:x-width/2,y:y-height/2}, // "local" coords - origin at centre
        g = l.x/width*height; // "gradient" - position on diagonal
    if( l.y < -g && l.y < g) alert("Top");
    else if( l.y < -g && l.y >= g) alert("Right");
    else if( l.y >= -g && l.y >= g) alert("Bottom");
    else if( l.y >= -g && l.y < g) alert("Left");
    else alert("Tell Kolink he messed up");
}

【讨论】:

  • 感谢您的回复,几乎成功了!问题是现在靠近顶点的三角形顶部根本不会提醒任何东西,而应该提醒“顶部三角形”。
  • 我怀疑width-y 应该是height-y。但是,这表示您的代码需要修改,因为它对于非方形元素会失败。
  • 你是救生员!真的很感激!
猜你喜欢
  • 1970-01-01
  • 2015-02-12
  • 1970-01-01
  • 2018-04-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多