【视觉高级篇】26 # 如何绘制带宽度的曲线？

最新推荐文章于 2023-09-28 20:25:51 发布
最新推荐文章于 2023-09-28 20:25:51 发布
阅读量822 收藏
点赞数
分类专栏： 动画 / 可视化 文章标签： lineJoin llineCap 挤压曲线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaimo313/article/details/126834619
版权

说明

【跟月影学可视化】学习笔记。

如何用 Canvas2D 绘制带宽度的曲线？

Canvas2D 提供了相应的 API，能够绘制出不同宽度、具有特定连线方式（lineJoin）和线帽形状（lineCap）的曲线，绘制曲线非常简单。

什么是连线方式（lineJoin）？

线宽超过一个像素，两个线段中间转折的部分处就会有缺口，不同的填充方式，就对应了不同的 lineJoin。

在这里插入图片描述

线帽形状（lineCap）？

lineCap 就是指曲线头尾部的形状。

  • 第一种：square，方形线帽，它会在线段的头尾端延长线宽的一半。
  • 第二种：round ，圆弧线帽，它会在头尾端延长一个半圆。
  • 第三种：butt，不添加线帽。

在这里插入图片描述

绘制曲线例子

注意：Canvas2D 的 lineJoin 只支持 miter、bevel 和 round，不支持 none。lineCap 支持 butt、square 和 round。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>如何用 Canvas2D 绘制带宽度的曲线</title>
        <style>
            canvas {
                border: 1px dashed #fa8072;
            }
        </style>
    </head>
    <body>
        <canvas width="800" height="512"></canvas>
        <script type="module">
            // 设置 lineWidth、lingJoin、lineCap，然后根据 points 数据的内容设置绘图指令执行绘制。
            function drawPolyline(context, points, {lineWidth = 1, lineJoin = 'miter', lineCap = 'butt', miterLimit = 10} = {}) {
                context.lineWidth = lineWidth;
                context.lineJoin = lineJoin;
                context.lineCap = lineCap;
                // The CanvasRenderingContext2D.miterLimit 是 Canvas 2D API 设置斜接面限制比例的属性。
                // 当获取属性值时，会返回当前的值（默认值是10.0 ）。
                // 当给属性赋值时，0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。
                context.miterLimit = miterLimit;
                context.beginPath();
                context.moveTo(...points[0]);
                for(let i = 1; i < points.length; i++) {
                    context.lineTo(...points[i]);
                }
                context.stroke();
            }

            const canvas = document.querySelector('canvas');
            const ctx = canvas.getContext('2d');
            // 第一组
            const points = [
                [100, 100],
                [100, 200],
                [200, 150],
                [300, 200],
                [300, 100],
            ];
            ctx.strokeStyle = 'salmon';
            drawPolyline(ctx, points, { lineWidth: 10 });
            ctx.strokeStyle = 'slateblue';
            drawPolyline(ctx, points);
            // 第二组
            const point2s = [
                [100, 300],
                [100, 400],
                [200, 350],
                [300, 400],
                [300, 300],
            ];
            ctx.strokeStyle = 'seagreen';
            drawPolyline(ctx, point2s, { lineWidth: 10, lineCap: 'round', lineJoin: 'bevel' });
            ctx.strokeStyle = 'goldenrod';
            drawPolyline(ctx, point2s);
            // 第三组
            const point3s = [
                [400, 200],
                [400, 300],
                [500, 250],
                [600, 300],
                [600, 200],
            ];
            ctx.strokeStyle = 'goldenrod';
            drawPolyline(ctx, point3s, { lineWidth: 10, lineCap: 'round', lineJoin: 'miter', miterLimit: 1.5});
            ctx.strokeStyle = 'slateblue';
            drawPolyline(ctx, point3s);
        </script>
    </body>
</html>

效果如下：图三中，两侧的转角由于超过了 miterLimit 限制，所以表现为斜角，而中间的转角因为没有超过 miterLimit 限制，所以是尖角。

在这里插入图片描述

如何用 WebGL 绘制带宽度的曲线

