0

我已经生成了一个带有 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}
        ]}]}

感谢您的帮助!

4

1 回答 1

0

您可以更改视口坐标以匹配 JSON 中的坐标。例如,如果您希望坐标从 0 延伸到 61,000,您可以这样做:

var viewer = OpenSeadragon({
  ...
  tileSources: {
    tileSource: url,
    width: 61000
  }
});
于 2017-11-02T18:02:55.270 回答