crowd-polygon
用于在图像上绘制多边形并将标签分配给每个多边形中包含的图像部分的小部件。
请参阅在 CodePen
以下是使用 <crowd-polygon>
元素的 Liquid 模板的示例。复制以下代码,并保存到具有 .html
扩展名的文件中。在任何浏览器中打开该文件,进行预览并与该模板进行交互。
属性
此元素支持以下属性。
header
要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。
labels
JSON 格式的字符串数组,其中每个字符串都是工作人员可以分配给多边形包含的图像部分的一个标签。
name
此小部件的名称。它用作小部件输入(以输出格式表示)的密钥。
src
要在其上绘制多边形的图像的 URL。
initial-value
JSON 对象的数组,其中每个对象在组件加载时都定义一个要绘制的多边形。数组中的每个 JSON 对象包含以下属性。
-
label – 作为标注任务的一部分分配给多边形的文本。此文本必须与在 <crowd-polygon> 元素的 labels 属性中定义的其中一个标签相匹配。
-
vertices – 一个 JSON 对象数组。每个对象都包含多边形中某个点的 x 和 y 坐标值。
initial-value
属性可能类似这样。
initial-value = '[ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, ... { "x": 759, "y": 281 } ] } ]'
由于此 JSON 数组将位于 HTML 元素中,所以必须用单引号或双引号括起来。上面的示例使用单引号在 JSON 本身中封装 JSON 和双引号。如果您必须在 JSON 中混合使用单引号和双引号,请将其替换为 HTML 实体代码("
表示双引号,'
表示单引号)以安全转义它们。
元素层次结构
此元素具有以下父元素和子元素。
区域
以下区域是必需的。
full-instructions
有关如何绘制多边形的一般说明。
short-instructions
在醒目位置显示的重要的任务特定说明。
输出
此元素支持以下输出。
polygons
JSON 对象的数组,其中每个对象描述已由工作人员创建的一个多边形。数组中的每个 JSON 对象包含以下属性。
-
label – 作为标注任务的一部分分配给多边形的文本。
-
vertices – 一个 JSON 对象数组。每个对象都包含多边形中某个点的 x 和 y 坐标值。图像左上角的坐标为 0,0。
inputImageProperties
一个 JSON 对象,它指定正在由工作人员注释的图像的维度。此对象包含以下属性。
-
height – 图像的高度(以像素为单位)。
-
width – 图像的宽度(以像素为单位)。
例 :示例元素输出
以下是此元素的常见使用情况的输出示例。
单个标签,单个多边形
{ "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] } ] } } ]
单个标签,多个多边形
[ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "dog", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ]
多个标签,多个多边形
[ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "cat", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ]
您可以有多个标签,但只有所使用的标签会显示在输出中。
另请参阅
有关更多信息,请参阅下列内容。