WebGL 支持线段类的图元，LINE_STRIP 是一种图元类型，表示以首尾连接的线段方式绘制。

用 WebGL 绘制宽度为 1 的曲线

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>用 WebGL 绘制宽度为 1 的曲线</title>
        <style>
            canvas {
                border: 1px dashed #fa8072;
            }
        </style>
    </head>
    <body>
        <canvas width="512" height="512"></canvas>
        <script type="module">
            import { Renderer, Program, Geometry, Transform, Mesh } from './common/lib/ogl/index.mjs';
            
            const vertex = `
                attribute vec2 position;

                void main() {
                    gl_PointSize = 10.0;
                    float scale = 1.0 / 256.0;
                    mat3 projectionMatrix = mat3(
                        scale, 0, 0,
                        0, -scale, 0,
                        -1, 1, 1
                    );
                    vec3 pos = projectionMatrix * vec3(position, 1);
                    gl_Position = vec4(pos.xy, 0, 1);
                }
            `;


            const fragment = `
                precision highp float;
                void main() {
                    gl_FragColor = vec4(1, 0, 0, 1);
                }
            `;

            const canvas = document.querySelector('canvas');
            const renderer = new Renderer({
                canvas,
                width: 512,
                height: 512,
            });

            const gl = renderer.gl;
            gl.clearColor(1, 1, 1, 1);

            const program = new Program(gl, {
                vertex,
                fragment,
            });

            const geometry = new Geometry(gl, {
                position: {size: 2,
                data: new Float32Array(
                    [
                        100, 100,
                        100, 200,
                        200, 150,
                        300, 200,
                        300, 100,
                    ],
                )},
            });

            const scene = new Transform();
            const polyline = new Mesh(gl, {geometry, program, mode: gl.LINE_STRIP});
            polyline.setParent(scene);

            renderer.render({scene});
        </script>
    </body>
</html>

在这里插入图片描述

通过挤压 (extrude) 曲线绘制有宽度的曲线

挤压 (extrude) 曲线就是将曲线的顶点沿法线方向向两侧移出，让 1 个像素的曲线变宽。

大致步骤：

  • 1、确定端点和转角的挤压方向，端点可以沿线段的法线挤压，转角则通过两条线段延长线的单位向量求和的方式获得。
  • 2、确定端点和转角挤压的长度
    • 端点两个方向的挤压长度是线宽 lineWidth 的一半。
    • 求转角挤压长度的时候，要先计算方向向量和线段法线的余弦，然后将线宽 lineWidth 的一半除以我们计算出的余弦值。
  • 3、由步骤 1、2 计算出顶点后，我们构建三角网格化的几何体顶点数据，然后将 Geometry 对象返回。

如下图所示：
在这里插入图片描述

折线端点的挤压方向

顶点的两个移动方向为（-y, x）和（y, -x）。

在这里插入图片描述

转角的挤压方向

在这里插入图片描述

折线端点的挤压长度

折线端点的挤压长度等于 lineWidth 的一半。

转角的挤压长度

需要计算法线方向与挤压方向的余弦值，就能算出挤压长度

在这里插入图片描述

用 JavaScript 实现的代码如下所示：

