如何像画布 2d lineTo 一样绘制宽度路径答案

【问题标题】：How to draw path with width just like canvas 2d lineTo如何像画布 2d lineTo 一样绘制宽度路径
【发布时间】：2012-12-05 19:30:36
【问题描述】：

如何像画布 2d lineTo 一样绘制宽度路径。我认为 THREE.Line 非常接近我的要求，但我发现在某些平台上线的宽度不能大于 1。有什么办法可以达到这个目的？非常感谢！

【问题讨论】：

【解决方案1】：

线宽（和大写等）被设置为材质的属性，而不是线。所以只需分配（作为测试）material.linewidth = 3 并尝试一下。查看 THREE.LineBasicMaterial 的 build/three.js 代码清单了解更多详情。

【讨论】：

感谢您的回答，我知道我们可以通过 LineBasicMaterial 设置线宽，但是在我的 windows xp 中，ALIASED_LINE_WIDTH_RANGE= 1 - 1，所以超出此范围的任何值都是无效的，这让我很烦恼.
如果canvas可以绘制，three.js会绘制它——它只是调用canvas ops。
所以你是说你想让three.js提供画布没有有的画线能力？
哦，我的意思是在webgl中线宽不能设置为大于1。我已经通过计算点来模拟一条线并用 THREE.Ribbon 绘制它来解决这个问题。我目前的问题是色带不能做末端圆，我需要画一个圆来解决这个问题。

【解决方案2】：

为了绕过线宽限制，我认为您必须自己将线几何生成为三角形，而不是依靠 GL 来绘制粗线。 canvas2d 行虽然做了一些奇怪的事情（http://jsfiddle.net/greggman/hWmWT/）

另一种选择是在您的线条绘制代码中添加一些 2d 偏移，并多次绘制相同的线条，每次都更改偏移。

【讨论】：

是的，你是对的。如果有一个库封装了这个功能，那就太好了。我注意到three.js 有一个类“THREE.Ribbon”，我不确定这是否能满足我的需求。我检查了jsfiddle.net/greggman/hWmWT，我认为这些点太接近了，(256, 256) (256, 257)。
查看github.com/corbanbrook/webgl-2d 我不明白您关于“点太接近”的评论。没有“太近”之类的东西。只有规范和它所说的发生了。很明显，规范说的东西与我认为大多数人所期望的不同。它希望它绘制 2 或 3 个 100x100 像素大的大矩形，每个矩形与前一个偏移 1 个像素。相反，lineWidth 的作用是在线条的每一侧生成与线条方向垂直的几何线条宽度 / 2 个单位，连接两端，然后填充结果。
我想说的是，三个点的距离是1，lineWidth是10，我觉得效果不是很好，如果距离是10，lineWidth是2，它必须工作。谢谢。