pts

用简洁 API 快速构建创意视觉与数据可视化

pts 是一个面向可视化与创意编程的 TypeScript 库,旨在简化点、线、形状、颜色等几何元素的创建与操作。它解决了创意编码中重复编写底层绘图逻辑的痛点,提供了一套简洁的 API 来构建复杂的视觉作品。核心能力包括:轻量级几何体(点、线、圆、矩形等)的数学运算、空间划分与插值、颜色管理与渐变、以及可插拔的渲染后端(支持 Canvas、SVG、WebGL 等)。开发者可以快速实现动画、交互式图形、数据可视化等效果,无需深入底层图形学细节。其模块化设计允许按需引入,且与主流框架(如 React、Vue)兼容,适合艺术家、设计师和前端开发者进行创意探索。

开源 free 设计创意
访问官网 ↗ GitHub ↗ 文档 ↗
GitHub 星标 ★ 5347
维护状态 活跃
是否开源 是
定价模式 free

项目数据

分类设计创意
开发团队williamngan
所属国家
官网地址https://ptsjs.org
定价模式free
价格说明开源库,Apache-2.0 许可证,完全免费,可自行部署使用。
访问状态
是否开源是
开源协议Apache-2.0
主要语言TypeScript
技术栈/模型art,canvas,creative-coding,design,generative,generative-art,graphic-design,graphics,linear-algebra,pts,sound,svg,typescript,vector,visualization
GitHub 星标★ 5347
30天Star增速
HF 下载量
上线时间2017-03-24 00:00:00
最近更新2026-09-20 00:00:00
维护状态活跃
中文支持
访问方式
移动端支持
综合评分
收录时间2026-08-09
浏览次数6

使用教程

难度:入门 约 10 分钟 部署方式:库/依赖 5 步

环境要求

  • Node.js 与 npm 环境(使用 npm install pts 方式时)
  • 一个可加载脚本的 HTML 页面或前端工程(使用 CDN/script 方式时)
  • 支持 Canvas、SVG 或 WebGL 的现代浏览器
  • 若在 React 中使用,可配合 react-pts-canvas 组件

安装与启动步骤

  1. 1安装 pts 依赖

    在项目根目录执行 npm 安装命令。安装完成后即可在代码中按需引入 Pts 的各个模块。

    npm install pts
  2. 2按需引入模块

    在 JS/TS 文件中从 pts 导入需要的类,例如 CanvasSpace、Pt、Group、Line,避免引入全部代码。

    import {CanvasSpace, Pt, Group, Line} from 'pts';
  3. 3或使用 CDN 引入

    不想走打包流程时,可直接在 HTML 中用 script 标签加载 dist 下的 pts.js/pts.min.js,或使用 jsdelivr、cdnjs、unpkg 的 CDN 地址。

  4. 4克隆入门示例

    官方 pts-starter-kit 示例基于 npm 和 webpack,可克隆到本地学习完整的项目结构。

    git clone https://github.com/williamngan/pts-starter-kit.git
  5. 5查阅指南与示例

    阅读官网指南的 Get Started 章节,并浏览 demos 及其源码,快速掌握常用 API 的用法。

如何确认成功

代码中导入 pts 无报错,且页面能通过 CanvasSpace 正常绘制出图形,即表示接入成功。

常见问题

Q:必须用 npm 安装才能使用吗?

A:不是。README 提供两种方式:npm install pts 后按需 import,或直接下载 dist 中的 pts.js/pts.min.js(或使用 CDN)再用 script 标签引入页面。

Q:Pts 体积大吗?

A:比较轻量。README 说明当前 minified 后约 100kb,gzip 压缩后约 30kb。

Q:如何在 React 项目中使用?

A:可参考官方示例仓库 pts-react-example,或使用 npm 包 react-pts-canvas,通过扩展该组件来使用 Pts。

Q:遇到问题去哪里求助?

A:可以到 GitHub 仓库 williamngan/pts 提交 issue,也可以先查阅官网 guides 和 demos 的示例源码。

注意事项

  • Pts 支持按需引入模块,建议只导入用到的类以控制打包体积。
  • 官方提供了 pts-starter-kit(npm + webpack)和 pts-react-example 等示例仓库,适合快速上手。
  • 官网 ptsjs.org 提供 Get Started 指南与大量 demos,可结合源码学习。

核心亮点

  • 几何数学运算封装完善,点、线、形状操作直观高效
  • 渲染后端可插拔,同一套逻辑可输出到 Canvas、SVG 等
  • TypeScript 编写,类型提示友好,适合前端开发者上手

不足之处

  • 文档偏学术,示例较少,新手学习曲线较陡
  • 社区生态较小,第三方扩展和教程资源有限

适用场景

  • 创意编程与生成艺术(如 Processing 风格的 Web 作品)
  • 数据可视化原型开发,快速绘制图表和交互图形
  • 前端动画与交互效果,如粒子系统、动态背景

替代项目

p5.js、D3.js、Three.js

项目介绍

pts 是设计创意领域的开源项目,由 williamngan 开发,2017 年首次发布。

在全站 13,109 个收录项目中,它的 GitHub 星标数(5,347)位列前 9%,在设计创意分类的 163 个项目里位列前 8%。

项目目前处于活跃维护状态,最近一次代码更新于 2026-09-20。开源库,Apache-2.0 许可证,完全免费,可自行部署使用。

它主要面向的使用场景是:创意编程与生成艺术(如Processing风格的Web作品)。同类可对比的替代方案包括 p5.js、D3.js、Three.js。

上一篇:generative

下一篇:theatre

同类项目推荐

open-design 开源

让 AI 代工做界面,本地跑完随手改

Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ L···

★ 97629 2026-08-09
Excalidraw 开源

开源虚拟白板协作工具

Virtual whiteboard for sketching hand-drawn like diagrams

★ 132673 2026-08-19
morph 开源

用数据直接生成设计、动画和交互可视化

Morph is a free and open-source tool for creating designs, animations or interactive···

★ 126 2026-08-09
ChatGPT-MidJourney-prompt 开源

输入一句话,AI帮你生成Midjourney完整提示词

This is a ChatGPT based prompt generation model for MidJorney. The purpose of this m···

★ 343 2026-08-09