0

我有一组代表三角形边的 SVG 线，我想为最长的一条（斜边）着色。假设ab和是 SVG元素bc...caline

var hypotenuse = [ab, bc, ca].sort(getLineLength)[0];
hypotenuse.setAttribute("stroke-width", 5);

function getLineLength(el) {
    var x1 = el.getAttribute("x1");
    var x2 = el.getAttribute("x2");
    var y1 = el.getAttribute("y1");
    var y2 = el.getAttribute("y2");
    var xs = x2 - x1;
    var ys = y2 - y1;
    xs = xs * xs;
    ys = ys * ys;
    return Math.sqrt(xs + ys);
}​

这不起作用，它似乎总是抓住第一个元素。它看起来也不是很直观。在Javascript中实现这一目标的正确方法是什么？我知道如何在循环中做到这一点，但我想知道是否有一些功能性习语可以让我实现这一点。

JSFiddle 在这里：http: //jsfiddle.net/btbkd/

4

3 回答 3

2

当您将函数传递给 sort() 时，该函数必须接受两个参数并返回比较它们的结果（-1、0 或 1），或者如果比较数字，则只需减去两个参数：Mozilla Array。排序参考

使您的示例工作的简单方法应该是这样的：

var hypotenuse = [ab, bc, ca].sort(function(lineOne, lineTwo) {
    return getLineLength(lineTwo) - getLineLength(lineOne);
})[0];

然后剩下的就像你已经拥有的一样。请注意，减法的顺序很重要，因为它将是从最低到最高或从最高到最低排序之间的差异。

于 2013-01-03T04:30:10.413 回答
2

因为functioninarray.sort(function)需要两个参数，你应该返回一个整数，它是

  • 小于零（表示第一个应该在第二个之前）；
  • 零（表示两者相等）；
  • 大于零（表示第二个比第一个早）。

MDN 文档

你也忘了重置线宽。

JSFiddle

编辑：

请注意，我Math.sqrt从您的函数中删除了部分getLineLength，因为如果比较是您对该函数的期望，则不需要计算平方根，删除它可能会使其更快一点。

于 2013-01-03T04:33:29.863 回答
0

我不记得 JavaScript 语法，所以语法可能是错误的，但如果我正确理解你的问题，就不需要 sort() 并且你应该能够做到：

var maxLength = 0;
var longestElement = -1;
for (var i = 0; i < array.length; i++) {
    if( getLineLength(array[i]) > maxLength )
        longestElement = i;
}

如果longestElement 为-1，则没有长度大于0 的线。否则，斜边为array[longestElement]。

请注意，这和 sort() 示例都没有对等长的线（例如等边三角形）进行任何特殊处理。

于 2013-01-03T04:38:06.160 回答