未加星标

Getting Started With Paper.js: Paths and Geometry

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

In myprevious tutorial, I covered the installation process and project hierarchy in Paper.js. This time I will teach you about paths, segments, and their manipulation. This will enable you to create complex shapes using the library. After that, I would like to cover a few basic geometric principles that Paper.js is based on.

Working With Paths

Paths in Paper.js are represented by a sequence of segments that are connected by curves. A segment is basically a point and its two handles, which define the location and direction of the curves. Not defining segment handles results in straight lines instead of curves.

Once you define a new path using the new Path() constructor, you can add segments to it with the help of the path.add(segment) function. As this function supports multiple arguments, you can also add many segments at once. Let's say you want to insert a new segment at a specific index inside an existing path. You can do so by using the path.insert(index, segment) function. Similarly, to remove a segment at a specific index, you can use the path.removeSegment(index) function. Both these functions use zero-based indexing. This implies that using path.removeSegment(3) will remove the fourth segment. You can close all the paths you draw with the path.closed property. It will join the first and last segments of the path together.

Till now all our paths had straight lines. To create curved paths without specifying handles for each segment, you can use the path.smooth() function. This function calculates the optimal values for handles of all the segments in a path in such a way that the curve that goes through them is smooth. The segments themselves don't change their location, and if you have specified handle values for any of the segments, those values will be ignored. The code below uses all the functions and properties we discussed to create four paths, two of which are curved.

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);

First, we create a new path and then add segments to it. Using path.insert(3, new Point(180, 110)) inserts a new segment in place of the fourth one and moves the fourth segment to the fifth position. I have set fullySelected to true to show you all points and handles for each curve. For the second path, I have used the path.smooth() function to make the curve smooth. Removing the fourth segment using cPath.removeSegment(3) gives us our original shape without any index-based insertions. You can verify this by commenting out aPath.insert(3, new Point(180, 110)); in this CodePen demo . This is the final result of all our manipulations up to this point:

Predefined Shapes

Paper.js supports some basic shapes out of the box. For instance, to create a circle, you can simply use the new Path.Circle(center, radius) constructor. Similarly, you can use the new Path.Rectangle(rect) constructorto create a rectangle. You can either specify the top-left and bottom-right corners or specify the top-left corner and the size of the rectangle. To draw a rectangle with rounded corners, you can use the new Path.RoundedRectangle(rect, size) constructor where the size parameter determines the size of rounded corners.

If you want to create an n-sided regular polygon, you can do so by using the new Path.RegularPolygon(center, numSides, radius) constructor. The parameter center determines the center of our polygon, and radius determines the radius of our polygon.

The code below will generate all the shapes that we just discussed.

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;

The first rectangle that we create is based on co-ordinate points. The next one uses the first point to determine the top-left corner of our rectangle and then uses the size value to plot the rest of the points. In the third rectangle, we have additionally specified a radius for our rectangle. The first radius parameter decides the horizontal curvature, and the second parameter determines the vertical curvature.

The last two shapes just use the RegularPolygon constructor to create a triangle and a dodecagon. The embedded demo below shows the result of our code.

Simplifying and Flattening Paths

There are two ways to create a circle. The first one is to create a lot of segments without any handles and place them closely together. This way, even though they will be connected by a straight line, the overall shape will still be closer to a circle. The second way is to use just four segments with appropriate values for their handles. This can save a lot of memory and still give us the desired results.

Most of the time we can remove quite a few segments from a path without significant changes in its shape. The library provides a simple path.simplify([tolerance]) function to achieve this result. The tolerance parameter is optional. It is used to specify the maximum distance to which the path-simplifying algorithm can deviate from its original path. It is set to 2.5 by default. If you set the parameter to a higher value, the final curve will be a bit smoother, with fewer segment points, but the deviation could be significant. Similarly, a lower value will result in very little deviation but include many more segments.

You can also convert the curves in a path to straight lines using the path.flatten(maxDistance) function. While flattening a path, the library tries to keep the distance between segments as close to maxDistance as possible.

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); In the code above, I first created a polygon using the RegularPolygon function discussed above. I have intentionally set the selected property to true so that all the segments from these paths are visible. Then I cloned the second polygon from the first one and used the simplify function o

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: FCA
分页:12
转载请注明
本文标题:Getting Started With Paper.js: Paths and Geometry
本站链接:http://www.codesec.net/view/481268.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(29)