paper.js-CFANZ编程社区

PaperScript代码在它自己的范围内自动执行，不受全局范围的影响，仍然可以访问所有全局浏览器对象和函数，比如文档或窗口。

默认情况下，paper .js库只将一个对象导出到全局作用域:paper对象。它包含标准库定义的所有类和对象。当使用PaperScript时，用户不需要关心这些，因为在PaperScript代码中，通过使用聪明的范围，所有的对象和函数看起来都是全局的。
PaperScript还提供了项目、视图和鼠标工具对象的自动创建，并简化了这些对象的事件处理程序的安装。

绘制一个线段

<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
	// Create a Paper.js Path to draw a line into it:
	var path = new Path();
	// Give the stroke a color
	path.strokeColor = 'black';
	var start = new Point(100, 100);
	// Move to start and draw a line from there
	path.moveTo(start);
	// Note the plus operator on Point objects.
	// PaperScript does that for us, and much more!
	path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
	<canvas id="myCanvas" resize></canvas>
</body>
</html>

resize=“true” ：画布对象与浏览器窗口一样高和一样宽，并在用户调整窗口大小时调整其大小，
你需要确保包含以下CSS声明，以便自动调整大小正确工作:

html,
body {
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
}

画布的大小 resize
可以通过创建一个onResize函数处理程序来响应窗口的任何大小调整。

  function onResize(event) {
            // Whenever the window is resized, recenter the path:
            path.position = view.center;//居中
        }

paperScope.setup(canvas)

初始化一个空项目和一个视图。

window.onload = function() {
		var canvas = document.getElementById('myCanvas');
		paper.setup(canvas);
		var path = new paper.Path();//初始化一个空项目和一个视图。
		var start = new paper.Point(100, 100);//起点
		path.moveTo(start);
		path.lineTo(start.add([ 200, -50 ]));//Point加操作符不起作用，需要add函数
		paper.view.draw();//绘制视图
	}

tools

PaperScript简化并隐藏了工具对象的处理，方法是使工具处理程序看起来是全局的，并在出现这些处理程序时为我们创建一个工具:onMouseDown、onMouseUp、onMouseDrag、onMouseMove等。

	paper.install(window);
	window.onload = function() {
		paper.setup('myCanvas');
		// Create a simple drawing tool:
		var tool = new Tool();
		var path;
		tool.onMouseDown = function(event) {//鼠标按下事件
			path = new Path();
			path.strokeColor = 'black';
			path.add(event.point);
		}

		tool.onMouseDrag = function(event) {
			path.add(event.point);
		}
	}

在Paper.js中，Point、Size和Rectangle等基本类型是描述图形项目几何属性的对象。它们是位置和尺寸等几何值的抽象表示，但并不直接表示项目中的图形项。

- Point 位置点

Point对象描述了一个二维位置。它有两个属性x和y，表示位置的x和y坐标。默认Point点为（0，0）
并且可以单独操作x或y

var myPoint = new Point(); //(0,0)
console.log(myPoint); // { x: 10, y: 20 }
myPoint.x = 10;
myPoint.y = myPoint.x + 10;//{ x: 10, y: 20 }

myPoint = new Point(20, 40);//给定一个点

创建点对象的另一种方法是向其构造函数传递一个现有的点，新点将成为其副本。改变新点不会改变原点:

var firstPoint = new Point(20, 40);
var secondPoint = new Point(firstPoint);
console.log(secondPoint); // { x: 20, y: 40 }

secondPoint.y = 20;
console.log(secondPoint); // { x: 20, y: 20 }

// Note that firstPoint has not changed:
console.log(firstPoint); // { x: 20, y: 40 }

path 路径项

路径的相关属性：http://paperjs.org/reference/path/直达

var myPath = new Path();//创建路径
myPath.add(myPoint);//添加位置点

myPoint只是简单地描述用于生成myPath第一部分的坐标。修改myPoint不会改变创建后的片段。

已有的线段可以用insert插入

myPath.insert(1, new Point(30, 40));

path.smooth()函数自动平滑路径。第二个为使用平滑路径的效果

在这里插入图片描述

关闭路径：默认情况下我们的路径是打开的像下面这样

使用path.closed=true 关闭路径

