概要

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

背景

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

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

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

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

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

カスタマイズ

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

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

{}""]"}""tb,t,@iyoacdpdro"ey{}g""}n:""esst::toee""ulx#"[""":re""tcAtvpcctv"4nyau{etya:6nplr"opl9oeup:reu"bt"eo""eh1a:"s"::"tat:eh:t3i""t{"p-oT":tS":8neppv</9"xo"sgs/0,tlc:Svw2uyo/egw-agm/l>w4lomwe<.4Bnewcpw4o"nwto33d,t.ol.-yieryo8"n-"grf,gc,og5"on/4dn-ips4co/7eiadsnnf.tn8usobn=.bi\j8f"s7r3od.3n7c8leh3d"/."l1,o2r1i3s3/7g8a9u0/6g2a5u,-1F2r9a0g.m1e3n7t4/5g1a1u7-1F8r7a5gm9e4n5t._1f3r5a4g9080014a6.8j7p52,/1f6u5l8l./4f2u6l5l1/306/7d1e8f7a5ul8t8/5j.p9g6"9,6655273438,3003.3522949218752508.54150390625,3348.4240722656253485.021484375,2724.357910156252170.811767578125,2107.6337890625\"/svg>"

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

anno.}o)ni};(f"(sc!eraleueatctoteCiAlononns.oett.aavrtagileoutne.")s,e{lfeucntcotri.ovnal(useel=ecsteiloenc:tiaonny.)ta{rget.selector.value.replace("polygon","polyline");

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

TEI/XMLでの記述

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

<f/a<fcs/asu<<scirgz/usmfro<<zriiaanz/z/ofmlcpeo<<zo<<znaieehn!pon!poecl>ixe-ane-an>eeucm-te-te>>llxh>xh>xu:mpmp=riloplop"ld:lo:lo0==iyiiyi"""dgndlnhl=ot=ituta"ns"nsltys=se=ypei"i"=srg1g1":_n2n30/0_9_9"/0l0l3w0a.a.lw"y1y2rwe3e6x.cr7r5=eh_4_6"-a05028cn01051og010,7de_7_56i=0102"c"0809e#0700lsc051.r.h","8yu_31=nlc3c0"iah8h06fya3a51ren.n83.rg1g52c_e2e9"h0=1=3>/0"3"7l0#3#5o"c7crh8h1in_9_9s=s0s2/"i6i1glg2g.aan5n0uy__2/el1l7gra6a8a_y5y3u0e8e2-1r.r0F"_4_3r0201at0602gy0505mp_1_,ee0303n=0608t"0706/l0119ga"8".ay77uet5t4-ry,y5F"p9p8r>e4e4a=5=9g"."6ms1s0ei3i9ng5g3tn4n7_"9"5f>8>r02a49g6808207.157a3.31j06p08239/.4f35u53l21l22/95f4,u93l28l12/8907./56d,4e80f81a53u.6l97t61/98j67p65g5"532472384.3182238304287.3442347057,242867546.2050,528550983.7554125608339.02642453824772645.632557,951704115.672550,937468556.2052124183483.7052421160979.2613837758,940568225.,129177705.389101672657"5>7<8/1p2a5th1>290.137451171875,3383.121337890625"></path>

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

まとめ

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

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