翻译者：宋杰

原文链接：https://iiif.io/api/cookbook/recipe/0266-full-canvas-annotation/

译文：

用例

对于一个IIIF资源，你想给该资源添加一个简单的注释，其中你想突出显示的资源区域不是一个矩形。焦点区域的形状需要精确划定，以便只突出图像中与注释相关的部分。

实现说明

IIIF Presentation 3.0 API本身并不讨论非矩形注释，而是通过引用从W3C网络注释数据模型中纳入这些注释。对于这个和IIIF注释中使用的其他网络注释的完整描述，我们建议你阅读该文件。

W3C的数据模型要求非矩形的多边形注释用可扩展矢量图形（SVG）标记格式来描述。请注意，客户端对SVG的解析各不相同，有效的SVG可能不会像你期望的那样显示。

在审查你的SVG数据时，根据W3C的数据模型，删除所有的造型和转换功能。为了确保你的SVG标记是有效的，你可以使用W3C验证器。SVG可以作为坐标空间中的绝对点或沿路径的相对点进行有效标记。

SVG多边形相对于其目标的大小和位置需要特别注意。如果目标是整个Canvas，那么SVG视口将被假定为覆盖整个Canvas。另一方面，如果SVG的坐标被映射到Canvas的一部分，那么它的目标必须是Canvas的矩形边界框，SVG视口应该放在这个边界框中。如果视口和它的目标区域（边界框或整个Canvas）的尺寸不一样，那么SVG必须被缩放，使其覆盖该区域。这可能会导致X和Y维度的缩放比例不同。

限制

这种方法不应该被用来描述非旋转的矩形区域。

示例

在这个Manifest中，我们正在高亮显示哥廷根的一个喷泉，上面有一个雕像，想象一下，我们希望在高亮中相当精确。客户端不应显示图像上的边界框。

JSON-LD | 在Mirador中查看

  1. {
  2.   "@context": "http://iiif.io/api/presentation/3/context.json",
  3.   "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/manifest.json",
  4.   "type": "Manifest",
  5.   "label": {
  6.     "en": [
  7.       "Picture of Göttingen taken during the 2019 IIIF Conference"
  8.     ]
  9.   },
  10.   "items": [
  11.     {
  12.       "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/canvas/p1",
  13.       "type": "Canvas",
  14.       "height": 3024,
  15.       "width": 4032,
  16.       "items": [
  17.         {
  18.           "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/page/p1/1",
  19.           "type": "AnnotationPage",
  20.           "items": [
  21.             {
  22.               "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/annotation/p0001-image",
  23.               "type": "Annotation",
  24.               "motivation": "painting",
  25.               "body": {
  26.                 "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
  27.                 "type": "Image",
  28.                 "format": "image/jpeg",
  29.                 "height": 3024,
  30.                 "width": 4032,
  31.                 "service": [
  32.                   {
  33.                     "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
  34.                     "profile": "level1",
  35.                     "type": "ImageService3"
  36.                   }
  37.                 ]
  38.               },
  39.               "target": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/canvas/p1"
  40.             }
  41.           ]
  42.         }
  43.       ],
  44.       "annotations": [
  45.         {
  46.           "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/page/p2/1",
  47.           "type": "AnnotationPage",
  48.           "items": [
  49.             {
  50.               "id": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/annotation/p0002-svg",
  51.               "type": "Annotation",
  52.               "motivation": "tagging",
  53.               "body": {
  54.                 "type": "TextualBody",
  55.                 "value": "Gänsenliessel-Brunnen",
  56.                 "language": "de",
  57.                 "format": "text/plain"
  58.               },
  59.               "target": {
  60.                 "type": "SpecificResource",
  61.                 "source": "https://iiif.io/api/cookbook/recipe/0261-non-rectangular-commenting/canvas/p1",
  62.                 "selector": {
  63.                   "type": "SvgSelector",
  64.                   "value": "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><path d='M270.000000,1900.000000 L1530.000000,1900.000000 L1530.000000,1610.000000 L1315.000000,1300.000000 L1200.000000,986.000000 L904.000000,661.000000 L600.000000,986.000000 L500.000000,1300.000000 L270,1630 L270.000000,1900.000000' /></g></svg>"
  65.                 }
  66.               }
  67.             }
  68.           ]
  69.         }
  70.       ]
  71.     }
  72.   ]
  73. }

相关专题

  • 简单注释—标签