var myPath = new Path();
myPath.strokeColor = 'black';
myPath.add(new Point(40, 90));
myPath.add(new Point(90, 40));
myPath.add(new Point(140, 90));

myPath.closed = true;

在这里插入图片描述

removeSegment(index) 删除段并将要删除的段的索引传递给它。

Size

Size对象描述二维空间中的抽象维度。它有两个属性width和height，分别表示大小的width和height值。
关于Point对象的所有内容也适用于Size对象，唯一的区别是不同的属性名称。

var mySize = new Size();
console.log(mySize); // { width: 0, height: 0 }
mySize.width = 10;
mySize.height = mySize.width + 10;
console.log(mySize); // { width: 10, height: 20 }

var mySize = new Size(20, 40);
console.log(mySize); // { width: 20, height: 40 }

Rectangle 矩形对象

矩形对象可以被描述为Point对象和Size对象的组合，它描述了一个二维位置和一个大小。因此它拥有四个属性x, y，宽度和高度.
可以用多种方式创建矩形对象。
(1) 将Point和Size对象传递给新的Rectangle(Point, Size)构造函数

var topLeft = new Point(10, 20);
var rectSize = new Size(200, 100);
var rect = new Rectangle(topLeft, rectSize);
console.log(rect); // { x: 10, y: 20, width: 200, height: 100 }
console.log(rect.point); // { x: 10, y: 20 }
console.log(rect.size); // { width: 200, height: 100 }

(2) new Rectangle(x, y, width, height)

var rect = new Rectangle(10, 20, 200, 100)

(3) Rectangle(point1, point2)构造函数，它接收Rectangle对象的两个角点。

var bottomLeft = new Point(10, 120);
var topRight = new Point(210, 20);
var rect = new Rectangle(bottomLeft, topRight);

可以直接传递新创建的基本类型

var rect = new Rectangle(new Point(10, 120),
		new Point(210, 20));

(4)

var rect = new Rectangle();
rect.left = 100;
rect.right = 200;
rect.bottom = 400;
rect.top = 200;
console.log(rect); // { x: 100, y: 200, width: 100, height: 200 }

圆角矩形路径

矩形(矩形,半径)构造函数。

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var radius = new Size(20, 20);
var path = new Path.Rectangle(rectangle, radius);
path.fillColor = 'black';

Circle

var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';

正则多边形RegularPolygon

正则多边形(中心，边，半径)构造函数。
中心参数描述多边形的中心点，边参数描述多边形的边数，半径参数描述多边形的半径。

var triangle = new Path.RegularPolygon(new Point(80, 70), 3, 50);
triangle.fillColor = '#e9e9ff';
triangle.selected = true;

图像

要将图片插入项目中。new raster (id)创建光栅，并将id传递给它。

var raster = new Raster('mona');

通过调用Item .rasterize()，可以将文档中的任何Item光栅化为光栅项。在栅格化之后，项目本身不会被自动移除，所以如果你不想再看到这个项目，你必默认情况下，item.rasterize()以72 dpi光栅化该项。要在不同的dpi上光栅化，只需将dpi作为一个数字传递给光栅化函数。例如，要以300dpi光栅化一个项目，您可以编写:item.rasterize(300)。须自己对它调用item.remove()。

var circle = new Path.Circle({
	center: [80, 50],
	radius: 5,
	fillColor: 'red'
});

// Create a rasterized version of the path:
var raster = circle.rasterize(60);

在这里插入图片描述

layers

Paper.js有一个图层列表:project.layers。每当视图被重绘时，Paper.js会遍历这些图层中的项目，并按外观顺序绘制它们。

每个Paper.js项目都有一个可以通过Project . activelayer访问的层。所有新创建的项目会自动添加为当前激活的层的子元素。

layer.children
可以通过children 来访问

var path = new Path.Circle(new Point(80, 50), 35);
var secondPath = new Path.Circle(new Point(120, 50), 35);
project.activeLayer.children[0].fillColor = 'red';
project.activeLayer.children[1].fillColor = 'blue';

在这里插入图片描述

快速找到第一个元素和最后一个 item.firstChild /item.lastChild

project.activeLayer.firstChild.fillColor = 'red';

通过名字访问

