paper.js_二狗子的翠花的博客

相关文章推荐

不拘小节的仙人掌 · loadData与loadDataWithB ...· 1 年前 ·

睿智的楼房 · mysql字符串拆分· 1 年前 ·

欢乐的柳树 · 什么？TS ...· 2 年前 ·

风流的板凳 · Go 语言变量 | 菜鸟教程· 2 年前 ·

谦和的鸡蛋面 · 彻底解决Android系统A-GPS搜不到卫 ...· 2 年前 ·

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

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

绘制一个线段

< script type = " text/javascript " src = " js/paper.js " > </ script >  < 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 > < 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对象描述二维空间中的抽象维度。它有两个属性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));
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];
                                    Paper.js是一个运行在HTML5 Canvas之上的开源矢量图形脚本编写框架。 它提供了一个干净的场景图/文档对象模型，以及许多强大的功能来创建和使用矢量图形和贝塞尔曲线，并将它们整齐地包装在一个设计良好，一致且干净的编程界面中。 Paper.js基于Scriptographer并与之基本兼容，Scriptographer是Adobe Illustrator的脚本编写环境，拥有活跃的脚本编写者社区，并且已有10多年的开发经验。 Paper.js对于初学者来说很容易学习，对于中级和高级用户来说，有很多东西需要掌握。 Paper.js由JürgLehni和Jonathan Puckey开发，并根据许可的MIT许可证进行分发。 Paper.js不仅仅是Canvas的包装，它还提供了更多功能。
                                    您可能没有听说过Paper.js 。 因此，让我们从问题开始：什么是Paper.js？ 它是允许您创建和使用矢量图形的库。 官方网站将其描述为矢量图形脚本的瑞士军刀。 
 尽管图书馆提供了很多东西，但是即使您从未听说过它，也很容易学习。 在本教程中，我将从库的基本知识开始，然后再转到复杂的主题。 
使用PaperScript
 有两种使用库的方法。 您可以使用PaperScript，它是Jav...
                                    到目前为止，在本系列中，我已经介绍了Paper.js中的项目和项 ， 路径和几何以及用户交互 。 该库还允许您为项目中的各种项目设置动画。 如果将其与基于用户输入的操作能力结合起来，则可以创建一些非常酷的效果。 本教程将介绍如何为Paper.js中的项目设置动画。 
 本教程后面的部分还将介绍图像处理以及如何处理单个像素的颜色。 该库还使您可以从矢量创建栅格，最后将进行介绍。 
                                    ePaper.js
 Node.js库，可使用HTML和Javascript在Raspberry Pi上轻松创建ePaper显示。
将HTML DOM呈现到ePaper显示屏上
简单且可扩展的Javascript和WebSocket API
高性能，本机C ++硬件访问
使用API
创建static/index.html 。该网页的内容将呈现在ePaper显示屏上。
 <!DOCTYPE html >
< html lang =" en " >
        < h1> Hello from ePaper.js </ h1>
        < script >
            // connect to the WebSocket API
            const ws = new WebSocket ( 'ws://lo
                                    在之前的教程中 ，我介绍了Paper.js中的安装过程和项目层次结构。 这次，我将教您有关路径，线段及其操作的知识。 这将使您能够使用库创建复杂的形状。 之后，我想介绍Paper.js所基于的一些基本几何原理。 
 Paper.js中的路径由一系列由曲线连接的线段表示。 线段基本上是一个point及其两个控point ，它们定义了曲线的位置和方向。 不定义线段手柄将导致直线而不是曲线...
    <meta charset="utf-8">
    <title>中秋画圆，比一比谁画的圆 | 公众号：HTML5 WEB前端分享</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, 
		<canvas id="myCanvas" :width="canvasW" height="canvasH" ref="myCanvas"></canvas>
</template>
this.
Paper.js provides a Document Object Model (also called a Scene Graph) that is very easy to work with. Create a project and populate it with layers, ...
 预先构建的开发版本： 和分支。
安装Paper.js
 在项目中作为依赖项安装和维护Paper.js的推荐方法是通过针对浏览器，Node.js或Electron的 。
 如果已经安装了NPM，只需在项目文件夹中键入以下命令之一： 
npm install paper
 执行后，您将在项目的node_modules文件夹中找到一个paper文件夹。
 有关如何安装Node.js和NPM的更多信息，请阅读“ ”一章。
使用哪个版本
各种发行版都带有Paper.js的两个不同的预构建版本，分别为精简版和普通版：
 paper-full.js –浏览器的完整版本，包括PaperScript支