Zenn
📖

Annotorious v2のpolygonツールを使って、polylineを作成する

に公開
Vue.js
XML
annotation
TEI
annotorious
tech

概要

Annotorious v2のpolygonツールを使って、polylineを作成する方法の備忘録です。

背景

Annotorious v2のウェブサイトは以下です。

https://annotorious.github.io/getting-started/

以下のように、polygonを記述することができます。

一方、同様の方法でpolylineを記述するツールは、以下のプラグインを含めて、提供されていないようでした。

https://github.com/annotorious/annotorious-v2-selector-pack

カスタマイズ

以下のような多角形を作成した場合、

以下のようなJSONファイルが作成されます。

{
    "type": "Annotation",
    "body": [
        {
            "type": "TextualBody",
            "value": "polygon",
            "purpose": "commenting"
        }
    ],
    "target": {
        "source": "https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg",
        "selector": {
            "type": "SvgSelector",
            "value": "<svg><polygon points=\"3383.121337890625,1290.137451171875 945.135498046875,1658.426513671875 885.9696655273438,3003.352294921875 2508.54150390625,3348.424072265625 3485.021484375,2724.35791015625 2170.811767578125,2107.6337890625\" /></svg>"
        }
    },
    "@context": "http://www.w3.org/ns/anno.jsonld",
    "id": "#c469b1a3-8902-4443-8f54-47df8bb87d7e"
}

上記に対して、autoCloseのような変数を用意し、これがfalseの場合、polygonという文字列をpolylineに変更する処理を加えました。

anno.on("createAnnotation", function (selection: any) {
      if(!autoClose.value) {
        selection.target.selector.value = selection.target.selector.value.replace("polygon", "polyline");
      }
      ...
    });

これにより、以下のように、polygonツールをベースとして、polygonとpolylineを使い分けることができます。

TEI/XMLでの記述

TEI/XMLでの多角形の記述例として、path要素を使用することができます。この場合、polygonであれば始点を終点の後に追加することで、多角形を表現することができます。

<facsimile>
  <surface ulx="0" uly="0" lrx="8176" lry="6132">
    <graphic url="https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg" />
    <zone xml:id="layer_000" change="#ch_layer_000" n="layer_01" type="layer">
      <zone xml:id="sign_layer_000_0000" change="#ch_sign_layer_000_0000" type="sign">
        <!-- polygon -->
        <path points="1290.137451171875,3383.121337890625 1658.426513671875,945.135498046875 3003.352294921875,885.9696655273438 3348.424072265625,2508.54150390625 2724.35791015625,3485.021484375 2107.6337890625,2170.811767578125 1290.137451171875,3383.121337890625"></path>
      </zone>
      <zone xml:id="sign_layer_000_0001" change="#ch_sign_layer_000_0001" type="sign">
        <!-- polyline -->
        <path points="1393.265625,5290.81005859375 1921.02783203125,3869.745849609375 2982.731689453125,3829.64013671875 3428.122802734375,4874.005859375 2683.244384765625,5741.7509765625 2138.024169921875,4582.19775390625"></path>
      </zone>
    </zone>
  </surface>
</facsimile>

アプリケーションによっては、始点と終点が一致しなくても閉じた図形を描くことがあるかもしれませんが、polygonとpolylineを使い分ける方法として、参考になりましたら幸いです。

まとめ

Annotorious v2を用いたpolylineの表現にあたり、参考になりましたら幸いです。

なお、Annotoriousの最新はv3となっており、こちらでも同様の方法が適用かと思います。

https://zenn.dev/nakamura196/articles/5e89dc0af23a78

Discussion