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

Question

我正在使用 angularjs 和 javascript 在具有以下 json 格式的 html5 画布上绘制矩形。 我需要根据 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 或位置进行排序的条件：

一个。外部矩形（outerRects）必须从左到右排序。它们可以在多行中，如下所示

1  2

3  4

b.这些线也将在外部矩形内从左到右排序。

c。内部矩形将根据它们在行顶部的位置从上到下排序。

这将是预期的 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 做到这一点？

谢谢

Answer 1

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

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>');