---
title: "sdfPolygon / sdfStar"
description: "把节点画成正多边形或星形的 SDF 形状声明，形状是与颜色正交的第二个编码维度。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/utils/sdf-shapes"
---
# sdfPolygon / sdfStar

> 把节点画成正多边形或星形的 SDF 形状声明，形状是与颜色正交的第二个编码维度。

## 用法

sigma 内置的形状只有圆、方、三角与菱形，类别一多，光靠配色早就分不开了。v4 的节点轮廓由一个**有向距离函数**描述：给定相对节点中心的坐标与半径，返回到轮廓的带符号距离，描边、抗锯齿与拾取全都建在这个返回值上，换个距离函数就能换个轮廓：

```vue [NodeShapeExample.vue]
<script setup lang="ts">
import type { SigmaStyles } from '@movk/sigma'

const { data } = await useFetch('/api/data.json')

const graphRef = useTemplateRef('graph')

/**
 * sdfPolygon / sdfStar 返回纯数据，可直接写在外层；内置的 sdfCircle 与 layerFill
 * 来自 sigma/rendering，那个模块顶层就读 WebGL 全局，必须延迟到客户端加载
 */
const primitives = defineSigmaPrimitives(async () => {
  const { sdfCircle, layerFill } = await import('sigma/rendering')

  return {
    nodes: {
      shapes: [
        sdfCircle(),
        sdfPolygon({ name: 'square', sides: 4, rotation: Math.PI / 4 }),
        sdfPolygon({ name: 'hexagon', sides: 6 }),
        sdfStar({ name: 'star', points: 5, innerRatio: 0.45 })
      ],
      layers: [layerFill()]
    }
  }
})

const styles: SigmaStyles = {
  nodes: {
    shape: { attribute: 'category', dict: { 核心: 'star', 次要: 'hexagon', 边缘: 'square' }, defaultValue: 'circle' },
    size: { attribute: 'size', min: 8, max: 22, minValue: 1, maxValue: 45 }
  }
}

const rotated = shallowRef(false)

function toggle() {
  rotated.value = !rotated.value
  graphRef.value?.sigma?.getCamera().animate({ angle: rotated.value ? Math.PI / 5 : 0 }, { duration: 300 })
}
</script>

<template>
  <SigmaGraph
    ref="graph"
    :data="data"
    :primitives="primitives"
    :styles="styles"
    :settings="{ renderEdgeLabels: false }"
  >
    <SigmaControls>
      <UButton size="xs" color="neutral" :label="rotated ? '转回正视' : '旋转相机'" @click="toggle" />
    </SigmaControls>
  </SigmaGraph>
</template>
```

```ts
const primitives = { nodes: { shapes: [sdfPolygon({ name: 'hexagon', sides: 6 })] } }
const styles = { nodes: { shape: { attribute: 'category', dict: { 核心: 'hexagon' } } } }
```

形状名由 styles 里的绑定选取，属性名随你定。

> [!NOTE]
> 
> 两个函数返回的都是
> 
> 纯数据
> 
> （
> 
> { name, glsl, inradiusFactor }
> 
> ），不引用 sigma 的任何值，可以直接写在模块顶层。只有取用 sigma 内置的 
> 
> sdfCircle()
> 
>  / 
> 
> layerFill()
> 
>  时才需要 
> 
> defineSigmaPrimitives()
> 
>  延迟加载。

### size 是外接圆半径

与圆形节点的半径同义。同一个 `size` 下多边形看起来比圆略小，那是顶点之间被切掉的部分，属预期。

`inradiusFactor` 是内切半径与外接半径之比，sigma 用它决定标签让多远。正 n 边形取 `cos(π/n)`——正方形因此是 `√2/2`，与内置 `sdfSquare()` 的取值一致。

### 边数不足时退化为圆

`sides` 小于 3 围不出多边形，此时返回圆的距离函数而不是抛错：一条退化数据不该让整张图渲染不出来。`sdfStar()` 的 `points` 同理。

## API

### sdfPolygon()

`sdfPolygon(options?: SdfPolygonOptions): CustomNodeShape`

#### Parameters

**options** (`SdfPolygonOptions`): 默认 'polygon' —— 形状名，用于 styles 的 shape 字段。同一实例内注册多个多边形时必须区分。默认 6 —— 正多边形的边数，小于 3 时退化为圆。默认 0 —— 旋转量（弧度），逆时针为正，0 时首个顶点朝向 +x 轴。

#### Returns

`CustomNodeShape`，放进 `primitives.nodes.shapes` 数组。

### sdfStar()

`sdfStar(options?: SdfStarOptions): CustomNodeShape`

#### Parameters

**options** (`SdfStarOptions`): 默认 'star' —— 形状名，用于 styles 的 shape 字段。默认 5 —— 星形的角数，小于 3 时退化为圆。默认 0.5 —— 内接半径与外接半径之比，越小角越尖。取 1 时退化为正 2n 边形。默认 0 —— 旋转量（弧度），逆时针为正。

#### Returns

`CustomNodeShape`，放进 `primitives.nodes.shapes` 数组。

类型从根出口取：

```ts
import type { SdfPolygonOptions, SdfStarOptions } from '@movk/sigma'
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.