如何获得中风的轮廓? [英] 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 和拉斐尔，但没有运气.有谁知道可以做到这一点的库/功能?

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描边(我想这就是英文标题应该说的)，结果出来的看上去与描边的路径实际上并不相同.

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规则正确地将它们连接起来.当然，不要忘了线帽.

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屋！