med-viewer-sdk 0.1.0 → 0.1.1

package/README.md

@@ -46,9 +46,9 @@ MedViewer SDK 是一个强大且灵活的医学图像查看 SDK，它基于 Open
 
 ```bash
 # 假设使用 npm 或 yarn 进行包管理
-npm install openseadragon konva # 根据需要添加其他依赖
+npm install openseadragon # 根据需要添加其他依赖
 # 或
-yarn add openseadragon konva
+yarn add openseadragon
 ```
 
 然后，在您的项目中引入 SDK：
@@ -165,6 +165,180 @@ const engine = new MedViewerEngine({
 });
 ```
 
+### 在 Vue 项目中使用
+
+`med-viewer-sdk` 可以在 Vue 2 或 Vue 3 项目中使用。由于 `vue` 是 `med-viewer-sdk` 的一个 `peerDependency`，您需要确保您的项目中已经安装了 `vue`。
+
+#### 1. 安装依赖
+
+在您的 Vue 项目中安装 `med-viewer-sdk` 及其 `peerDependencies`。
+
+```bash
+npm install med-viewer-sdk openseadragon vue # 根据您的 Vue 版本安装相应的 Vue 包
+# 或者使用 yarn
+yarn add med-viewer-sdk openseadragon vue
+```
+
+#### 2. 创建 Vue 组件
+
+创建一个 Vue 组件来封装 `MedViewerEngine` 的实例化和生命周期管理。
+
+**Vue 3 (Composition API):**
+
+```vue
+<template>
+  <div ref="viewerContainer" class="med-viewer-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { MedViewerEngine } from 'med-viewer-sdk';
+import OpenSeadragon from 'openseadragon'; // 如果需要 OpenSeadragon 类型
+
+const viewerContainer = ref<HTMLElement | null>(null);
+let medViewer: MedViewerEngine | null = null;
+
+onMounted(() => {
+  if (viewerContainer.value) {
+    medViewer = new MedViewerEngine({
+      element: viewerContainer.value,
+      viewerOptions: {
+        id: 'openseadragon-viewer',
+        prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+        tileSources: {
+          type: 'image',
+          url: 'https://openseadragon.github.io/example-images/duomo/duomo.dzi'
+        },
+      },
+      plugins: {
+        toolbar: true,
+        selection: true,
+        scalebar: {
+          type: 'MICROSCOPY',
+          location: 'BOTTOM_LEFT',
+          color: 'rgb(255, 255, 255)',
+          fontColor: 'rgb(255, 255, 255)',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        anno: true,
+        konva: true,
+        colorAdjust: {
+          initial: {
+            brightness: 1.2,
+            contrast: 0.8,
+            invert: true,
+          }
+        }
+      }
+    });
+
+    // 可以访问插件并进行操作
+    if (medViewer.selection) {
+      medViewer.selection.enable();
+      medViewer.selection.setSelectionMode('RECTANGLE');
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (medViewer) {
+    medViewer.destroy();
+    medViewer = null;
+  }
+});
+</script>
+
+<style scoped>
+.med-viewer-container {
+  width: 100%;
+  height: 80vh; /* 根据需要调整高度 */
+  background-color: #000;
+}
+</style>
+```
+
+**Vue 2 (Options API):**
+
+```vue
+<template>
+  <div ref="viewerContainer" class="med-viewer-container"></div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { MedViewerEngine } from 'med-viewer-sdk';
+import OpenSeadragon from 'openseadragon'; // 如果需要 OpenSeadragon 类型
+
+export default Vue.extend({
+  data() {
+    return {
+      medViewer: null as MedViewerEngine | null,
+    };
+  },
+  mounted() {
+    if (this.$refs.viewerContainer) {
+      this.medViewer = new MedViewerEngine({
+        element: this.$refs.viewerContainer as HTMLElement,
+        viewerOptions: {
+          id: 'openseadragon-viewer',
+          prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+          tileSources: {
+            type: 'image',
+            url: 'https://openseadragon.github.io/example-images/duomo/duomo.dzi'
+          },
+        },
+        plugins: {
+          toolbar: true,
+          selection: true,
+          scalebar: {
+            type: 'MICROSCOPY',
+            location: 'BOTTOM_LEFT',
+            color: 'rgb(255, 255, 255)',
+            fontColor: 'rgb(255, 255, 255)',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          },
+          anno: true,
+          konva: true,
+          colorAdjust: {
+            initial: {
+              brightness: 1.2,
+              contrast: 0.8,
+              invert: true,
+            }
+          }
+        }
+      });
+
+      if (this.medViewer.selection) {
+        this.medViewer.selection.enable();
+        this.medViewer.selection.setSelectionMode('RECTANGLE');
+      }
+    }
+  },
+  beforeDestroy() { // Vue 2 使用 beforeDestroy
+    if (this.medViewer) {
+      this.medViewer.destroy();
+      this.medViewer = null;
+    }
+  },
+});
+</script>
+
+<style scoped>
+.med-viewer-container {
+  width: 100%;
+  height: 80vh; /* 根据需要调整高度 */
+  background-color: #000;
+}
+</style>
+```
+
+#### 3. 注意事项
+
+-   **CSS 导入**：如果 `med-viewer-sdk` 包含任何 CSS 样式，您可能需要在您的 Vue 项目的入口文件或相关组件中导入它。例如：`import 'med-viewer-sdk/dist/style.css';`
+-   **全局样式**：确保 `med-viewer-sdk` 的容器元素有足够的宽高，以便查看器能够正确渲染。
+-   **响应式数据**：`MedViewerEngine` 实例本身不是响应式的。如果您需要其内部状态在 Vue 中响应式，您可能需要手动将其属性或方法包装在 Vue 的响应式系统中。
+
 
 ## 引用方式