{"id":19014242,"url":"https://github.com/spritejs/sprite-extend-shapes","last_synced_at":"2025-04-23T00:42:23.816Z","repository":{"id":87731654,"uuid":"139558820","full_name":"spritejs/sprite-extend-shapes","owner":"spritejs","description":null,"archived":false,"fork":false,"pushed_at":"2019-07-28T15:06:15.000Z","size":2529,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T00:42:14.853Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://spritejs.github.io/sprite-extend-shapes/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-03T09:18:54.000Z","updated_at":"2024-11-15T19:14:42.000Z","dependencies_parsed_at":"2023-04-11T04:35:25.240Z","dependency_job_id":null,"html_url":"https://github.com/spritejs/sprite-extend-shapes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-shapes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-shapes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-shapes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fsprite-extend-shapes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/sprite-extend-shapes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250348891,"owners_count":21415907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T19:28:27.971Z","updated_at":"2025-04-23T00:42:23.809Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sprite-extend-shapes\n\n[Test-Online](https://spritejs.github.io/sprite-extend-shapes/docs/website/)\n\n## 项目说明\n\n`sprite-extend-shapes` 是基于`SpriteJS`的常用几何图形扩展库。当前支持的图形：\n\n- [Shape](#shape)\n  - [Polyline](#polyline-折线)\n  - [Arc](#arc-弧线)\n  - [Polycurve](#polycurve-多重曲线)\n  - [Polygon](#polygon-多边形)\n    - [Triangle](#triangle-三角形)\n    - [Rect](#rect-正方形)\n    - [Star](#star-星形)\n  - [EllipseSector](#ellipsesector-椭圆扇形)\n    - [Ellipse](#ellipse-椭圆形)\n      - [EllipseArc](#ellipsearc-椭圆弧)\n      - [Circle](#circle-圆)\n    - [Sector](#sector-圆扇形)\n  - [Ring](#ring-圆环)\n\n## Shape\n\n`Shape` 类继承自 `sprite-core` 的 `BaseSprite`，是该图形扩展库所有图形的基类。\n\n### Polyline 折线\n\n`Ployline` 用于绘制线条。\n\n|   属性    |         说明         |       默认值       |\n| :-------: | :------------------: | :----------------: |\n|  points   |   各个连接点的坐标   |       `null`       |\n|   color   | 连接点之间连线的颜色 | `rgba(0, 0, 0, 1)` |\n| lineWidth |       线条宽度       |         1          |\n|  lineCap  |   线条末端绘制样式   |      `round`       |\n| lineJoin  |   两线条交汇处样式   |      `round`       |\n\n示例：\n\n![polyline](./pictures/polyline.png)\n\n```javascript\nconst polyline = new Polyline();\npolyline.attr({\n  color: {\n    vector: [0, 0, 150, 150],\n    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]\n  },\n  lineWidth: 10,\n  points: [[0, 0], [0, 100], [200, -50]],\n  bgcolor: '#eee'\n});\n```\n\n### Arc 弧线\n\n`Arc` 用于绘制弧线。\n\n|     属性      |              说明              |  默认值  |\n| :-----------: | :----------------------------: | :------: |\n|    center     |        绘制弧线的中心点        |  `null`  |\n|  startPoint   |         弧线绘制的起点         | `[0, 0]` |\n|     angle     |       绘制弧线转过的角度       |   `0`    |\n|     color     |           弧线的颜色           |  `#000`  |\n|   lineWidth   |            弧线宽度            |   `1`    |\n| anticlockwise | 当该值为`true`时，将逆时针绘制 | `false`  |\n\n示例：\n\n![arc](./pictures/arc.png)\n\n```javascript\nconst arc = new Arc();\narc.attr({\n  center: [100, 100],\n  startPoint: [0, 0],\n  angle: (Math.PI / 2) * 0.75,\n  lineWidth: 5\n});\n```\n\n### Polycurve 多重曲线\n\n`Polycurve` 用于绘制多重曲线，其底层使用的是 `canvas.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)` API（因此也可以理解为“绘制多个贝塞尔曲线”）。\n\n|    属性    |                             说明                             |  默认值  |\n| :--------: | :----------------------------------------------------------: | :------: |\n|   points   | 绘制贝塞尔曲线的数组（**注意数组的每一子数组长度应为 `6`**） |   `[]`   |\n| startPoint |                           绘制起点                           | `[0, 0]` |\n| lineWidth  |                           曲线宽度                           |    1     |\n|  lineCap   |                       曲线末端绘制样式                       | `round`  |\n|  lineJoin  |                       两曲线交汇处样式                       | `round`  |\n\n示例：\n\n![polycurve](./pictures/polycurve.png)\n\n```javascript\nconst polycurve = new Polycurve();\npolycurve.attr({\n  points: [[20, -10, 110, 50, -20, 40], [10, -10, 20, 50, 0, 0]],\n  lineWidth: 5\n});\n```\n\n### Polygon 多边形\n\n`Polygon` 用于绘制多边形。\n\n|   属性    |      说明      |       默认值       |\n| :-------: | :------------: | :----------------: |\n|  points   |  各顶点的坐标  |       `null`       |\n|   color   |    边的颜色    | `rgba(0, 0, 0, 1)` |\n| fillColor | 多边形填充颜色 | `rgba(0, 0, 0, 1)` |\n| lineWidth |    线条宽度    |         1          |\n|  lineCap  | 边末端绘制样式 |      `round`       |\n| lineJoin  | 两边交汇处样式 |      `round`       |\n\n示例：\n\n![polygon](./pictures/polygon.png)\n\n```javascript\nconst polygon = new Polygon();\npolygon.attr({\n  color: {\n    vector: [0, 0, 150, 150],\n    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]\n  },\n  fillColor: 'yellow',\n  points: [[0, 0], [100, 100], [200, -50]]\n});\n```\n\n#### Triangle 三角形\n\n`Triangle` 继承自 `Polygon`，用于绘制三角形，其大部分属性与 `Polygon` 一致。在 `Polygon` 的基础上，`Triangle` 需要设置“两边的长度”和“两边的夹角”即可完成绘制。\n\n| 属性  |   说明   |   默认值   |\n| :---: | :------: | :--------: |\n| sides | 两边边长 | `[10, 10]` |\n| angle | 两边夹角 |    `60`    |\n\n示例：\n\n![triangle](./pictures/triangle.png)\n\n```javascript\nconst triangle = new Triangle();\ntriangle.attr({\n  color: 'red',\n  sides: [80, 80],\n  angle: '60',\n  fillColor: 'yellow'\n});\n```\n\n#### Rect 正方形\n\n`Rect` 继承自 `Polygon`，用于绘制矩阵。在 `Polygon` 的基础上，`Rect` 需要额外设置“两边的长度”，如果想要绘制平行四边形，可以改变`angle`属性的数值即可。\n\n| 属性  |   说明   |   默认值   |\n| :---: | :------: | :--------: |\n| sides | 两边边长 | `[10, 10]` |\n| angle | 两边夹角 |    `90`    |\n\n示例：\n\n![rectangle](./pictures/rectangle.png)\n\n```javascript\nconst rect = new Rect();\nrect.attr({\n  color: 'red',\n  sides: [60, 80],\n  angle: 60,\n  fillColor: 'yellow'\n});\n```\n\n#### Star 星形\n\n`Star` 继承自 `Polygon` 用于绘制规则的多角形。`Star` 将多角形的绘制分为`内接圆`和`外接圆`之上点的连接，默认`内接圆`的半径为`0.4 * 外接圆的半径`，也可手动设置。\n\n|    属性     |    说明    |     默认值     |\n| :---------: | :--------: | :------------: |\n|   radius    | 外接圆半径 |      `0`       |\n| innerRadius | 内切圆半径 | `0.4 * radius` |\n|    angle    |  角的数量  |      `5`       |\n\n示例：\n\n![star](./pictures/star.png)\n\n```javascript\nconst star = new Star();\nstar.attr({\n  radius: 40,\n  innerRadius: 30,\n  color: 'red',\n  angles: 5,\n  fillColor: 'yellow'\n});\n```\n\n### EllipseSector 椭圆扇形\n\n`EllipseSector` 继承自 `Shape`，用于绘制椭圆扇形。\n\n|    属性    |       说明       |       默认值       |\n| :--------: | :--------------: | :----------------: |\n|  radiusX   |      短半径      |        `10`        |\n|  radiusY   |      长半径      |        `20`        |\n| startAngle |     起始角度     |        `0`         |\n|  endAngle  |     终止角度     |       `360`        |\n|   color    |   描边线条颜色   | `rgba(0, 0, 0, 1)` |\n| fillColor  |     填充颜色     | `rgba(0, 0, 0, 1)` |\n| lineWidth  |     线条宽度     |         1          |\n|  lineCap   | 线条末端绘制样式 |      `round`       |\n|  lineJoin  | 两线条交汇处样式 |      `round`       |\n\n示例：\n\n![ellipseSector](./pictures/ellipseSector.png)\n\n```javascript\nconst ellipseSector = new EllipseSector();\nellipseSector.attr({\n  radiusX: 30,\n  radiusY: 80,\n  startAngle: 0,\n  endAngle: Math.PI * 1.3,\n  lineWidth: 1,\n  color: 'red'\n});\n```\n\n#### Ellipse 椭圆形\n\n`Ellipse` 继承自 `EllipseSector`，用于绘制椭圆。 与`EllipseSector`相比， `Ellipse` 不需指定`startAngle`和`endAngle`。\n\n示例：\n\n![ellipse](./pictures/ellipse.png)\n\n```javascript\nconst ellipse = new Ellipse();\nellipse.attr({\n  radiusX: 30,\n  radiusY: 80,\n  fillColor: 'red',\n  lineWidth: 5\n});\n```\n\n##### EllipseArc 椭圆弧\n\n`EllipseArc` 继承自 `Ellipse`，用于绘制椭圆弧线（与 `Arc` 的区别）。\n`EllipseArc` 放开了 `startAngle` 和 `endAngle` 的限制。\n\n示例：\n\n![ellipseArc](./pictures/ellipseArc.png)\n\n```javascript\nconst ellipseArc = new EllipseArc();\nellipseArc.attr({\n  radiusX: 30,\n  endAngle: 120,\n  radiusY: 80,\n  fillColor: 'red',\n  lineWidth: 5\n});\n```\n\n##### Circle 圆\n\n`Circle` 继承自 `Ellipse`。与`Ellipse`相比， `Circle` 只需指定一个半径，即`radius`，而无需指定`radiusX`和`radiusY`。\n\n|  属性  | 说明 | 默认值 |\n| :----: | :--: | :----: |\n| radius | 半径 |  `10`  |\n\n示例：\n\n![circle](./pictures/circle.png)\n\n```javascript\nconst circle = new Circle();\ncircle.attr({\n  radius: 30,\n  lineWidth: 5,\n  color: 'red'\n});\n```\n\n#### Sector 圆扇形\n\n`Sector` 继承自 `EllipseSector`，用于绘制圆扇形。与`EllipseSector`相比， `Sector` 只需指定一个半径，即`radius`，而无需指定`radiusX`和`radiusY`。\n\n|  属性  | 说明 | 默认值 |\n| :----: | :--: | :----: |\n| radius | 半径 |  `10`  |\n\n示例：\n\n![sector](./pictures/sector.png)\n\n```javascript\nconst sector = new Sector();\nsector.attr({\n  startAngle: 0,\n  endAngle: Math.PI * 0.7,\n  radius: 50,\n  lineWidth: 5,\n  color: 'red'\n});\n```\n\n### Ring 圆环\n\n`Ring` 继承自 `Shape`，用于绘制圆环。\n\n|    属性     |     说明     |       默认值       |\n| :---------: | :----------: | :----------------: |\n| innerRadius |   内圆半径   |        `10`        |\n| outerRadius |   外圆半径   |        `20`        |\n| startAngle  |   起始角度   |        `0`         |\n|  endAngle   |   终止角度   |       `360`        |\n|    color    | 描边线条颜色 | `rgba(0, 0, 0, 1)` |\n|  fillColor  |   填充颜色   | `rgba(0, 0, 0, 1)` |\n|  lineWidth  |   线条宽度   |         1          |\n\n示例：\n\n![ring](./pictures/ring.png)\n\n```javascript\nring.attr({\n  innerRadius: 15,\n  outerRadius: 50,\n  fillColor: {\n    vector: [0, 0, 150, 150],\n    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]\n  },\n  lineWidth: 4,\n  startAngle: Math.PI * 0.5,\n  endAngle: Math.PI * 1.6\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-shapes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fsprite-extend-shapes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fsprite-extend-shapes/lists"}