我生成了一个带有x，y坐标的JSON文件，用于使用Fabric JS绘制折线。但是，我目前的问题是我使用的坐标系是图像像素，而我绘制的画布是openseadragon（OSD）。因此，我需要将坐标系从图像像素更改为视口坐标。
我知道openseadragon imageToViewportCoordinates中有一个可以进行转换的函数。但是，问题是如何解析x，y坐标，转换它们并在fabric js canvas上绘制折线？
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}
]}]}
感谢您的帮助！
答案 0 :(得分：0)
您可以更改视口坐标以匹配JSON中的坐标。例如，如果您希望坐标从0延伸到61,000，则可以执行以下操作：
var viewer = OpenSeadragon({
...
tileSources: {
tileSource: url,
width: 61000
}
});