crowd-line
用于在图像上绘制线条的小部件。每条线都与一个标签相关联,输出数据将报告每条线的起点和终点。
请参阅在 CodePen
以下是使用 <crowd-line>
元素的 Liquid 模板的示例。复制以下代码,并保存到具有 .html
扩展名的文件中。在任何浏览器中打开该文件,进行预览并与该模板进行交互。有关更多示例,请参阅该 GitHub 存储库
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <crowd-line name="crowdLine" src="{{ task.input.taskObject | grant_read_access }}" header="Add header here to describe the task" labels="['car','pedestrian','street car']" > <short-instructions> <p>Read the task carefully and inspect the image.</p> <p>Choose the appropriate label that best suits the image.</p> <p>Draw a line on each objects that the label applies to.</p> </short-instructions> <full-instructions> <p>Read the task carefully and inspect the image.</p> <p>Choose the appropriate label that best suits the image. <p>Draw a line along each object that the image applies to. Make sure that the line does not extend beyond the boundaries of the object. </p> <p>Each line is defined by a starting and ending point. Carefully place the starting and ending points on the boundaries of the object.</p> </full-instructions> </crowd-line> </crowd-form>
属性
此元素支持以下属性。
header
可选。要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。
initial-value
可选。一个 JSON 对象数组,其中每个对象在组件加载时都设置一条直线。数组中的每个 JSON 对象包含以下属性:
-
label – 作为标注任务的一部分分配给直线的文本。此文本必须与在
<crowd-line>
元素的 labels 属性中定义的其中一个标签相匹配。 -
vertices – 相对于图像左上角的直线起点和终点的
x
和y
像素坐标。
initial-value="{ lines: [ { label: 'sideline', // label of this line annotation vertices:[ // an array of vertices which decide the position of the line { x: 84, y: 110 }, { x: 60, y: 100 } ] }, { label: 'yardline', vertices:[ { x: 651, y: 498 }, { x: 862, y: 869 } ] } ] }"
通过 initial-value
属性可以调整直线设置。在工作人员答案输出中通过 initialValueModified
来跟踪工作人员答案是否已调整过。
labels
必需。一个 JSON 格式的字符串数组,其中每个字符串都是工作人员可以分配给直线的一个标签。
限制:10 个标签
label-colors
可选。字符串数组。每个字符串都是标签的十六进制代码。
name
必需。此小部件的名称。它用作小部件输入(以输出格式表示)的密钥。
src
必需。要在其上绘制直线的图像的 URL。
区域
此元素需要以下区域。
full-instructions
有关如何绘制直线的一般说明。
short-instructions
在醒目位置显示的重要的任务特定说明。
元素层次结构
此元素具有以下父元素和子元素。
输出
inputImageProperties
一个 JSON 对象,它指定正在由工作人员注释的图像的维度。此对象包含以下属性。
-
height – 图像的高度(以像素为单位)。
-
width – 图像的宽度(以像素为单位)。
lines
一个 JSON 数组,其中包含具有直线标签和顶点的对象。
-
label – 为直线指定的标签。
-
vertices – 相对于图像左上角的直线起点和终点的
x
和y
像素坐标。
例 :示例元素输出
下面是此元素中的输出示例。
{ "crowdLine": { //This is the name you set for the crowd-line "inputImageProperties": { "height": 1254, "width": 2048 }, "lines": [ { "label": "yardline", "vertices": [ { "x": 58, "y": 295 }, { "x": 1342, "y": 398 } ] }, { "label": "sideline", "vertices": [ { "x": 472, "y": 910 }, { "x": 1480, "y": 600 } ] } ] } }
另请参阅
有关更多信息,请参阅下列内容。