JSON 패브릭 js를 사용하여 오버레이 수정 및 플롯

Question

Fabric JS를 사용하여 폴리 라인을 그리는 x, y 좌표로 JSON 파일을 생성했습니다. 그러나, 현재 나의 문제는 내가 사용하는 좌표계가 이미지 픽셀이며, 그리는 캔버스는 오픈시 드래곤 (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 
    } 
});