Paper.js是一个基于HTML5 Canvas的开源矢量图形库，它能够在浏览器中创建和操作矢量图形。使用Paper.js，可以轻松地创建自定义的图形和动画。在本文中，我们将介绍Paper.js中的路径和几何形状的基础知识。
1. 标准路径
在Paper.js中，路径由一系列的线段和曲线组成。创建路径的第一步是新建一个Path对象。可以通过在该对象中添加各种类型的段来构造路径。下面是一个简单的示例，它创建了一个由两条线段组成的直线：
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(100, 100));
path.lineTo(new Point(200, 100));
上面这段代码创建了一个新的Path对象，并设置了它的线条颜色为黑色。Path对象的add方法用于添加线段的起始点，而lineTo方法用于添加线段的终点。这段代码添加了两个点，我们将它们连接成一条直线。运行代码会在Canvas中显示一条从(100,100)到(200,100)的直线。
1.1 使用路径方法
除了add和lineTo方法之外，Path对象还提供了许多其他的方法来添加段和操作路径。下面是一些常用的方法：
moveTo(point)：将当前点移动到给定的点，不画线。
arcTo(from, to, radius)：添加一个圆弧的段。它从当前点开始，通过给定的点from和to画一条圆弧，使用给定的半径radius。它还会根据需要转换当前位置。
quadraticCurveTo(control, end)：添加一个二次Bezier曲线的段。它从当前点开始，使用给定的控制点control和结束点end绘制曲线。
cubicCurveTo(handle1, handle2, end)：添加一个三次Bezier曲线的段。它从当前点开始，使用给定的两个控制点handle1和handle2和结束点end绘制曲线。
closePath()：绘制一条从当前点到路径起点的线，形成一个封闭图形。
通过这些方法，可以创建出各种形状的路径。对于更复杂的路径，可以使用moveTo方法来移动路径的起始点，然后使用其他的线段和曲线来扩展路径。
1.2 图形样式
可以通过Path对象的strokeColor、strokeWidth、fillColor和closed属性来设置路径的颜色、线宽、填充颜色和是否封闭。例如：
var path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5;
path.add(new Point(100, 100));
path.lineTo(new Point(200, 100));
path.lineTo(new Point(200, 200));
path.fillColor = 'red';
path.closed = true;
通过将closed属性设置为true，上面的代码将直线组成的路径闭合成了一个三角形，并通过fillColor属性将其填充为红色。在Canvas中，可以看到一个黑色的三角形，边框宽度为5像素，填充颜色为红色。
2. 矩形和圆形
Paper.js提供了专门用于绘制矩形和圆形的Rectangle和Circle对象。这些对象比普通的Path对象更简单易用。
2.1 矩形
Rectangle对象表示一个矩形，由左上角点和矩形的宽度和高度组成。可以使用Rectangle对象的方法创建一个新的矩形，并用它来创建Path对象。
var rect = new Rectangle(new Point(100, 100), new Size(200, 100));
var path = new Path.Rectangle(rect);
path.strokeColor = 'black';
path.fillColor = 'red';
上面的代码创建了一个200x100的矩形，并绘制了一个黑色的边框和红色的填充区域。
2.2 圆形
Circle对象表示一个圆形，由圆心和半径组成。可以使用Circle对象的方法创建一个新的圆形，并用它来创建Path对象。
var center = new Point(100, 100);
var radius = 50;
var circle = new Circle(center, radius);
var path = new Path.Circle(circle);
path.strokeColor = 'black';
path.fillColor = 'red';
上面的代码创建了一个半径为50的圆形，并绘制了一个黑色的边框和红色的填充区域。
3. 路径操作
在创建路径之后，可以对其进行各种操作。下面是一些常用的路径操作方法：
3.1 移动路径
可以使用Path对象的translate方法将整个路径平移指定的距离。
var path = new Path.Rectangle(new Rectangle(new Point(100, 100), new Size(200, 100)));
path.strokeColor = 'black';
path.fillColor = 'red';
path.translate(new Point(50, 50));
上面的代码创建了一个200x100的矩形，并将它向右下角平移了50个像素。在Canvas中，可以看到一个黑色的矩形，边框为5像素，填充颜色为红色，并向右下角偏移了50个像素。
3.2 旋转路径
可以使用Path对象的rotate方法将整个路径旋转指定的角度。旋转角度是相对于路径的中心点而言的。
var path = new Path.Rectangle(new Rectangle(new Point(100, 100), new Size(200, 100)));
path.strokeColor = 'black';
path.fillColor = 'red';
path.rotate(45);
上面的代码创建了一个200x100的矩形，并将它逆时针旋转了45度。在Canvas中，可以看到一个黑色的矩形，边框为5像素，填充颜色为红色，并逆时针旋转了45度。
3.3 缩放路径
可以使用Path对象的scale方法将整个路径缩放指定的比例。缩放比例是相对于路径的中心点而言的。
var path = new Path.Rectangle(new Rectangle(new Point(100, 100), new Size(200, 100)));
path.strokeColor = 'black';
path.fillColor = 'red';
path.scale(0.5);
上面的代码创建了一个200x100的矩形，并将它缩小到原来的一半大小。在Canvas中，可以看到一个黑色的矩形，边框为5像素，填充颜色为红色，并缩小到原来的一半大小。
3.4 获取路径信息
可以使用Path对象的bounds和position属性获取路径的边界矩形和中心点坐标。
var path = new Path.Rectangle(new Rectangle(new Point(100, 100), new Size(200, 100)));
var bounds = path.bounds;
var position = path.position;
console.log(bounds);
console.log(position);
上面的代码创建了一个200x100的矩形，并使用bounds属性获取了该矩形的边界矩形，使用position属性获取了该矩形的中心点坐标。在控制台中，可以看到该矩形的边界矩形和中心点坐标的信息。
4. 总结
本文介绍了Paper.js中的路径和几何形状的基础知识。我们学习了如何使用Path对象和其它形状对象来创建路径，并对其进行各种操作。这些操作包括移动、旋转、缩放和获取边界信息等。通过本文的介绍，读者可以了解到Paper.js中路径和几何形状的基础知识，为后续学习和应用奠定基础。