function extrudePolyline(gl, points, {thickness = 10} = {}) {
    const halfThick = 0.5 * thickness;
    // 向内和向外挤压的点分别保存在 innerSide 和 outerSide 数组中。
    const innerSide = [];
    const outerSide = [];

    // 构建挤压顶点
    for(let i = 1; i < points.length - 1; i++) {
        // v1、v2 是线段的延长线，v 是挤压方向
        const v1 = (new Vec2()).sub(points[i], points[i - 1]).normalize();
        const v2 = (new Vec2()).sub(points[i], points[i + 1]).normalize();
        const v = (new Vec2()).add(v1, v2).normalize(); // 得到挤压方向
        const norm = new Vec2(-v1.y, v1.x); // 法线方向
        const cos = norm.dot(v);
        const len = halfThick / cos;
        if(i === 1) { // 起始点
            const v0 = new Vec2(...norm).scale(halfThick);
            outerSide.push((new Vec2()).add(points[0], v0));
            innerSide.push((new Vec2()).sub(points[0], v0));
        }
        v.scale(len);
        outerSide.push((new Vec2()).add(points[i], v));
        innerSide.push((new Vec2()).sub(points[i], v));
        if(i === points.length - 2) { // 结束点
            const norm2 = new Vec2(v2.y, -v2.x);
            const v0 = new Vec2(...norm2).scale(halfThick);
            outerSide.push((new Vec2()).add(points[points.length - 1], v0));
            innerSide.push((new Vec2()).sub(points[points.length - 1], v0));
        }
    }
    const count = innerSide.length * 4 - 4;
    const position = new Float32Array(count * 2);
    const index = new Uint16Array(6 * count / 4);

    // 创建 geometry 对象
    for(let i = 0; i < innerSide.length - 1; i++) {
        const a = innerSide[i],
        b = outerSide[i],
        c = innerSide[i + 1],
        d = outerSide[i + 1];

        const offset = i * 4;
        index.set([offset, offset + 1, offset + 2, offset + 2, offset + 1, offset + 3], i * 6);
        position.set([...a, ...b, ...c, ...d], i * 8);
    }

    return new Geometry(gl, {
        position: {size: 2, data: position},
        index: {data: index},
    });
}

根据 innerSide 和 outerSide 中的顶点来构建三角网格化的几何体顶点数据，最终返回 Geometry 对象来构建三角网格对象。

构建折线的顶点数据示意图：
在这里插入图片描述
下面实战一下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>通过挤压 (extrude) 曲线绘制有宽度的曲线</title>
        <style>
            canvas {
                border: 1px dashed #fa8072;
            }
        </style>
    </head>
    <body>
        <canvas width="512" height="512"></canvas>
        <script type="module">
            import { Renderer, Program, Geometry, Transform, Mesh, Vec2 } from './common/lib/ogl/index.mjs';
            
            function extrudePolyline(gl, points, {thickness = 10} = {}) {
                const halfThick = 0.5 * thickness;
                // 向内和向外挤压的点分别保存在 innerSide 和 outerSide 数组中。
                const innerSide = [];
                const outerSide = [];

                // 构建挤压顶点
                for(let i = 1; i < points.length - 1; i++) {
                    // v1、v2 是线段的延长线，v 是挤压方向
                    const v1 = (new Vec2()).sub(points[i], points[i - 1]).normalize();
                    const v2 = (new Vec2()).sub(points[i], points[i + 1]).normalize();
                    const v = (new Vec2()).add(v1, v2).normalize(); // 得到挤压方向
                    const norm = new Vec2(-v1.y, v1.x); // 法线方向
                    const cos = norm.dot(v);
                    const len = halfThick / cos;
                    if(i === 1) { // 起始点
                        const v0 = new Vec2(...norm).scale(halfThick);
                        outerSide.push((new Vec2()).add(points[0], v0));
                        innerSide.push((new Vec2()).sub(points[0], v0));
                    }
                    v.scale(len);
                    outerSide.push((new Vec2()).add(points[i], v));
                    innerSide.push((new Vec2()).sub(points[i], v));
                    if(i === points.length - 2) { // 结束点
                        const norm2 = new Vec2(v2.y, -v2.x);
                        const v0 = new Vec2(...norm2).scale(halfThick);
                        outerSide.push((new Vec2()).add(points[points.length - 1], v0));
                        innerSide.push((new Vec2()).sub(points[points.length - 1], v0));
                    }
                }
                const count = innerSide.length * 4 - 4;
                const position = new Float32Array(count * 2);
                const index = new Uint16Array(6 * count / 4);

                // 创建 geometry 对象
                for(let i = 0; i < innerSide.length - 1; i++) {
                    const a = innerSide[i],
                    b = outerSide[i],
                    c = innerSide[i + 1],
                    d = outerSide[i + 1];

                    const offset = i * 4;
                    index.set([offset, offset + 1, offset + 2, offset + 2, offset + 1, offset + 3], i * 6);
                    position.set([...a, ...b, ...c, ...d], i * 8);
                }

                return new Geometry(gl, {
                    position: {size: 2, data: position},
                    index: {data: index},
                });
            }

            const vertex = `
                attribute vec2 position;

                void main() {
                    gl_PointSize = 10.0;
                    float scale = 1.0 / 256.0;
                    mat3 projectionMatrix = mat3(
                        scale, 0, 0,
                        0, -scale, 0,
                        -1, 1, 1
                    );
                    vec3 pos = projectionMatrix * vec3(position, 1);
                    gl_Position = vec4(pos.xy, 0, 1);
                }
            `;


            const fragment = `
                precision highp float;
                void main() {
                    gl_FragColor = vec4(0.9803921568627451, 0.5019607843137255, 0.4470588235294118, 1);
                }
            `;

            const canvas = document.querySelector('canvas');
            const renderer = new Renderer({
                canvas,
                width: 512,
                height: 512,
                antialias: true,
            });

            const gl = renderer.gl;
            gl.clearColor(1, 1, 1, 1);

            const program = new Program(gl, {
                vertex,
                fragment,
            });

            const points = [
                new Vec2(100, 100),
                new Vec2(100, 200),
                new Vec2(200, 150),
                new Vec2(300, 200),
                new Vec2(300, 100),
            ];
            
            const geometry = extrudePolyline(gl, points, {lineWidth: 10});
            const scene = new Transform();
            const polyline = new Mesh(gl, {geometry, program});
            polyline.setParent(scene);
            renderer.render({scene});
        </script>
    </body>
