图形编辑器基于Paper.js教程04: Paper.js中的基础知识

背景

了解paper.js的基础知识,在往后的开发过程中会让你如履平地。

基础知识

paper.js 提供了两种编写方式,一种是纯粹的JavaScript编写,还有一种是使用官方提供的PaperScript。

区别就是在于,调用paper下的字对象是否需要加paper,以及向量的加减乘除。

下面看一下两种写法

使用 paperscript

html 复制代码
<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>

使用javascript

html 复制代码
<script>
 	paper.setup('myCanvas');
	// Create a Paper.js Path to draw a line into it:
	var path = new paper.Path();
	// Give the stroke a color
	path.strokeColor = 'black';
	var start = new paper.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>

向量

向量告诉我们的朝哪个方向移动以及移动多远。

向量的加法

向量的减法

向量的乘法,拉长向量的距离

向量的除法,缩小向量的距离

坐标系

坐标系的原点是在左上角, 0,0

画基本的几何元素

js 复制代码
 paper.setup('myCanvas');

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

    // 椭圆
    var ellipse = new paper.Path.Ellipse({
      point: [150, 20],
      size: [80, 40],
      fillColor: 'blue'
    });

    // 矩形
    var rectangle = new paper.Path.Rectangle({
      point: [250, 20],
      size: [100, 50],
      fillColor: 'green'
    });

    // 正方形
    var square = new paper.Path.Rectangle({
      point: [370, 20],
      size: [50, 50],
      fillColor: 'yellow'
    });

    // 线段
    var line = new Path({
      segments: [[500, 20], [550, 70]],
      strokeColor: 'black'
    });

    // 弧线
    var arc = new paper.Path.Arc({
      from: [600, 50],
      through: [650, 20],
      to: [700, 50],
      strokeColor: 'orange'
    });

    // 曲线
    var curve = new Path({
      strokeColor: 'purple'
    });
    curve.add(new paper.Point(750, 25));
    curve.add(new paper.Point(800, 75));
    curve.smooth();

    // 多边形
    var polygon = new paper.Path.RegularPolygon({
      center: [900, 50],
      sides: 6,
      radius: 30,
      fillColor: 'pink'
    });

    // 星形
    var star = new paper.Path.Star({
      center: [1050, 50],
      points: 5,
      radius1: 20,
      radius2: 40,
      fillColor: 'brown'
    });

视图的缩放

js 复制代码
// 缩小一半
paper.view.zoom = 0.5
// 扩大2倍
paper.view.zoom = 2

// 放大2倍
paper.view.scale(2)

// 缩小一半
paper.view.scale(0.5)

两者能实现同样的效果,但zoom是依据最原始的缩放比例,scale是依据当前的缩放比例。

如果你先缩放0.5。然后paper.view.scale(1),那么现在还是缩小了一半。

元素的移动,旋转

元素的旋转

js 复制代码
// 旋转
paper.view.onFrame = function(event) {
  star.rotate(3);
}

角度是 顺时针是正角度,逆时针是负角度。

元素的移动

js 复制代码
star.position = star.position.add(new paper.Point(100, 50));

setTimeout(() => {
  star.position = new paper.Point(20, 20);
}, 2000)

// 或者使用translate
star.translate(new paper.Point(20, 20))

特性有哪些

画点的切线,

画法线,

求图形的交集,并集,补集

贝塞尔曲线

svg导入导出

json导入,导出

特性有很多

说一下不擅长的东西,2d渲染,位图的处理有限

动画功能有限,毕竟定位是矢量库。

负责人几乎不再维护啦,

导入svg有一些问题,特别是高精度的,小尺寸的复杂svg

社区不够活跃

相关推荐
为什么每天的风都这么大8 小时前
Vscode/Code-server无网环境安装通义灵码
ide·vscode·阿里云·编辑器·ai编程·code-server
哈市雪花12 小时前
图像处理 之 凸包和最小外围轮廓生成
图像处理·人工智能·图形学·最小外围轮廓·最小外包
如若12312 小时前
实现了图像处理、绘制三维坐标系以及图像合成的操作
图像处理·人工智能
陌上阳光17 小时前
vscode连接远程开发机报错
ide·vscode·编辑器
思通数科AI全行业智能NLP系统17 小时前
六大核心应用场景,解锁AI检测系统的智能安全之道
图像处理·人工智能·深度学习·安全·目标检测·计算机视觉·知识图谱
羊子雄起18 小时前
CKEditor前端样式和编辑器的样式不一致的问题
前端·编辑器
命里有定数18 小时前
Paper -- 洪水深度估计 -- 利用图像处理和深度神经网络绘制街道照片中的洪水深度图
图像处理·人工智能·dnn·洪水深度·高度估计
界面开发小八哥20 小时前
「Java EE开发指南」如何使用Visual JSF编辑器设计JSP?(一)
java·ide·java-ee·编辑器·myeclipse
Bio Coder1 天前
vim 一次注释多行 的几种方法
linux·编辑器·vim·注释·快捷键·方法·取消注释
蚂蚁没问题s1 天前
图像处理 - 色彩空间转换
图像处理·人工智能·算法·机器学习·计算机视觉