根据angularjs中画布上的位置对列表项进行排序

Sorting list items based on postion on canvas in angularjs

本文关键字：列表排序位置 angularjs 根据更新时间：2023-09-26

我正在html5画布上使用angularjs和javascript以下面的json格式绘制矩形。我需要根据x，y的位置对数组进行排序。

{
"obj0": {
"outerRects": [
  {
    "outerRectRoi": {
      "x1": 0,
      "x2": 650,
      "x3": 350,
      "x4": 340,
      "y1": 0,
      "y2": 680,
      "y3": 0,
      "y4": 680
    },
    "line": [
      {
        "lineRoi": {
          "x1": 471,
          "x2": 460,
          "y1": 1,
          "y2": 680
        },
        "innerRect": [
          {
            "innerRoi": {
              "x1": 368,
              "x2": 390,
              "y1": 50,
              "y2": 55
            }
          },
          {
            "innerRoi": {
              "x1": 368,
              "x2": 390,
              "y1": 70,
              "y2": 74
            }
          }
        ]
      },
      {
        "lineRoi": {
          "x1": 202,
          "x2": 197,
          "y1": 1,
          "y2": 680
        }
      },
      {
        "lineRoi": {
          "x1": 380,
          "x2": 372,
          "y1": 1,
          "y2": 680
        }
      }
    ]
  },
  {}
]
},
"obj1": {}
}

以下是根据Roi或画布上的位置进行排序的条件：

a。外部矩形（outerResults）必须从左到右排序。它们可以在下方的多行中

1  2
3  4

b。行也要在外部矩形中从左到右排序。

c。innerRect将根据其在行顶部的位置从上到下进行排序。

这将是预期的json结果

{
"obj0": {
"outerRects": [
  {
    "outerRectRoi": {
      "x1": 0,
      "x2": 650,
      "x3": 350,
      "x4": 340,
      "y1": 0,
      "y2": 680,
      "y3": 0,
      "y4": 680
    },
    "line": [
      {
        "lineRoi": {
          "x1": 202,
          "x2": 197,
          "y1": 1,
          "y2": 680
        },
        "innerRect": []
      },
      {
        "lineRoi": {
          "x1": 380,
          "x2": 372,
          "y1": 1,
          "y2": 680
        },
        "innerRext": []
      },
      {
        "lineRoi": {
          "x1": 471,
          "x2": 460,
          "y1": 1,
          "y2": 680
        },
        "innerRect": [
          {
            "innerRoi": {
              "x1": 368,
              "x2": 390,
              "y1": 70,
              "y2": 74
            }
          },
          {
            "innerRoi": {
              "x1": 368,
              "x2": 390,
              "y1": 50,
              "y2": 55
            }
          }
        ]
      }
    ]
  },
  {}
]
},
"obj1": {}
}

如何使用angularjs和javascript实现这一点？

感谢

您可以迭代各种数组，并根据需要使用它们的属性对子数组进行排序。

var object = { "obj0": { "outerRects": [{ "outerRectRoi": { "x1": 0, "x2": 650, "x3": 350, "x4": 340, "y1": 0, "y2": 680, "y3": 0, "y4": 680 }, "line": [{ "lineRoi": { "x1": 471, "x2": 460, "y1": 1, "y2": 680 }, "innerRect": [{ "innerRoi": { "x1": 368, "x2": 390, "y1": 50, "y2": 55 } }, { "innerRoi": { "x1": 368, "x2": 390, "y1": 70, "y2": 74 } }] }, { "lineRoi": { "x1": 202, "x2": 197, "y1": 1, "y2": 680 } }, { "lineRoi": { "x1": 380, "x2": 372, "y1": 1, "y2": 680 } }] }, {}] }, "obj1": {} }
object.obj0.outerRects.forEach(function (a) {
    if (a.line) {
        a.line.sort(function (a, b) {
            return a.lineRoi.x1 - b.lineRoi.x1;
        });
        a.line.forEach(function (b) {
            if (b.innerRect) {
                b.innerRect.sort(function (a, b) {
                    return a.innerRoi.y1 - b.innerRoi.y1;
                });
            }
        });
    }
});
document.write('<pre>' + JSON.stringify(object, 0, 4) + '</pre>');