JSONファブリックjsを使用したオーバーレイの変更とプロット

Question

Fabric JSを使用してポリラインを描画するために、x、y座標のJSONファイルを生成しました。しかし、私の現在の問題は、私が描いているキャンバスがopenseadragon（OSD）である間に、私が使用する座標系はイメージピクセルです。したがって、座標系を画像ピクセルからビューポート座標に変更する必要があります。

私は変換を行うかもしれないopenseadragon imageToViewportCoordinatesの機能があることを知っています。しかし、問題は、どのようにx、y座標を解析して変換し、ポリラインをファブリックjsキャンバスに描画できるかです。

JSONファイルは以下の通りです：

{"version":"2.0.0-beta7","objects":[ 
    {"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[ 
      {"x":61146,"y":155098} 
     ]}, 
    {"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[ 
      {"x":61658,"y":154330} 
     ]}, 
    {"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[ 
      {"x":66778,"y":152538} 
     ]}, 
    {"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[ 
      {"x":67034,"y":152026} 
     ]}, 
    {"type":"polyline","fill":"rgba(250,0,0,0.8)","points":[ 
      {"x":60634,"y":151002}, 
      {"x":60378,"y":151258}, 
      {"x":60122,"y":151258}, 
      {"x":59866,"y":151258}, 
      {"x":59610,"y":151258}, 
      {"x":59354,"y":151514}, 
      {"x":59098,"y":151514}, 
      {"x":58842,"y":151514}, 
      {"x":58586,"y":151770}, 
      {"x":58330,"y":151770}, 
      {"x":58074,"y":152026}, 
      {"x":57818,"y":152282}, 
      {"x":57562,"y":152282}, 
      {"x":57306,"y":152282}, 
      {"x":57306,"y":152538}, 
      {"x":57050,"y":152794}, 
      {"x":56794,"y":152794}, 
      {"x":56538,"y":153050}, 
      {"x":56538,"y":153306}, 
      {"x":56794,"y":153306}, 
      {"x":57050,"y":153306}, 
      {"x":57306,"y":153050}, 
      {"x":57562,"y":152794}, 
      {"x":57818,"y":152794}, 
      {"x":58074,"y":153050}, 
      {"x":58330,"y":153306}, 
      {"x":58586,"y":153562}, 
      {"x":58842,"y":153562}, 
      {"x":59098,"y":153562}, 
      {"x":59354,"y":153306}, 
      {"x":59610,"y":153562}, 
      {"x":59866,"y":153818}, 
      {"x":60122,"y":154074}, 
      {"x":60378,"y":154074}, 
      {"x":60634,"y":154074}, 
      {"x":60890,"y":153818}, 
      {"x":61146,"y":153818}, 
      {"x":61402,"y":153818}, 
      {"x":61146,"y":153562}, 
      {"x":61402,"y":153306}, 
      {"x":61658,"y":153050}, 
      {"x":61914,"y":153306}, 
      {"x":62170,"y":153562}, 
      {"x":62170,"y":153818}, 
      {"x":62426,"y":153818}, 
      {"x":62682,"y":153818}, 
      {"x":62938,"y":154074}, 
      {"x":63194,"y":154074}, 
      {"x":63450,"y":154330}, 
      {"x":63194,"y":154586}, 
      {"x":62938,"y":154586}, 
      {"x":62682,"y":154586}, 
      {"x":62682,"y":154842}, 
      {"x":62426,"y":155098}, 
      {"x":62170,"y":155098}, 
      {"x":61914,"y":155354}, 
      {"x":61914,"y":155610}, 
      {"x":62170,"y":155610}, 
      {"x":62426,"y":155610}, 
      {"x":62682,"y":155866}, 
      {"x":62682,"y":156122}, 
      {"x":62426,"y":156378}, 
      {"x":62682,"y":156634}, 
      {"x":62426,"y":156890}, 
      {"x":62170,"y":156890}, 
      {"x":61914,"y":157146}, 
      {"x":61658,"y":156890}, 
      {"x":61402,"y":156890}, 
      {"x":61146,"y":156634}, 
      {"x":61402,"y":156378}, 
      {"x":61146,"y":156634}, 
      {"x":61146,"y":156890}, 
      {"x":61146,"y":157146}, 
      {"x":61402,"y":156890}, 
      {"x":61658,"y":157146}, 
      {"x":61658,"y":157402}, 
      {"x":61402,"y":157658}, 
      {"x":61146,"y":157914}, 
      {"x":61146,"y":158170}, 
      {"x":60890,"y":158426}, 
      {"x":60634,"y":158682}, 
      {"x":60634,"y":158938}, 
      {"x":60890,"y":159194}, 
      {"x":60890,"y":159450}, 
      {"x":60890,"y":159706}, 
      {"x":60890,"y":159962}, 
      {"x":60890,"y":160218}, 
      {"x":60890,"y":159962}, 
      {"x":60890,"y":159706}, 
      {"x":61146,"y":159450}, 
      {"x":61402,"y":159194}, 
      {"x":61658,"y":158938}, 
      {"x":61914,"y":158682}, 
      {"x":62170,"y":158682}, 
      {"x":62426,"y":158426}, 
      {"x":62682,"y":158682}, 
      {"x":62682,"y":158426}, 
      {"x":62938,"y":158170}, 
      {"x":63194,"y":158170}, 
      {"x":63194,"y":157914}, 
      {"x":63450,"y":157658}, 
      {"x":63706,"y":157658}, 
      {"x":63962,"y":157402}, 
      {"x":64218,"y":157146}, 
      {"x":64474,"y":157146}, 
      {"x":64730,"y":156890}, 
      {"x":64986,"y":156634}, 
      {"x":65242,"y":156634}, 
      {"x":64986,"y":156378}, 
      {"x":65242,"y":156122}, 
      {"x":65242,"y":155866}, 
      {"x":65498,"y":155610}, 
      {"x":65498,"y":155354}, 
      {"x":65498,"y":155098}, 
      {"x":65754,"y":154842}, 
      {"x":65498,"y":154586}, 
      {"x":65498,"y":154330}, 
      {"x":65498,"y":154074}, 
      {"x":65242,"y":153818}, 
      {"x":65242,"y":153562}, 
      {"x":65242,"y":153306}, 
      {"x":64986,"y":153050}, 
      {"x":64986,"y":152794}, 
      {"x":64730,"y":152538}, 
      {"x":64474,"y":152282}, 
      {"x":64218,"y":152026}, 
      {"x":63962,"y":151770}, 
      {"x":63706,"y":151514}, 
      {"x":63706,"y":151258}, 
      {"x":63450,"y":151258}, 
      {"x":63194,"y":151258}, 
      {"x":62938,"y":151002}, 
      {"x":62682,"y":151002}, 
      {"x":62426,"y":151258}, 
      {"x":62170,"y":151514}, 
      {"x":61914,"y":151258}, 
      {"x":61658,"y":151258}, 
      {"x":61402,"y":151002}, 
      {"x":61146,"y":151002}, 
      {"x":60890,"y":151002} 
     ]}]} 

あなたのヘルプは歓迎です！

Answer 1

あなたのJSONにある座標に合わせてビューポートの座標を変更できます。たとえば、座標を0から61,000まで拡大する場合は、次のようにします。

var viewer = OpenSeadragon({ 
    ... 
    tileSources: { 
    tileSource: url, 
    width: 61000 
    } 
});