</html>

在这里插入图片描述

参考资料

凯小默
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
labview视觉助手VBAI高级直边函数
02-19
labview视觉助手VBAI高级直边函数
visionpro 机器视觉应用 高级培训教程,视觉软件visionpro文档
09-11
16高级培训教程
webGL入门-四阶贝塞尔曲线绘制
weixin_34327761的博客
03-05 1147
随着现代浏览器端技术不短进步，web也逐渐支持了3D绘图技术。时至今日webGL这项技术已经在去年迎来了2.0版本。现如今数据可视化技术也日益繁杂起来，越来越多的数据可视化也逐渐从平面图表增加了许多新的3D类型图表，亦或者借助webGL的力量让数据渲染能力得到大幅度提升。本人也是因为上司的工作安排，开始了webGL的学习之路。在学习的过程中发现目前网上学习原生webGL的资料少之又少，手头仅仅握着...
three.js中绘制宽线的两种方式
凡事有果必有因
08-09 8671
webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制，有两种做法： 1.纯CPU计算 在线地址 2.GPU着色器计算
SuperMap iClient3D for WebGL教程（Entity）-PolylineGraphics
热门推荐
SuperMap技术控
06-18 1万+
本节继续学习PolylineGraphics对象，这个是一个折线类型，可以根据坐标直接添加到场景中，也可以对折线设置一定的风格符号，接下来我们一起学习下吧。 首先来看一个折线的尾迹线效果 实现代码如下： viewer.entities.add({ id: "test", polyline: { positions: Cesium.Cartesian3.fromDe...
WEBGL（5）：绘制线
u013938578的博客
09-01 364
注意：线段的点的数据必须是成对出现的。根据绘制参数的不同，绘制不同的线。
WebGL笔记：WebGL中绘制圆点，设定透明度，渲染动画
Wang的专栏
09-28 482
用请求动画帧驱动动画，连续更新数据，渲染视图。渲染方法如下，参考之前博客代码。1 ）框架层面的设计。
绘图基础
zwplc的博客
06-10 9557
Brand 返回首页内容列表Java 绘图基础 这一节介绍 Qt 的绘图基础知识，我们都知道，Qt 里绘图使用的是 QPainter，但是首先需要弄明白：在什么上绘图和在哪里绘图，然后才是怎么绘图，我们就围绕这几个问题来展开。 在什么上绘图 The QPaintDevice class is the base class of objects that ca
CAD参数绘制多段线（网页版）
u013725001的专栏
06-18 499
多段线又被称为多义线，表示一起画的都是连在一起的一个复合对象，可以是直线也可以是圆弧并且它们还可以加不同的宽度。 主要用到函数说明： _DMxDrawX::PathLineTo 把路径下一个点移到指定位置。详细说明如下： 参数 说明 DOUBLE dX 点的X坐标 DOUBLE dY 点的Y坐标 ...
使用shader绘制线、线段、曲线（WebGL-Shader开发基础01）
点燃火柴的博客
11-03 5504
GLSL ES 绘制点、线、面1. 绘制点1.1 绘制方点1.2 绘制圆点2. 绘制线3. 绘制面 1. 绘制点 1.1 绘制方点 1.2 绘制圆点 2. 绘制线 3. 绘制面
CurSur-WebGL中的几何设计中的3D曲线和曲面
04-11
使用Three.js库在几何设计中使用三种曲线和三种曲面-三次，贝塞尔曲线和B样条曲线
visionpro 机器视觉应用 高级培训教程_visionpro培训_visionpro高级_vidionpro课程_机器
09-11
16高级培训教程
labview视觉助手VBAI检查图像边缘并画出轮廓曲线Curves
最新发布
02-19
labview视觉助手VBAI检查图像边缘并画出轮廓曲线Curves
电子科技大学_高级计算机视觉_期末考试总结
06-12
上课是英文ppt所以自己总结了一下
webgl中绘制起始点相同，弯曲程度不同的多条曲线
~~
07-12 685
先看下效果图： 首先，应该先去官网下载SuperMap iClient3D for WebGL（推荐选择：9D(2019) 正式版） 然后在hbuilder中新建web项目，在项目中新建HTML文件，命名为“PolylineLiJiang”，在PolylineLiJiang.html中复制进去以下代码，然后导出PolylineLiJiang.html到刚刚下载并解压后的文件夹“exa...
THREE.js--数学之美,国外有大牛做的webgl 曲线动画.
omni360的专栏
01-23 6419
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句：商域无疆 -  本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。 俺也是刚开始学,好多地儿肯定不对还请见谅. 更多更新在 :
Three.js - 线段几何体材质
ithanmang
08-08 935
线段几何体材质，分为LineBasicMaterial和LineDashedMaterial，线段上只有顶点没有面。 LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度和连接点。 LineDashedMaterial：虚线材质的基本属性跟基础线段材质一样，但是可以指定短划线的和间距空格的长度。 示例：01-LineMaterial.html LineBasi...
WebGL绘制有宽度的线
weixin_34235135的博客
06-25 1522
　　WebGL中有宽度的线一直都是初学者的一道门槛，因为在windows系统中底层的渲染接口都是D3D提供的，所以无论你的lineWidth设置为多少，最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线，但是在拐弯处原生api没有做任何处理，所以往往达不到项目需求，再者比如对于虚线、导航线的绘制，原生api是无能为力。差不多从事WebGL开发已经一周年，总结一下绘制线的方法和踩过的坑，聊以慰...
基于开源库dxflib解析dxf文件: qt绘制多段线
fuyouzhiyi的博客
09-28 2893
在dxflib库中多段线图元和优化多段线图元均是通过这两者读出，首先在addPolyline(const DL_PolylineData& data)中获得点数（data.number）和标志位（data.flags），其中点数表示了addVertex中的点数，而标志位则表示了该多段线的闭合。所以我们需要遍历每个DL_PolylineData ，得到该多线段有几个顶点，是否闭合，然后从m_vecDxfVertexs把顶点取出来。然后遍历m_vecDxfPolylines 找到每一段线段对应的点，绘图。
#FF4500有点特殊？
06-10
是的，`#FF4500` 是一个比较特殊的颜色代码，它对应的是 CSS ...但是，如果过度使用橙红色，也可能会产生视觉疲劳，甚至影响用户的体验。因此，在使用橙红色时需要谨慎权衡，根据实际情况来选择合适的颜色和使用方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凯小默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值