Question

我将根据X和Y坐标确定哪个三角形处于活动状态的数学公式是什么？由此我需要返回'bottom'，'top'，'left'或'right'。

var x = 1;//horizontal coordinate (1~400)
var y = 1;//vertical coordinate (1~400)
var h = 400;//height of element
var w = 400;//width of element

要么我从未学过这样的公式，要么我不记得学习它。无论元素的尺寸如何（400x400,400x200等），该公式都应该有效。左上角的坐标是1和1.绝对没有框架/库。

小提琴：https://jsfiddle.net/6syp528t/

Answer 1

让我们将三角形标记为顺时针方向的1,2,3,4（从最顶端的方向开始）。最简单的策略可能是首先转换为坐标系，其原点位于三角形的中间位置：

xp = x - x0
yp = y - y0

其中(x0,y0)表示矩形中心的坐标。

现在，在此坐标系中，为了使点位于正方形内，我们需要|xp| < w/2和|yp| < h/2。然后为了区分三角形，条件是：

1: yp > |xp|
2: xp > |yp|
3: yp < -|xp|
4: xp < -|yp|

所以在代码中，它看起来像：

function testPoint(x, y, x0, y0, w, h){
    //recalculate coordinates with respect to the center of the rectangle
    var xp = x - x0;
    var yp = y - y0;

    var xpAbs = Math.abs(xp);
    var ypAbs = Math.abs(yp);

    //test if the point is in the rectangle
    if(xpAbs > w/2 || ypAbs > h/2) return 0;

    if(yp >= xpAbs){
        return 1;
    }else if(yp <= -xpAbs){
        return 3;
    }else if(xp > ypAbs){
        return 2;
    }else if(xp < -ypAbs){
        return 4;
    }
}


console.log(testPoint(2, 2, 2, 1, 4, 2)); //1 - i.e., the top-most triangle

Answer 2

不确定这是你正在寻找的数学公式，但这是一个简单的条件块的解决方案。

与此同时，我决定对SVG有一些乐趣，因为它已经很长时间了：）

var squareWidth = 100;
var squareHeight = 100;

document.getElementById("compute").addEventListener("click", function() {
		
		var x, y;
		x = parseInt(document.getElementById("x").value);
		y = parseInt(document.getElementById("y").value);
		if (x > squareWidth || x > squareHeight) {
			throw "X is too high!";
		}
		if (y > squareWidth || y > squareHeight) {
			throw "X is too high!";
		}

		var triangleId = wichTriangle(x, y);
		
		fade("1");
		fade("2");
		fade("3");
		fade("4");
		
		highlight(triangleId);
});

function wichTriangle(x, y) {

	 if ((x+y) < squareWidth) {
		if (x > y) {
			return 1;
		} else {
			return 2;
		}
	 } else {
		if (x > y) {
			return 3;
		} else {
			return 4;
		}
	 }
	 
 }
 
 function highlight(triangleId) {
	 document.getElementById(triangleId).style.fill = "yellow";
 }
 
 function fade(triangleId) {
	 document.getElementById(triangleId).style.fill = "grey";
 }

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>

X : <input type="text" id="x" value="50"/><br/>
Y : <input type="text" id="y" value="20"/><br/>
<button id="compute">Which triangle?</button>
<br/>


<svg height="100" width="100" id="shape">
  <polygon points="1,1 100,1 50,50" style="fill:grey;stroke:black;stroke-width:1" id="1"/>
  <polygon points="1,1 1,100 50,50" style="fill:grey;stroke:black;stroke-width:1" id="2"/>
  <polygon points="100,100 100,1 50,50" style="fill:grey;stroke:black;stroke-width:1" id="3"/>
  <polygon points="1,100 100,100 50,50" style="fill:grey;stroke:black;stroke-width:1" id="4"/>
  
  
</svg>

</body>
<script src="index.js"></script>
</html>

Answer 3

您可以使用返回0,1,2或3的函数，表示三角形。

你说你的坐标从1开始有点奇怪，因为标准方式是从0开始，这也是你在问题中提供的小提琴中发生的事情。

以下是添加到小提琴中的公式，工具提示显示＆＃34; top＆＃34;，＆＃34; left＆＃34;，＆＃34; right＆＃34; ＆＃34;底部＆＃34;或＆＃34;外面＆＃34;：

＆＃13;

function sideOfRectangle(x, y, w, h) {
    var side = (x * h > y * w) * 2   // +2 if at upper-right side of diagonal 1
          + ((w-1 - x) * h > y * w); // +1 if at upper-left side of diagonal 2
    return ["bottom", "left", "right", "top"][side]; // Convert to name
}

document.onmousemove = function(event) {
    var side = "outside";
    if (event.target.nodeName.toLowerCase() === 'img') {
        var rect = event.target.getBoundingClientRect(),
            x = event.clientX - rect.x,
            y = event.clientY - rect.y,
            h = Math.round(rect.height),
            w = Math.round(rect.width);
        side = sideOfRectangle(x, y, w, h);
    }    
    showText(event.clientX + 10, event.clientY - 20, side);
}

function showText(x, y, s) {
    var tooltip = document.getElementById('output');
    tooltip.style.top = y + 'px';
    tooltip.style.left = x + 'px';
    tooltip.textContent = s;
}

＆＃13;

<img alt="400x400" src="https://i.stack.imgur.com/yoDL4.png" />
<img alt="400x200" src="https://i.imgur.com/CctRt04.png" />
<span id="output" style="position:fixed"></span>

＆＃13;

根据X和Y坐标确定活动三角形

3 个答案: