跳到主要内容

多边形

交互式多边形允许用户通过拖动顶点来操作形状。这对于演示几何概念、创建自定义形状和构建交互式图表很有用。

交互式多边形​

具有多个可拖动顶点的多边形。每个顶点可以独立移动以重新塑形多边形。

import { InteractivePolygon } from '@wangyaoshen/locus-interaction';

const polygon = new InteractivePolygon({
  points: [
    [250, 80],
    [400, 150],
    [350, 250],
    [150, 250],
    [100, 150],
  ],
  strokeColor: '#9C27B0',
  fillColor: 'rgba(156, 39, 176, 0.2)',
  lineWidth: 3,
  pointRadius: 12,
  closed: true,
  onChange: (points) => {
    console.log('多边形已更改:', points);
  },
});

开放多边形（折线）​

将 closed 设置为 false 以创建开放的折线而不是闭合的多边形。上面的演示可以配置如下：

const polyline = new InteractivePolygon({
  points: [
    [50, 200],
    [150, 100],
    [250, 180],
    [350, 80],
    [450, 150],
  ],
  closed: false,
  strokeColor: '#9C27B0',
  lineWidth: 3,
});

约束顶点​

对单个顶点应用约束：

const polygon = new InteractivePolygon({
  points: [
    [100, 100],
    [200, 100],
    [200, 200],
    [100, 200],
  ],
  constraints: [
    horizontal(100),  // 第一个点水平移动
    vertical(200),    // 第二个点垂直移动
    // 其他点自由移动
  ],
});

多边形属性​

属性类型默认值描述
pointsVector2[]-顶点位置
closedbooleantrue是否闭合多边形
strokeColorstring'#9C27B0'描边颜色
fillColorstring-填充颜色
lineWidthnumber3线条宽度
pointRadiusnumber12顶点半径
onChange(points) => void-更改回调