paper.js：将笔画转换为路径

【问题标题】：paper.js: convert stroke to pathpaper.js：将笔画转换为路径
【发布时间】：2021-07-05 19:49:08
【问题描述】：

所以，我认为这是 paper.js 的基本功能，但无法理解文档或概念...... 我想将使用 paper.js 绘制的形状转换为单个 SVG 路径。特别是，我想将笔画转换为路径。当我像这样画一条 4px 宽的线条时：

var path = new Path.Line({
    from: [10, 10],
    to: [100, 10],
    strokeColor: 'black',
    strokeWidth: 4
});
console.log(path.exportSVG().getAttribute('d'));

我得到的所有路径都是单行M10,10 h90。但是，我确实想要返回的是描述路径的 4px 宽笔划轮廓的路径。像M10,8 h90 v4 h-90 z 这样的东西。我该怎么做？

【问题讨论】：

标签： svg paperjs

【解决方案1】：

这仍然是一个open issue in paper.js，但是有一个扩展库可以为你做这件事：paperjs-offset

const canvas = document.querySelector('canvas');
paper.setup(canvas);

const path = new paper.Path.Line({
    from: [10, 40],
    to: [100, 10],
    strokeColor: 'black',
    //strokeWidth: 4
});
//console.log(path.exportSVG().getAttribute('d'));

const strokePath = PaperOffset.offsetStroke(
    path,
    10,
    { cap: 'round' }
);
strokePath.fillColor = 'transparent';
strokePath.strokeColor = 'blue';
strokePath.strokeWidth = 1;

console.log(strokePath.exportSVG().getAttribute('d'));

<script src="https://unpkg.com/paper@0.12.15/dist/paper-full.min.js"></script>
<script src="https://unpkg.com/paperjs-offset@1.0.8/dist/paperjs-offset.js"></script>

<canvas width="200" height="100"></canvas>

【讨论】：