0

三角形の辺を表す SVG 線の配列があり、最も長い線 (斜辺) に色を付けたいと考えています。とが SVG要素abであると仮定すると...bccaline

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() に渡す場合、その関数は 2 つの引数を取り、それらを比較した結果 (-1、0、または 1) を返す必要があります。数値を比較する場合は、2 つの引数を減算するだけです: Mozilla Array.ソートリファレンス

サンプルを機能させる簡単な方法は次のようになります。

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

そして、あなたがすでに持っているような残り。最低から最高へのソートと最高から最低へのソートの違いになるため、減算の順序が重要であることに注意してください。

于 2013-01-03T04:30:10.413 に答える
2

functioninは 2 つの引数を想定しているためarray.sort(function)、次の整数を返す必要があります。

  • 0 未満 (最初の値が 2 番目の値より前であることを示します);
  • ゼロ (2 つが等しいことを示します);
  • ゼロより大きい (2 番目の値が最初の値より前であることを示します)。

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;
}

最長要素が -1 の場合、長さが 0 より大きい線はありません。それ以外の場合、斜辺は配列 [最長要素] です。

この例も sort() の例も、同じ長さの線 (正三角形など) に対して特別な処理を行っていないことに注意してください。

于 2013-01-03T04:38:06.160 に答える