大理石印记

随机生成大理石风格的标识.

安装

npm install @basementuniverse/marble-identicons

使用量

API : (英语)

function identicon(
  name: string,
  settings: Partial<IdenticonSettings>
) => HTMLCanvasElement

见 下级 关于配置设置的更多信息.

在浏览器环境中

在您的页面中包含脚本并调用 identicon 函数。 它会回来 HTMLCanvasElement 可附加到DOM或被拉入另一个帆布的节点.

示例

<script src="build/identicon.js"></script>
<script>

const myIdenticon = identicon('Alan Turing');

document.body.appendChild(myIdenticon);

</script>

在反应中

这个例子显示了一种包装方式 HTMLCanvasElement 在JSX要素内:

import { useRef, useLayoutEffect } from 'react';
import { identicon } from '@basementuniverse/marble-identicons';

export function MarbleIdenticon({ name }: { name: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (ref.current) {
      ref.current.innerHTML = '';
      ref.current.appendChild(identicon(name));
    }
  });

  return (
    <div className="identicon" ref={ref}></div>
  );
}

然后可以像这样使用此组件:

ReactDOM.render(
  <MarbleIdenticon name="Alan Turing" />,
  document.getElementById('root')
);

设置

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[];
};