var path = new Path.Circle(new Point(80, 50), 35);
// 设置一个名字
path.name = 'example';
var children = project.activeLayer.children;
// 通过名字访问
children['example'].fillColor = 'red';

layer.children.length 查询有多少个子元素
对activeLayer直接执行的操作都会直接影响所有元素

var path = new Path.Circle(new Point(80, 50), 35);
var secondPath = new Path.Circle(new Point(180, 50), 35);

// 所有的都变成了红色
project.activeLayer.fillColor = 'red';

在这里插入图片描述

Groups

var path = new Path.Circle(new Point(80, 50), 35);
var secondPath = new Path.Circle(new Point(120, 50), 35);

var group = new Group([path, secondPath]);
group.style = {
	fillColor: 'red',
	strokeColor: 'black'
};

在这里插入图片描述
也可以使用item. addchild (item)函数在创建完一个组后添加子组：

var path = new Path.Circle(new Point(80, 50), 35);
var group = new Group();
group.addChild(path)

insertChild(index,item)将子元素插入特定索引处的组或层中

var redPath = new Path.Circle(new Point(80, 50), 30);
redPath.fillColor = 'red';
//绿色后创建
var greenPath = new Path.Circle(new Point(100, 50), 30);
greenPath.fillColor = 'green';

//在子节点的索引0处插入绿色路径
project.activeLayer.insertChild(0, greenPath);
所以绿色圆圈被红色覆盖

在这里插入图片描述

item. insertabove (item)和item. insertbelow (item)在其他项的上方或下方插入项。
重写上面的例子

var redPath = new Path.Circle(new Point(80, 50), 30);
redPath.fillColor = 'red';

var greenPath = new Path.Circle(new Point(100, 50), 30);
greenPath.fillColor = 'green';

// 将绿色置于红色下层
greenPath.insertBelow(redPath);

item.remove()
要从Paper.js文档中删除一个项目，你需要调用它的item.remove()函数。这并不会破坏物品，它只是从项目的结构中移除，不会被绘制出来。您可以在任何时候将项目添加回您的项目。
例子：单击时会出现⚪

var circlePath = new Path.Circle(new Point(50, 50), 25);
circlePath.fillColor = 'black';
circlePath.remove();

function onMouseDown(event) {
	project.activeLayer.addChild(circlePath);
}

item.remove()

var myCircle = new Path.Circle(new Point(100, 100), 50);
myCircle.remove()//移除整个圆

item. removechildren()：删除一个项中包含的所有子项

group.removeChildren();

removeSegment(index)
删除某一段，index为索引。

var myCircle = new Path.Circle(new Point(210, 70), 50);
myCircle.strokeColor = 'black';
myCircle.selected = true;

myCircle.removeSegment(1);

一些简单形状的绘制

圆角矩形

矩形(矩形,半径)构造函数。矩形参数描述矩形，半径参数描述圆角的大小。

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var radius = new Size(20, 20);
var path = new Path.Rectangle(rectangle, radius);
path.fillColor = 'black';

正多边形形状
则多边形(中心，边，半径)构造函数。中心参数描述多边形的中心点，边参数描述多边形的边数，半径参数描述多边形的半径。

var decagon = new Path.RegularPolygon(new Point(200, 70), 15, 50);
decagon.fillColor = '#e9e9ff';
decagon.selected = true;

在这里插入图片描述

颜色与样式

自定义形状
多个坐标点形成线段。

var myPath = new Path({
	segments: [[40, 115], [80, 180], [200, 20],[300, 20]],//坐标点
	selected: true
});

描边颜色 strokeColor
支持十六进制和rgb格式

myPath.strokeColor = '#ff0000'; 
myPath.strokeColor = new Color(0.5, 0, 0.9);

填充颜色fillColor

myPath.fillColor = '#ff0000';

描边的宽度strokeWidth

myPath.strokeWidth = 10;

线段末端形状strokecap
具有的属性‘round’, ‘square’ or ‘butt’

myPath.strokeCap = 'round';

线段拐角的形状strokeJoin
属性值：‘miter’, ‘round’ or ‘bevel’

myPath.strokeJoin = 'miter';

虚线线段dashArray
参数1：单个虚线长度，参数2：虚线段之间间隔距离

myPath.dashArray = [60, 16];