我已经生成了一个带有 x、y 坐标的 JSON 文件,以使用 Fabric JS 绘制折线。但是,我目前的问题是我使用的坐标系是图像像素,而我正在绘制的画布是 openseadragon (OSD)。因此,我需要将坐标系从图像像素更改为视口坐标。
我知道 openseadragonimageToViewportCoordinates
中有一个函数可以进行转换。但是,问题是如何解析 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}
]}]}
感谢您的帮助!