React 和 OpenSeadragon 在图像上绘制多边形答案

【问题标题】：React and OpenSeadragon draw polygons on imageReact 和 OpenSeadragon 在图像上绘制多边形
【发布时间】：2022-12-14 06:07:32
【问题描述】：

我正在用 create-react-app 编写我的网络应用程序，我想创建一个查看器来渲染图像并创建多个可编辑多边形在上面。

OpenSeadragon 非常适合这项工作，特别是有一个有用的插件 OpenseadragonFabricjsOverlay 使用 fabric.js。

所以在我安装了以下库之后：

"@types/fabric": "^4.5.12",
"@types/openseadragon": "^3.0.4",
"fabric": "^5.2.4",
"openseadragon": "^3.1.0",
"openseadragon-fabricjs-overlay": "github:altert/OpenseadragonFabricjsOverlay"

并创建了Viewer component

import React, { useEffect } from 'react';
import OpenSeadragon from 'openseadragon';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import 'openseadragon-fabricjs-overlay/openseadragon-fabricjs-overlay';
import { fabric } from 'fabric';

const Viewer = () => {
  useEffect(() => {
    const viewer = OpenSeadragon({
      id: 'seadragon-viewer',
      tileSources: {
        type: 'image',
        url: 'path/to/image/jpg'
      }
    });

    // Initialize overlay
    const options = {
        scale: 1000
    }
    const overlay = viewer.fabricjsOverlay(options);

    return () => {
      viewer.destroy();
    };
  });

  return (
    <div id="seadragon-viewer" style={{ height: '100%', width: '100%' }}></div>
  );
};

export default Viewer;

我得到那个错误：[openseadragon-canvas-overlay] 需要 OpenSeadragon

出现这种情况是因为 OpenSeaDragon 尚未加载。

如何在 OpenSeadragon 之后包含 openseadragon-fabricjs-overlay.js 文件？你有什么建议吗？

更新: 按照这个issue 修复它

【问题讨论】：

标签： javascript reactjs create-react-app openseadragon

【解决方案1】：

结构覆盖假设 OpenSeadragon 将在全局 window 对象上找到。您可以通过在 OSD 和插件导入之间添加以下内容来修复它：

window.OpenSeadragon = OpenSeadragon;

【讨论】：