Paper.js 在线绘画软件使用

最新推荐文章于 2025-11-22 01:57:14 发布

转载最新推荐文章于 2025-11-22 01:57:14 发布 · 3.7k 阅读

Paper.js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Paper.js提供的易于操作的文档对象模型（DOM），也称为场景图。文章讲解了如何在项目中创建并填充图层、组、路径、位图等元素，并通过实例展示了不同层的路径创建过程。

http://paperjs.org/features/#paths-x26-segments

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, groups, paths, rasters etc. Groups and layers can contain other items and even other groups.

If you've never heard of a Document Object Model before, you can think of it as the layers palette of applications such as Adobe Illustrator & Adobe Photoshop.

The image on the left is an illustration of the structure of the project after executing the code below, if you would be looking at it in an application like Adobe Illustrator. There are two layers, the red path was created in the first layer and the green path was created in the second.

// Create a circle shaped path, which is automatically
// placed within the active layer of the project:
var path = new Path.Circle({
	center: [80, 50],
	radius: 35,
	fillColor: 'red'
});

// Create a new layer and activate it:
var secondLayer = new Layer();

// The second path is added as a child of the second layer:
var secondPath = new Path.Circle({
	center: [120, 50],
	radius: 35,
	fillColor: '#00FF00'
});