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

news2025/1/12 12:00:54

说明

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

如何用 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>

在这里插入图片描述

参考资料

  • Cartographical Symbol Construction with MapServer

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/94494.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣（1053.115）补9.13

力扣（1053.115）补9.13

1053.不相交的线 不会&#xff0c;这题和1143题代码一样&#xff0c;只不过题意不太能懂&#xff0c;难想&#xff0c;难想。 115.不同的子序列 难想&#xff0c;这种题就跟该画dp图去理解&#xff0c;太难了。 跟着图去模拟一下&#xff0c;要不然真的答案都看不懂。 dp[i][j…
阅读更多...
Servlet知识

Servlet知识

1、什么是Servlet&#xff1f; Servlet&#xff08;Server Applet&#xff09;是Java Servlet的简称&#xff0c;称为小服务程序或服务连接器&#xff0c;用Java编写的服务器端程序&#xff0c;具有独立于平台和协议的特性&#xff0c;主要功能在于交互式地浏览和生成数据&…
阅读更多...
机器学习笔记：scikit-learn pipeline使用示例

机器学习笔记：scikit-learn pipeline使用示例

0. 前言 在机器学习中&#xff0c;管道机制是指将一系列处理步骤串连起来自动地一个接一个地运行的机制。Scikit-Learn提供了pipeline类用于实现机器学习管道&#xff0c;使用起来十分方便。 既然要将不同处理步骤串联起来&#xff0c;首先必须确保每个步骤的输出与下一个步骤的…
阅读更多...
java计算机毕业设计基于安卓Android的数字猎头招聘管理APP

java计算机毕业设计基于安卓Android的数字猎头招聘管理APP

项目介绍 网络的广泛应用给生活带来了十分的便利。所以把数字猎头招聘管理与现在网络相结合,利用java技术建设数字猎头招聘管理APP,实现数字猎头招聘管理的信息化。则对于进一步提高数字猎头招聘管理发展,丰富数字猎头招聘管理经验能起到不少的促进作用。 数字猎头招聘管理APP能…
阅读更多...
kafka概念及部署

kafka概念及部署

文章目录一.kafka1.kafka的概念2.Kafka的特性3.工作原理4.文件存储5.消息模式5.1点到点5.2订阅模式6.基础架构一.kafka 1.kafka的概念 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的&#xff08;replica&a…
阅读更多...
第八章会话控制

第八章会话控制

文章目录为什么需要会话控制带来的问题如何解决无状态的问题——Cookie如果只靠单纯的Cookie存在的问题单纯Cookie导致问题的解决方法——SessionSessionsession的结构一些关于Session的APISession的保存作用域Cookie时效性会话和持久化Cookie对比Cookie的domain和path为什么需…
阅读更多...
后端开发框架的具体内容是什么？

后端开发框架的具体内容是什么？

在数据化管理越来越规范的今天&#xff0c;低代码开发平台也迎来了重要的发展期。前后端分离已经成为发展趋势&#xff0c;有不少客户朋友想要咨询后端开发框架的定义和内容&#xff0c;为了帮助大家答疑解惑&#xff0c;小编经过整理&#xff0c;组织出了一篇关于该内容的文章…
阅读更多...
centos7 安装部署sonarqube 8.9.1(postqresql数据库版)

centos7 安装部署sonarqube 8.9.1(postqresql数据库版)

公司产品sonarqube以最大限度地提高质量并管理软件产品组合中的风险。为开发者软件开发人员最终负责代码质量。 代码质量是所谓的非功能性需求的一部分&#xff0c;因此是开发人员的直接责任。为有追求的程序员写出地道代码提供方向。 一、环境要求 1、centos7 x64 2、jdk11 3…
阅读更多...
KT6368A蓝牙芯片用户PC升级_搭配下载器_使用说明

KT6368A蓝牙芯片用户PC升级_搭配下载器_使用说明

目录 一、下载原理简介 KT6368A双模蓝牙芯片是flash版本&#xff0c;支持重复烧录程序&#xff0c;但是烧录程序必须使用专用的下载工具 这个工具需要由我们来提供。 下载的总体思路是&#xff0c;把芯片和PC电脑相连接&#xff0c;通过USB。然后PC端有上位机工具&#xff0…
阅读更多...
Zabbix

Zabbix

一、什么是Zabbix zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。zabbix 能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff1b;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix 由 2 部…
阅读更多...
Spring Boot 整合 RabbitMQ

Spring Boot 整合 RabbitMQ

一、工程简介 1、生产者&#xff08;test-11-rabbitmq-producer&#xff0c;spring boot 版本 2.4.1&#xff09; 1&#xff09;pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifact…
阅读更多...
外汇天眼：分分飞艇──谎称33倍高收益，入金投资获利要不回

