# Haoxin Excalidraw

**Haoxin Excalidraw** 作为一个组件导出，可以直接嵌入到您的项目中。我们使用了 [Excalidraw](https://github.com/excalidraw/excalidraw) 作为基础，添加了一些自定义功能。

## 安装

使用 `npm` 或 `yarn` 安装包。

```bash
npm install react react-dom @haoxin-web/excalidraw
# 或
yarn add react react-dom @haoxin-web/excalidraw
```

> **注意**：如果您不想等待下一个稳定版本并尝试未发布的更改，请使用 `@haoxin-web/excalidraw@next`。

#### 自托管字体

默认情况下，Excalidraw 会尝试从 [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod) 下载所有使用的字体。

对于自托管目的，您需要将 `node_modules/@haoxin-web/excalidraw/dist/prod/fonts` 文件夹的内容复制到您的资产应该从其提供的路径（即项目中的 `public/` 目录）。在这种情况下，您还应该将 `window.EXCALIDRAW_ASSET_PATH` 设置为完全相同的路径，例如如果它在根目录中，则为 `/`：

```js
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
```

### Excalidraw 的尺寸

Excalidraw 占据包含块的 `width` 和 `height` 的 100%，因此请确保您渲染 Excalidraw 的容器具有非零尺寸。

## 演示

访问 [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) 示例。

## 集成

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)。

## API

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)。

## 贡献

前往 [文档](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)。