# @basementuniverse/marble-identicons 中文文档 规范地址：https://npmcn.com/package/%40basementuniverse/marble-identicons/ 版本：0\.1\.2 npm 元数据更新时间：2022-04-14T09:15:37.260Z 中文译文更新时间：2026-11-07T17:45:34.943Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40basementuniverse/marble-identicons 原文对照：https://npmcn.com/package/%40basementuniverse/marble-identicons/?lang=original 项目主页：https://github.com/basementuniverse/marble-identicons#readme 源码仓库：https://github.com/basementuniverse/marble-identicons ## 关键信息（来自 npm 元数据） - 包体积（解压后）：238 kB，6 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：2 个 - 首次发布：2021-08-20T00:25:04.050Z - 最新版本发布：2022-04-14T09:15:37.182Z - 近 30 天下载量：14549（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：3（近 12 个月 0 个） ## 中文简介 生成大理石风格的标识符 ## 安装 ```sh npm install @basementuniverse/marble-identicons ``` 也可以使用：`pnpm add @basementuniverse/marble-identicons`、`yarn add @basementuniverse/marble-identicons`、`bun add @basementuniverse/marble-identicons` ## README # 大理石印记 随机生成大理石风格的标识. ![Identicons Preview](https://npmcn.com/package/%40basementuniverse/marble-identicons/preview.png) ## 安装 ``` npm install @basementuniverse/marble-identicons ``` ## 使用量 API : (英语) ```js function identicon( name: string, settings: Partial ) => HTMLCanvasElement ``` 见 [下级](https://npmcn.com/package/%40basementuniverse/marble-identicons/#readme-settings) 关于配置设置的更多信息. ### 在浏览器环境中 在您的页面中包含脚本并调用 `identicon` 函数。 它会回来 `HTMLCanvasElement` 可附加到DOM或被拉入另一个帆布的节点. 示例 ```html ``` ### 在反应中 这个例子显示了一种包装方式 `HTMLCanvasElement` 在JSX要素内: ```tsx import { useRef, useLayoutEffect } from 'react'; import { identicon } from '@basementuniverse/marble-identicons'; export function MarbleIdenticon({ name }: { name: string }) { const ref = useRef(null); useLayoutEffect(() => { if (ref.current) { ref.current.innerHTML = ''; ref.current.appendChild(identicon(name)); } }); return (
); } ``` 然后可以像这样使用此组件: ```tsx ReactDOM.render( , document.getElementById('root') ); ``` ## 设置 ```ts type IdenticonSettings = { size: number; baseSeed: string; font: string; fontStyle: FontStyle; fontSize: number; backgroundColours: string[]; initialsColours: string[]; initialsOffset: vec; initialsAlpha: number; initialsCompositeOperation: CompositeOperation; stripeColours: string[]; stripeAlpha: number; stripeCompositeOperation: CompositeOperation; stripes: [number, number]; stripeWidth: [number, number]; stripeDeviation: [number, number]; curveAmount: [number, number]; curveOffset: [number, number]; startWidthSign: WidthSign[]; endWidthSign: WidthSign[]; }; ``` | 设置 | 类型 | 说明 | 默认值 | | --- | --- | --- | --- | | `size` | `number` | 以像素表示的标识大小 | `100` | | `baseSeed` | `string` | 种子 RNG 时在名称上被前缀的字符串 | `''` | | `font` | `string` | 首字母所用的字体家族 | `'Helvetica'` | | `fontStyle` | `FontStyle` | 首字母所用的字体样式 。 一定是其中一个 `''`, (中文(简体) ), `'normal'`, (中文(简体) ), `'bold'`, (中文(简体) ), `'italic'` | `'bold'` | | `fontSize` | `number` | 首字母所用的字体大小,作为系数 `size` | `0.4` | | `backgroundColours` | `string[]` | 一组背景颜色。 从清单中随机挑选一个. | `['#16a085', '#1abc9c', '#2ecc71', '#3498db', '#1970b9', '#9b59b6', '#e67e22', '#e74c3c', '#e0395b']` | | `initialsColours` | `string[]` | 用于首字母的颜色阵列。 随机选择的背景颜色的索引将用来从此列表中选择,并被夹到数组的大小. | `['#ffffff']` | | `initialsOffset` | `vec` | 页:1. `{ x: number, y: number }` | `{ x: 0, y: 0 }` | | `initialsAlpha` | `number` | 首字母不透明 | `1` | | `initialsCompositeOperation` | `CompositeOperation` | 用于首字母的全局复合操作. 一定是其中一个 `'source-over'`, (中文(简体) ), `'lighter'`, (中文(简体) ), `'multiply'`, (中文(简体) ), `'screen'`, (中文(简体) ), `'overlay'`, (中文(简体) ), `'color-dodge'`, (中文(简体) ), `'color-burn'`, (中文(简体) ), `'hard-light'`, (中文(简体) ), `'soft-light'` | `'source-over'` | | `stripeColours` | `string[]` | 条纹所用的一系列颜色。 随机选择的背景颜色的索引将用来从此列表中选择,并被夹到数组的大小. | `['#f1c40f']` | | `stripeAlpha` | `number` | 条纹的α不透明 | `0.15` | | `stripeCompositeOperation` | `CompositeOperation` | 用于条纹的全球复合操作. 一定是其中一个 `'source-over'`, (中文(简体) ), `'lighter'`, (中文(简体) ), `'multiply'`, (中文(简体) ), `'screen'`, (中文(简体) ), `'overlay'`, (中文(简体) ), `'color-dodge'`, (中文(简体) ), `'color-burn'`, (中文(简体) ), `'hard-light'`, (中文(简体) ), `'soft-light'` | `'lighter'` | | `stripes` | `[number, number]` | 包含要绘制的最小和最大条纹数的拖拉 | `[3, 8]` | | `stripeWidth` | `[number, number]` | 用弧度测量的一股包含最小和最大条纹宽度的Tuple. | `[0.2, 0.7]` | | `stripeDeviation` | `[number, number]` | 用弧度测量的连续条纹之间有最小和最大距离的一股扭矩. | `[-0.5, 0.5]` | | `curveAmount` | `[number, number]` | 包含控制点圈最小和最大半径乘数的扭矩. | `[0.2, 0.4]` | | `curveOffset` | `[number, number]` | 包含以弧度测量的控制点最小和最大相抵角的扭矩. | `[0, 0.5]` | | `startWidthSign` | `WidthSign[]` | 一系列标志( A)`'positive'` 或者说 `'negative'`用于每个条纹的起始边缘. 若为 `startWidthSign` 实值 `['positive']` 财务报告和审定财务报表 `endWidthSign` 实值 `['negative']` (或反之相去相去相去相去相去相去而相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相. | `['positive', 'negative']` | | `endWidthSign` | `WidthSign[]` | 一系列标志( A)`'positive'` 或者说 `'negative'`每个条纹的末端边缘. | `['positive', 'negative']` | ## 常见问题 ### @basementuniverse/marble-identicons 是什么？ 生成大理石风格的标识符 ### 如何安装 @basementuniverse/marble-identicons？ 在项目目录运行 npm install @basementuniverse/marble-identicons，或使用 pnpm add / yarn add / bun add。 ### @basementuniverse/marble-identicons 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @basementuniverse/marble-identicons 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @basementuniverse/marble-identicons 可以商用吗？ @basementuniverse/marble-identicons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @basementuniverse/marble-identicons 的下载量有多少？ 根据 npm 官方下载统计，@basementuniverse/marble-identicons 在 2026/10/08 – 2026/11/06 这 30 天内被下载 14,549 次，日均约 485 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @basementuniverse/marble-identicons 还在维护吗？ 最新版本 0\.1\.2 发布于 2022/04/14（4 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。