外汇天眼：分分飞艇──谎称33倍高收益，入金投资获利要不回

在这个万物皆涨、薪水不涨的年代&#xff0c;大多数人都知道投资的重要性&#xff0c;但因为受限于本身的知识与技巧不足&#xff0c;经常看错市场方向或选错标的而亏损&#xff0c;并因此感到苦恼不已。此时若看到人宣称有无风险高获利的赚钱管道&#xff0c;不免会跃跃欲试。…
阅读更多...
SM59 事物码里的错误消息 SECSTORE035

SM59 事物码里的错误消息 SECSTORE035

系统无法访问全局键值&#xff0c;其存储位置 在配置文件参数 rsec/securestorage/keyfile 中指定。 使用事物码 RZ11&#xff0c;输入 rsec/securestorage/keyfile&#xff0c;点击 Display&#xff1a; 当这个参数路径指向的 .pse 文件包含非法字符或者文件内容小于 48 个字…
阅读更多...
Matlab实现|多元宇宙算法求解电力系统多目标优化问题（期刊论文复现）

Matlab实现|多元宇宙算法求解电力系统多目标优化问题（期刊论文复现）

结果和这几种算法进行比较&#xff1a; 目录 1 概述 2 Matlab完整代码实现 3 结果 1 概述 提出了一种求解电力系统环境经济调度的新方法,该方法利用宇宙空间在随机创建过程中高膨胀率的物体随虫洞在空间移动物体的规律,通过对白洞和黑洞间随机传送物体来实现最优搜索. 算法…
阅读更多...
5.1 自然语言处理综述

5.1 自然语言处理综述

文章目录致命密码&#xff1a;一场关于语言的较量一、自然语言处理的发展历程1.1 兴起时期1.2 符号主义时期1.3 连接主义时期1.4 深度学习时期二、自然语言处理技术面临的挑战2.1 语言学角度2.1.1 同义词问题2.1.2 情感倾向问题2.1.3 歧义性问题2.1.4 对话/篇章等长文本处理问题…
阅读更多...
猿如意中【ndm】助你轻松管理你的 NPM包

猿如意中【ndm】助你轻松管理你的 NPM包

目录 一、ndm 简介 1.1、下载 ndm-1.exe 版本&#xff08;v1.2.0&#xff09; 1.2、安装 1.3、版本迭代更新记录 1.3.1、ndm v0.1.4 已发布https://github.com/720kb/ndm/releases/tag/v0.1.4 1.3.2、ndm v1.0.0 发布&#xff0c;现已完全跨平台Windows、Mac、Linux 1.3.3、…
阅读更多...
cad 怎么取消绘图界限?cad怎么调整图形界限

cad 怎么取消绘图界限?cad怎么调整图形界限

1、在CAD中&#xff0c;如何设置图形界限&#xff1f; 1、电脑打开CAD&#xff0c;输入limits命令&#xff0c;空格键确定。 2、确定命令后&#xff0c;选择格式中的图形界限。 3、点击图形界限后&#xff0c;会出现重新设置模型空间界限&#xff0c;接着再点击键盘上的回车键…
阅读更多...
gcexcel:GrapeCity Documents for Excel v6/NET/Crack

gcexcel:GrapeCity Documents for Excel v6/NET/Crack

高速 .NET 6 Excel 电子表格 API 库 使用此快速电子表格 API&#xff0c;以编程方式在 .Net 6、.Net 5、.NET Core、.NET Framework 和 Xamarin 跨平台应用程序中创建、编辑、导入和导出 Excel 电子表格。 创建、加载、编辑和保存 Excel .xlsx 电子表格 保存为 .XLSX、PDF、HTM…
阅读更多...
C#基于ASP.NET的人事薪资管理系统

C#基于ASP.NET的人事薪资管理系统

ASP.NET20003人事薪资管理系统,SQL数据库&#xff1a;VS2010开发环境,包含员工管理,部门管理,工资管理,绩效管理等功能,并且包含五险一金的计算 3.3 功能需求 3.3.1 员工部分 1&#xff1a;查看工资&#xff1a;以列表的形式查看系统现存的员工工资信息。 2&#xff1a;查看个…
阅读更多...
SpringBoot自定义banner—卡塔尔世界杯吉祥物

SpringBoot自定义banner—卡塔尔世界杯吉祥物

自定义banner文件 SpringBoot项目在启动的时候&#xff0c;会有一个大大的Spring首先展示出来 . ____ _ __ _ _/\\ / ____ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | _ | _| | _ \/ _ | \ \ \ \\\/ ___)| |_)| | | | | || (_| | ) ) ) ) |____| .__|…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023