如何获得笔划的轮廓? [英] How to get the outline of a stroke?

问题描述

我想将描边路径转换为填充对象.(以编程方式，在 JavaScript 中.)

I want to convert a stroked path to a filled object. (Programmatically, in JavaScript.)

这条线只是一条简单的曲线，一个坐标序列.我可以将这条线渲染为一条路径，并给它一个一定厚度的笔触......但我试图获得一个填充的形状而不是一条描边线，以便我可以对其进行进一步的修改，例如翘曲它，因此生成的笔画"的粗细可能会有所不同，或者从中切出自定义位(据我所知，这些东西都不可能用真正的 SVG 笔画来实现).

The line is just a simple curved line, a sequence of coordinates. I can render this line as a path, and give it a stroke of a certain thickness... but I'm trying to get a filled shape rather than a stroked line, so that I can do further modifications on it, such as warping it, so the resulting 'stroke' might vary in thickness or have custom bits cut out of it (neither of these things are possible with a real SVG stroke, as far as I can tell).

所以我试图手动将一条线加粗"成实心形状.我找不到任何执行此操作的函数 - 我已经浏览了 D3.js 和 的文档="http://raphaeljs.com/" rel="noreferrer">Raphaël，但没有运气.有没有人知道可以做到这一点的库/函数?

So I'm trying to manually 'thicken' a line into a solid shape. I can't find any function that does this – I've looked through the docs of D3.js and Raphaël, but no luck. Does anyone know of a library/function that would do this?

或者，甚至更好:如果有人可以向我解释关于我将如何手动完成这项任务的几何理论，通过获取我拥有的线坐标列表并制定一条有效地描边"它的新路径，那将是惊人的.换句话说，当您告诉浏览器描边路径时，它会做什么——它如何确定描边应该是什么形状?

Or, even better: if someone could explain to me the geometry theory about how I would do this task manually, by taking the list of line coordinates I have and working out a new path that effectively 'strokes' it, that would be amazing. To put it another way, what does the browser do when you tell it to stroke a path – how does it work out what shape the stroke should be?

推荐答案

最近有一个类似的问题:svg:生成大纲路径"

There has been a similar question recently: svg: generate 'outline path'

总而言之，这是一项不平凡的任务.正如我在对链接问题的回答中提到的，PostScript 有一个命令，用于生成与笔画产生基本相同输出的路径，称为 strokepath.如果您查看运行我在链接问题中发布的代码时 Ghostscript 吐出的内容，就会发现它非常难看.甚至 Inkscape 也做得不好.我刚刚在 Inkscape 中尝试了 Path => Outline stroke(我认为这是英文字幕应该说的)，结果看起来与描边路径并不相同.

All in all, this is a non-trivial task. As mentioned in my answer to the linked question, PostScript has a command for generating paths that produce basically the same output as a stroke, called strokepath. If you look at what Ghostscript spits out when you run the code I posted at the linked question, it's pretty ugly. And even Inkscape doesn't really do a good job. I just tried Path => Outline stroke in Inkscape (I think that's what the English captions should say), and what came out didn't really look the same as the stroked path.

最简单"的情况是，如果您只有不包含曲线的非自相交折线、多边形或路径，因为通常情况下，您无法在右侧绘制精确的平行"贝塞尔曲线，并且将划定描边区域的非平凡贝塞尔曲线的左侧 - 它在数学上不存在.所以你必须以一种或另一种方式来近似它.对于直线段，比较容易找到精确解.

The "simplest" case would be if you only have non-self-intersecting polylines, polygons or paths that don't contain curves because in general, you can't draw exact "parallel" Bézier curves to the right and the left of a non-trivial Bézier curve that would delimit the stroked area - it's mathematically non-existent. So you would have to approximate it one way or the other. For straight line segments, the exact solution can be found comparatively easily.

渲染带有曲线/圆弧的矢量路径的经典方法是使用足够平滑的折线来近似所有内容.De Casteljau 算法 通常用于将贝塞尔曲线转换为线段.(这基本上也是您在 Ghostscript 中使用 strokepath 命令时得到的结果.)然后您可以找到分隔平行线段，但必须使用适当的 linejoin 和 miterlimit 规则正确连接它们.当然，不要忘记 linecaps.

The classic way of rendering vector paths with curves/arcs in them is to approximate everything with a polyline that is sufficiently smooth. De Casteljau's Algorithm is typically used for turning Bézier curves into line segments. (That's also basically what comes out when you use the strokepath command in Ghostscript.) You can then find delimiting parallel line segments, but have to join them correctly, using the appropriate linejoin and miterlimit rules. Of course, don't forget the linecaps.

我认为自相交路径可能会很棘手，因为路径内部可能会出现空心区域，即黑色路径的交叉区域"可能会变成白色.当使用 非零缠绕规则时，这可能不是开放路径的问题，但我'd 对此要谨慎.对于封闭路径，您可能需要两条定界"路径以相反的方向运行.但我现在不确定这是否真的涵盖了所有潜在的陷阱.

I thought that self-intersecting paths might be tricky because you might get hollow areas inside the path, i.e. the "crossing area" of a black path might become white. This might not be an issue for open paths when using nonzero winding rule, but I'd be cautious about this. For closed paths, you probably need the two "delimiting" paths to run in opposite orientation. But I'm not sure right now whether this really covers all the potential pitfalls.

抱歉，如果我对此造成了很多困惑，可能没有太大帮助.

Sorry if I cause a lot of confusion with this and maybe am not of much help.

这篇关于如何获得笔划的轮廓?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！