Paper.js入门：路径和几何

最新推荐文章于 2024-08-06 08:00:00 发布

cunjie3951

最新推荐文章于 2024-08-06 08:00:00 发布

阅读量895

点赞数

文章标签： python java 机器学习人工智能深度学习

在之前的教程中，我介绍了Paper.js中的安装过程和项目层次结构。这次，我将教您有关路径，线段及其操作的知识。这将使您能够使用库创建复杂的形状。之后，我想介绍Paper.js所基于的一些基本几何原理。

使用路径

Paper.js中的路径由一系列由曲线连接的线段表示。线段基本上是一个point及其两个控point ，它们定义了曲线的位置和方向。不定义线段手柄将导致直线而不是曲线。

使用new Path()构造函数定义新路径后，可以在path.add(segment)函数的帮助下path.add(segment)添加段。由于此函数支持多个参数，因此您也可以一次添加多个细分。假设您要在现有路径内的特定索引处插入新的细分。您可以通过使用path.insert(index, segment)函数来实现。同样，要删除特定索引处的细分，可以使用path.removeSegment(index)函数。这两个函数都使用基于零的索引。这意味着使用path.removeSegment(3)将删除第四段。您可以使用path.closed属性关闭所有绘制的路径。它将路径的第一部分和最后部分连接在一起。

到现在为止，我们所有的道路都是直线。要创建弯曲路径而无需为每个线段指定句柄，可以使用path.smooth()函数。此功能以使通过它们的曲线平滑的方式计算路径中所有段的手柄的最佳值。段本身不会更改其位置，并且如果您为任何段指定了句柄值，则这些值将被忽略。下面的代码使用我们讨论的所有功能和属性来创建四个路径，其中两个是弯曲的。

var aPath = new Path();
aPath.add(new Point(30, 60));
aPath.add(new Point(100, 200));
aPath.add(new Point(300, 280), new Point(280, 40));
aPath.insert(3, new Point(180, 110));
aPath.fullySelected = 'true';
aPath.closed = true;
  
var bPath = aPath.clone();
bPath.smooth();
bPath.position.x += 400;
  
var cPath = aPath.clone();
cPath.position.y += 350;
cPath.removeSegment(3);
  
var dPath = bPath.clone();
dPath.strokeColor = 'green';
dPath.position.y += 350;
dPath.removeSegment(3);

首先，我们创建一个新路径，然后向其添加细分。使用path.insert(3, new Point(180, 110))插入一个新片段来代替第四片段，并将第四片段移到第五位置。我已将fullySelected设置为true以显示每条曲线的所有点和手柄。对于第二条路径，我使用path.smooth()函数使曲线平滑。使用cPath.removeSegment(3)删除第四段可以得到我们原始的形状，而没有任何基于索引的插入。您可以通过注释aPath.insert(3, new Point(180, 110));来验证这一点aPath.insert(3, new Point(180, 110)); 在此CodePen演示中。这是到目前为止我们所有操作的最终结果：

预定义形状

Paper.js开箱即用地支持一些基本形状。例如，要创建一个圆，您可以简单地使用new Path.Circle(center, radius)构造函数。同样，您可以使用new Path.Rectangle(rect)构造函数创建一个矩形。您可以指定左上角和右下角，也可以指定左上角和矩形的大小。若要绘制带有圆角的矩形，可以使用new Path.RoundedRectangle(rect, size)构造函数，其中size参数确定圆角的大小。

如果要创建n边规则多边形，可以使用new Path.RegularPolygon(center, numSides, radius)构造函数来创建。参数center决定多边形的中心，而radius决定多边形的半径。

下面的代码将生成我们刚才讨论的所有形状。

var aCircle = new Path.Circle(new Point(75, 75), 60);
aCircle.strokeColor = 'black';
  
var aRectangle = new Path.Rectangle(new Point(200, 15), new Point(400, 135));
aRectangle.strokeColor = 'orange';
  
var bRectangle = new Path.Rectangle(new Point(80, 215), new Size(400, 135));
bRectangle.strokeColor = 'blue';
  
var myRectangle = new Rectangle(new Point(450, 30), new Point(720, 170));
var cornerSize = new Size(10, 60);
var cRectangle = new Path.RoundRectangle(myRectangle, cornerSize);
cRectangle.fillColor = 'lightgreen';
  
var aTriangle = new Path.RegularPolygon(new Point(120, 500), 3, 110);
aTriangle.fillColor = '#FFDDBB';
aTriangle.selected = true;

