paper.js:将笔划转换为路径
在 Paper.js 中，将笔划（stroke）转换为路径（path）可以通过使用 Path 对象的 strokeToPath 方法来实现。这个方法会将一个具有笔划属性的路径转换为一个新的路径，该路径表示笔划的轮廓。
以下是一个示例，展示了如何在 Paper.js 中将笔划转换为路径：
1. 引入 Paper.js
首先，确保你已经在 HTML 文件中引入了 Paper.js。你可以通过以下方式引入：
<!DOCTYPE html>
<html>
<head>
<title>Paper.js Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// Your Paper.js code will go here
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>2. 创建一个带有笔划的路径
在 <script type="text/paperscript" canvas="myCanvas"> 标签内编写 Paper.js 代码：
// 创建一个带有笔划的路径
var path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 10;
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));
path.add(new Point(50, 150));
path.closed = true;
// 将笔划转换为路径
var strokePath = path.strokeToPath({
insert: true, // 是否将新路径插入到项目中
precision: 2 // 精度，越高越精确
});
// 设置新路径的样式
strokePath.fillColor = 'red';
strokePath.strokeColor = null;
// 隐藏原始路径
path.visible = false;3. 解释代码
- 创建路径: 使用
Path对象创建一个带有笔划的路径，并设置其笔划颜色和宽度。 - 添加点: 使用
add方法向路径中添加点，形成一个闭合的矩形。 - 转换笔划为路径: 使用
strokeToPath方法将笔划转换为路径。该方法返回一个新的路径对象，该对象表示笔划的轮廓。 - 设置新路径的样式: 设置新路径的填充颜色，并将其笔划颜色设置为
null。 - 隐藏原始路径: 将原始路径的
visible属性设置为false，以隐藏它。
4. 完整示例
以下是完整的 HTML 文件示例：
<!DOCTYPE html>
<html>
<head>
<title>Paper.js Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// 创建一个带有笔划的路径
var path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 10;
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));
path.add(new Point(50, 150));
path.closed = true;
// 将笔划转换为路径
var strokePath = path.strokeToPath({
insert: true, // 是否将新路径插入到项目中
precision: 2 // 精度，越高越精确
});
// 设置新路径的样式
strokePath.fillColor = 'red';
strokePath.strokeColor = null;
// 隐藏原始路径
path.visible = false;
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>通过以上步骤，你可以在 Paper.js 中将笔划转换为路径，并对新路径进行样式设置和操作。
相关·内容
所以，我认为这是paper.js的基本功能，但无法理解文档或概念……我想转换一个用paper.js绘制的形状到一个单一的SVG路径。特别是，我想要将笔划转换为路径。但是，我想要返回的是一个路径，它描述了该路径的4px宽笔划的轮廓。就像M10,8 h90 v4 h-90 z一样。我该怎么做？
浏览 19提问于2021-07-06得票数 1
1回答
我正在使用paper.js沿鼠标坐标绘制路径。不幸的是，当一个角的角度非常小时，路径笔画就会有“洞”(见图)。
谢谢，罗伯特
浏览 4提问于2021-11-24得票数 1
我正在使用一个外部svg文件，并将该文件中的蒙版应用于我的网页上的图像。口罩工作得很好，但我想在口罩周围画一个彩色的笔触。我不知道如何在外部svg文件中添加形状，以及如何将其应用于CSS。我怎么能添加这个呢？外部SVG文件：<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xli
浏览 5提问于2014-01-14得票数 3
我真的很喜欢Python库，我想知道如何才能拥有在用paper.js编写时在paper.js中找到的功能。Pythonista提供了一个ImagePath模块，它可以做一些路径方面的事情，但是它没有paper.js (看起来)那么健壮。
浏览 4提问于2014-07-27得票数 4
Arrow2Mend5)" /></svg>
但是，当我用ImageMagick转换它时，箭头丢失了：我将其转换为
浏览 2提问于2012-05-04得票数 3
回答已采纳
1回答
我试图在javascript中直接使用paper.js：
无法使渐变工作。而不是颜色梯度，这条线只是看起来是黑色的。所有形状都会出现这种情况，所以我很确定我设置的paper.js不正确。
浏览 5提问于2022-01-27得票数 1
回答已采纳
我有许多与图像相关的路径，这些路径是用paper.js应用程序绘制的，这些路径生成了一个格式的json对象：我如何将这些路径转换为python中的等高线，以便在图像上绘制这些路径(以获得掩码)？
浏览 0提问于2018-02-28得票数 2
回答已采纳
我正在尝试将字体从opentype转换为paper.js path对象。我正在使用opentype.js从这封信中获得要点，然后我试图从这些要点中创建一个新的论文路径。我正在尝试通过示例和paper.js的引用来了解如何做到这一点。但是我找不到它。从opentype.js中，我得到了如下路径： {type: "C", x: 56.3, x1: 58.4, x2: 56.3, y: 111.9, y1: 90, y2: 97.80000000000001现在我试着把它放
浏览 18提问于2019-05-07得票数 1
回答已采纳
我正在使用新的Meteor.js应用程序平台和paper.js构建一个简单的绘图应用程序。我希望用户能够绘制路径，然后将它们‘实时’自动保存到Mongo。具体地说，当用户停止拖动鼠标时。这些路径应该立即出现在其他客户端屏幕上；不管怎样，Meteor中的标准操作。我使用.toSource将paper.js路径存储为未压缩的字符串，这很好，因为系统只为一个用户(我)构建，但是当再次加载对象时，paper.js无法识别它们。我基本上只需要一个命令来将已经创建
浏览 0提问于2012-05-19得票数 0
回答已采纳
我已经使用Bezier path创建了一个圆，并且我创建了点击事件来检查层是否已经被点击，它工作得很好，直到我增加了CAShapeLayer的lineWidth的大小。轻触lineWidth，有时会检测到，有时不会检测到。我只是想在CAShapeLayer的lineWidth上检测一下，我已经到处找了，但是找不到合适的解决方案。大多数答案都是过时的语言。如果有人能举个例子来解决我的问题，我将不胜感激。Swift 4.
let tapRecog
浏览 18提问于2019-07-18得票数 0
回答已采纳
2回答
出于性能和美学上的原因，我正在用CSS转换(旋转)将画布中的Paper.js“绘图”转换成画布。基本上，在卷轴上，画布旋转，有一个过渡的持续时间来平滑它。最重要的是，我的Paper.js路径上有鼠标事件，所以在悬停时它们会改变颜色。然而，当CSS转换应用于画布时，鼠标事件“消失”，因为缺少一个更好的词，而且它们不能工作。我想，在这条线的某个地方，CSS转换正在处理画布绘制的元素，但在Paper.js创建的与我的路径绑定的鼠标事件上跳过或应用不同。有什么解决办法吗？
浏览 10提问于2016-02-06得票数 0
回答已采纳
1回答
我正在开发一个用于绘图的移动应用程序，当它们相互接触时，我需要合并路径，但它们目前相互重叠。还有没有别的办法呢？ 在下面的图像中，我想要实现右侧，而不是左侧。 我该怎么办？
浏览 43提问于2019-01-02得票数 1
我想得到SVG路径的重心。我已经将paper.js用于路径操作，但我可以看到任何计算此操作的选项。有可能有什么办法吗？
浏览 2提问于2021-10-23得票数 0
回答已采纳
有了核心图形，可以在路径的内部进行笔触吗？而不是在笔划路径的外部和内部各绘制一半的线宽？
浏览 0提问于2013-01-10得票数 7
回答已采纳
1回答
我想用SVG路径遮罩一个图像。但是，我不希望图像在路径的主体中被遮蔽。它应该在路径本身的笔划中被遮罩。
因此，如果我有一个正方形遮罩图像，图像将显示在正方形的边缘，而不是正方形内部。为了稍后动画这个蒙版，我希望使用笔划来定义路径的粗细。这个想法是，我可以在一个正方形的边缘遮罩一个图像，然后使用笔划dasharray来动画蒙版。你有什么建议吗？
浏览 4提问于2017-02-24得票数 0
我在paper.js中有一条路径，女巫描述了一个字母形式。我通过加载带有opentype.js函数path.toSVG()的字体获得路径，而不是通过.importSVG()将其加载到paper.js；编辑:好的，我在消费，没有一条容易的路。因此，我尝试用js手动转换路径：
for(var i=0; i&
浏览 0提问于2019-05-14得票数 0
回答已采纳
2回答
在核心图形中绘制圆角矩形
、、、、
我想复制默认iPad日历的事件标记，如下所示：
我正在尝试使用coregraphics来实现这一点，绘制一个圆角矩形的路径。
浏览 0提问于2012-05-12得票数 4
回答已采纳
1回答
我正在使用下面的代码，并且正在尝试所有的东西来给它绘制的结果圆着色，但我无论如何都不能弄清楚它！有人能帮上忙吗？我如何在我的方法绘制的圆中着色？-(void)drawCircleAtPoint:(CGPoint)p withRadius:(CGFloat)radius inContext:(CGContextRef)context UIGraphicsPushContext(context); CGContextAddArc(context, p.x, p.y, radius, 0
浏览 4提问于2011-10-21得票数 0
回答已采纳
1回答
但是在我的paper.js代码中，从第二个路径中删除的路径仍然总是与第二个路径相交。为什么要这样？下面是错误的演示：'use strict';let p = null; // an alias for the paper.jssaturation, brightness: brightness, alpha:
浏览 4提问于2022-06-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