var aDodecagon = new Path.RegularPolygon(new Point(460, 490), 12, 100);
aDodecagon.fillColor = '#CCAAFC';
aDodecagon.selected = true;

我们创建的第一个矩形是基于坐标点的。下一个使用第一个点确定矩形的左上角，然后使用大小值绘制其余的点。在第三个矩形中，我们还为矩形指定了半径。第一个半径参数确定水平曲率，第二个参数确定垂直曲率。

最后两个形状仅使用RegularPolygon构造函数创建三角形和十二边形。下面的嵌入式演示显示了我们的代码结果。

简化和展平路径

有两种创建圆的方法。第一个是创建许多没有任何手柄的线段并将它们紧密放置在一起。这样，即使它们将通过直线连接，整体形状仍将更接近圆形。第二种方法是仅使用四个具有适当值的句段作为其句柄。这样可以节省大量内存，但仍然可以为我们提供预期的结果。

大多数时候，我们可以从路径中删除很多段，而不会对其形状进行重大更改。该库提供了一个简单的path.simplify([tolerance])函数来实现此结果。公差参数是可选的。它用于指定路径简化算法可以偏离其原始路径的最大距离。默认情况下设置为2.5。如果将参数设置为较高的值，则最终曲线将更平滑，段点更少，但偏差可能会很大。同样，较低的值将导致很小的偏差，但包含更多的细分。

您还可以使用path.flatten(maxDistance)函数将路径中的曲线转换为直线。展平路径时，库会尝试使段之间的距离尽可能接近maxDistance 。

var aPolygon = new Path.RegularPolygon(new Point(140, 140), 800, 120);
aPolygon.fillColor = '#CCAAFC';
aPolygon.selected = true;
  
var bPolygon = aPolygon.clone();
bPolygon.fillColor = '#CCFCAA';
bPolygon.simplify();
  
var cPolygon = aPolygon.clone();
cPolygon.fillColor = '#FCAACC';
cPolygon.simplify(4);
  
var dPolygon = bPolygon.clone();
dPolygon.fillColor = '#FCCCAA';
dPolygon.flatten(80);

在上面的代码中，我首先使用上面讨论的RegularPolygon函数创建了一个多边形。我故意将selected属性设置为true以便这些路径中的所有段都可见。然后，我从第一个多边形中克隆了第二个多边形，并在其上使用了simplify函数。这将段数减少到只有五个。

在第三个多边形中，我将公差参数设置为更高的值。这进一步减少了段的数量。您可以看到所有路径仍然具有相同的基本形状。在最后的路径中，我使用了flatten(maxDistance)函数来平滑曲线。该算法尝试保持形状尽可能接近原始形状，同时仍然遵守maxDistance约束。这是最终结果：

几何与数学

Paper.js具有一些基本数据类型，如Point ， Size和Rectangle用于描述图形项的几何属性。它们是诸如位置或尺寸之类的几何值的抽象表示。一个点仅描述二维位置，大小描述二维空间中的抽象尺寸。此处的矩形表示由左上角点，其宽度和高度包围的区域。它不同于我们前面讨论的矩形路径。与路径不同，它不是项目。您可以在本Paper.js教程中阅读有关它们的更多信息。

您可以对点和大小执行基本的数学运算（加，减，乘和除）。以下所有操作均有效：

var pointA = new Point(20, 10);

var pointB = pointA * 3; // { x: 60, y: 30 }
var pointC = pointB - pointA; // { x: 40, y: 20 }
var pointD = pointC + 30; // { x: 70, y: 50 }
var pointE = pointD / 5;  // { x: 14, y: 10 }
var pointF = pointE * new Point(3, 2); // { x: 42, y: 20 }

// You can check the output in console for verification
console.log(pointF);

除了这些基本操作之外，您还可以执行一些舍入操作或为点和大小生成随机值。请考虑以下示例：

var point = new Point(3.2, 4.7);

var rounded = point.round(); // { x: 3, y: 5 }
var ceiled  = point.ceil();  // { x: 4, y: 5 }
var floored = point.floor(); // { x: 3, y: 4 }

// Generate a random point with x between 0 and 50
// and y between 0 and 40
var pointR = new Point(50, 40) * Point.random();

// Generate a random size with width between 0 and 50
// and height between 0 and 40
var sizeR = new Size(50, 40) * Size.random();

random()函数生成0到1之间的随机值。您可以将它们与适当值的Point或Size对象相乘以获得所需的结果。

总结了您需要熟悉的基本数学知识，以使用Paper.js创建有用的东西。