计算机图形学、贝塞尔曲线及绘制方法、反走样问题的解决（附完整代码）

贝塞尔曲线

  • 1. 本次作业实现的函数及简单描述（详细代码见后）
  • 2. 与本次作业有关的基础知识整理
  • 3. 代码描述（详细）
  • 4. 完整代码
  • 5. 参考文献

（本篇为作者学习计算机图形学时根据作业所撰写的笔记， 如有同课程请勿Crtl+c/v ）

1. 本次作业实现的函数及简单描述（详细代码见后）

这一块主要介绍本次主要实现的几个函数及其功能

1.bezier(const std::vector<cv::Point2f> &control_points, cv::Mat &window)

可以绘制不止四个点的贝塞尔函曲线，并且处理了反走样问题
升级版： 利用距离比例，进行像素点的判别，解决贝塞尔曲线的反走样问题

2.recursive_bezier(const std::vector<cv::Point2f> &control_points, float t)

根据已有的点vector和给定的t值， 计算出来给定t值对应到贝塞尔曲线上的坐标点

2. 与本次作业有关的基础知识整理

这一部分主要介绍一些跟贝塞尔曲线有关的前置知识，以及贝塞尔曲线的画法

贝塞尔曲线：

Bézier curve(贝塞尔曲线) 是应用于二维图形应用程序的数学曲线。

贝塞尔曲线基础定义：

只要求一定经过起止点，起止点之间的若干控制点用于控制曲线弯曲的方向，最终形成一条经过起止点的光滑曲线被称为贝塞尔曲线。

贝塞尔曲线是线性插值的结果 ： “选出两点之间的一个点”

P(t) = P0 + (P1−P0) = (1−t)P0 + t**P1, t∈[0,1] t=P0P1/P0P1

根据控制点的个数，贝塞尔曲线被分为一阶贝塞尔曲线（0个控制点）、二阶贝塞尔曲线（1个控制点）、三阶贝塞尔曲线（2个控制点）等等。（本次实验用到的是三阶贝塞尔曲线（2个控制点））

二阶贝塞尔曲线：

img

三阶贝塞尔曲线（本次作业需要实现的曲线）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

img

对于贝塞尔曲线，最重要的点是数据点和控制点

数据点： 指一条路径的起始点和终止点。
控制点：控制点决定了一条路径的弯曲轨迹

贝塞尔曲线特点：

特点一： 曲线通过始点和终点，并与特征多边形首末两边相切于始点和终点，中间点将曲线拉向自己。
特点二： 平面离散点控制曲线的形状，改变一个离散点的坐标，曲线的形状将随之改变（点对曲线具有整体控制性）。
特点三： 曲线落在特征多边形的凸包之内，它比特征多边形更趋于光滑。

特点四： 起始点的方向为响应控制点的切线方向

逐段贝塞尔曲线：

当控制点太多会影响控制点的效果的时候， 我们选择每四个控制点定义一条贝塞尔曲线，然后再将他们连接起来

img

常见应用场景：

计算机辅助设计和计算机辅助制造应用（CAD/CAM），Adobe Illustrator, Photoshop, Inkscape, Gimp等等。还可以应用在一些图形技术中，像矢量图形（SVG），所以说在可视化学习的重要基础知识。

基本绘制方法： 德卡斯特里奥算法

  • 引入参数t (范围为 0~1)
  • 取b0到b1, b1到b2上t位置上的点b0’,b1’
  • 将b0’,b1’ 连接，取b0’到b1’上t位置上的点b0’’
  • 将所有t∈（0，1） 的点都便利一遍相连即可得到贝塞尔曲线
  • 若有n个控制点则将上面步骤进行递归操作直到找到最后bn’

解决反走样问题

程序在进行画线时是以点的形式，如果放大有较为明显的不连续，因此可以采用反走样来使其平滑过渡;

对于每一个点，其必然会包含在一个像素之中，可按照比例和着色进行插值，以求得一个较为平滑的过渡;

如下图所示，该点一定会在下图所示的黄色方框内部，而该点离像素点的最远距离为根号2，按照该点到其他四个点的距离进行插值；
在这里插入图片描述

3. 代码描述（详细）

这一部分主要介绍实现贝塞尔曲线的各个函数的功能，以及注意要点

de Casteljau的算法来计算贝塞尔曲线的点（步骤如下）

  • 计算点的总个数
  • 判断点的个数，只有一个点直接返回，多个点的话进行计算
  • 递归计算多个点t值对应的贝塞尔曲线上的点，直到计算到最后一个点
cv::Point2f recursive_bezier(const std::vector<cv::Point2f> &control_points, float t) 
{// TODO: Implement de Casteljau's algorithmint n = control_points.size();if (n == 1) return control_points[0];std::vector<cv::Point2f> res_control_points;for (int i = 0; i < n - 1; i++) {res_control_points.push_back(cv::Point2f((1 - t) * control_points[i].x + t * control_points[i + 1].x,(1 - t) * control_points[i].y + t * control_points[i + 1].y));}return recursive_bezier(res_control_points, t);
}

基础版贝塞尔： (简单的将所给点画出)

  • 对每个t值循环计算出来对应的点然后进行绘制
void bezier(const std::vector<cv::Point2f> &control_points, cv::Mat &window) 
{// TODO: Iterate through all t = 0 to t = 1 with small steps, and call de Casteljau's // recursive Bezier algorithm.for (double t = 0.0; t <= 1.0; t += 0.001)  // 循环得到点，并记录输出{cv::Point2f point = recursive_bezier(control_points, t); window.at<cv::Vec3b>(point.y, point.x)[1] = 255;}
}

升级版贝塞尔（可以解决曲线的反走样问题）

  • 先找到根据t值计算出来的贝塞尔曲线上的点，其周围四个坐标
  • 计算该点到周围四个像素点的距离，距离越大，颜色应该越浅 {max-distance}
  • 按照distance/sum(distance)重新给四个点的像素赋值，并与原始色素的值进行比较，不能超过255.
  • 根据计算出来的点和对应的像素值进行重新绘制
void bezier(const std::vector<cv::Point2f> &control_points, cv::Mat &window) 
{// TODO: Iterate through all t = 0 to t = 1 with small steps, and call de Casteljau's // recursive Bezier algorithm.for (float t = 0.0; t <= 1.0; t = t + 0.001){cv::Point2f point = recursive_bezier(control_points, t);  //接收每一个t所求得的点//找到该点周围的四个点坐标，先找到一个右上的顶点，然后其他的通过这个点求出cv::Point2f point_1 = cv::Point2f(point.x - std::floor(point.x) < 0.5 ? std::floor(point.x) : std::ceil(point.x),   //右上的点point.y - std::floor(point.y) < 0.5 ? std::floor(point.y) : std::ceil(point.y));cv::Point2f point_2 = cv::Point2f(point_1.x - 1.0, point_1.y);cv::Point2f point_3 = cv::Point2f(point_1.x - 1.0, point_1.y - 1.0);cv::Point2f point_4 = cv::Point2f(point_1.x, point_1.y - 1.0);//用vector容器存储刚刚求得的四个像素点坐标;std::vector<cv::Point2f> distance_dot{ point_1,point_2,point_3,point_4 };float MaxDistance = sqrt(2.0);float SumDistance = 0.0f;float pi_distance = 0.0f;std::vector<float> distance_List = {};window.at<cv::Vec3b>(point.y, point.x)[1] = 255;//Mat.at<存储类型名称>(行，列)[通道]for (int i = 0; i < 4; i++){cv::Point2f point_coordinate(distance_dot[i].x + 0.5, distance_dot[i].y + 0.5);//记录像素中心点;// 距离像素点越近的点 实际上和颜色占比应该越小 因此采用 max-实际距离  的方法进行数据预处理pi_distance = MaxDistance - sqrt(std::pow(point.x - point_coordinate.x, 2) + std::pow(point.y - (point_coordinate.y), 2));distance_List.push_back(pi_distance);SumDistance += pi_distance;       // 计算一个总的距离值}for (int i = 0; i < 4; i++){float d = distance_List[i] / SumDistance;  // d是距离比例系数window.at<cv::Vec3b>(distance_dot[i].y, distance_dot[i].x)[1] = std::min(255.f, window.at<cv::Vec3b>(distance_dot[i].y, distance_dot[i].x)[1] + 255.f * d);//不超过255.f，要进行最小值比较}}
}

4. 完整代码

#include <chrono>
#include <iostream>
#include <opencv2/opencv.hpp>std::vector<cv::Point2f> control_points;void mouse_handler(int event, int x, int y, int flags, void *userdata) 
{if (event == cv::EVENT_LBUTTONDOWN) {std::cout << "Left button of the mouse is clicked - position (" << x << ", "<< y << ")" << '\n';control_points.emplace_back(x, y);}     
}void naive_bezier(const std::vector<cv::Point2f> &points, cv::Mat &window) 
{auto &p_0 = points[0];auto &p_1 = points[1];auto &p_2 = points[2];auto &p_3 = points[3];for (double t = 0.0; t <= 1.0; t += 0.001) {auto point = std::pow(1 - t, 3) * p_0 + 3 * t * std::pow(1 - t, 2) * p_1 +3 * std::pow(t, 2) * (1 - t) * p_2 + std::pow(t, 3) * p_3;window.at<cv::Vec3b>(point.y, point.x)[2] = 255;}
}cv::Point2f recursive_bezier(const std::vector<cv::Point2f> &control_points, float t) 
{// TODO: Implement de Casteljau's algorithmint n = control_points.size();if (n == 1) return control_points[0];std::vector<cv::Point2f> res_control_points;for (int i = 0; i < n - 1; i++) {res_control_points.push_back(cv::Point2f((1 - t) * control_points[i].x + t * control_points[i + 1].x,(1 - t) * control_points[i].y + t * control_points[i + 1].y));}return recursive_bezier(res_control_points, t);
}void bezier(const std::vector<cv::Point2f> &control_points, cv::Mat &window) 
{// TODO: Iterate through all t = 0 to t = 1 with small steps, and call de Casteljau's // recursive Bezier algorithm.for (float t = 0.0; t <= 1.0; t = t + 0.001){cv::Point2f point = recursive_bezier(control_points, t);  //接收每一个t所求得的点//找到该点周围的四个点坐标，先找到一个右上的顶点，然后其他的通过这个点求出cv::Point2f point_1 = cv::Point2f(point.x - std::floor(point.x) < 0.5 ? std::floor(point.x) : std::ceil(point.x),   //右上的点point.y - std::floor(point.y) < 0.5 ? std::floor(point.y) : std::ceil(point.y));cv::Point2f point_2 = cv::Point2f(point_1.x - 1.0, point_1.y);cv::Point2f point_3 = cv::Point2f(point_1.x - 1.0, point_1.y - 1.0);cv::Point2f point_4 = cv::Point2f(point_1.x, point_1.y - 1.0);//用vector容器存储刚刚求得的四个像素点坐标;std::vector<cv::Point2f> distance_dot{ point_1,point_2,point_3,point_4 };float MaxDistance = sqrt(2.0);float SumDistance = 0.0f;float pi_distance = 0.0f;std::vector<float> distance_List = {};window.at<cv::Vec3b>(point.y, point.x)[1] = 255;//Mat.at<存储类型名称>(行，列)[通道]for (int i = 0; i < 4; i++){cv::Point2f point_coordinate(distance_dot[i].x + 0.5, distance_dot[i].y + 0.5);//记录像素中心点;// 距离像素点越近的点 实际上和颜色占比应该越小 因此采用 max-实际距离  的方法进行数据预处理pi_distance = MaxDistance - sqrt(std::pow(point.x - point_coordinate.x, 2) + std::pow(point.y - (point_coordinate.y), 2));distance_List.push_back(pi_distance);SumDistance += pi_distance;       // 计算一个总的距离值}for (int i = 0; i < 4; i++){float d = distance_List[i] / SumDistance;  // d是距离比例系数window.at<cv::Vec3b>(distance_dot[i].y, distance_dot[i].x)[1] = std::min(255.f, window.at<cv::Vec3b>(distance_dot[i].y, distance_dot[i].x)[1] + 255.f * d);//不超过255.f，要进行最小值比较}}}int main() 
{cv::Mat window = cv::Mat(700, 700, CV_8UC3, cv::Scalar(0));cv::cvtColor(window, window, cv::COLOR_BGR2RGB);cv::namedWindow("Bezier Curve", cv::WINDOW_AUTOSIZE);cv::setMouseCallback("Bezier Curve", mouse_handler, nullptr);int key = -1;while (key != 27) {window.setTo(0);for (auto &point : control_points) {cv::circle(window, point, 3, {255, 255, 255}, 3);}if (control_points.size() >= 4) {naive_bezier(control_points, window);   // 所有点的绘制的贝塞尔曲线用绿色表示bezier(control_points, window);   // 前四个点绘制的贝塞尔曲线用红色显示cv::imshow("Bezier Curve", window);cv::imwrite("my_bezier_curve.png", window);key = cv::waitKey(1);}cv::imshow("Bezier Curve", window);key = cv::waitKey(20);}return 0;
}

5. 参考文献

1. 贝塞尔曲线

2. opencv 处理鼠标事件的方法

3. 贝塞尔曲线简单介绍

4. 解决反走样问题

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

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

相关文章

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机 随着全球风电装机容量的快速增长&#xff0c;雷电活动对风力发电机组造成的损害受到更多关注&#xff0c;特别是在雷电活动强烈的地区。在冬季闪电期间&#xff0c;风力涡轮机等高层结构会受到向上的雷击。众所周知&#x…
阅读更多...
Acwing 837. 连通块中点的数量

Acwing 837. 连通块中点的数量

Acwing 837. 连通块中点的数量 题目描述思路讲解代码展示 题目描述 思路讲解 大家看y总这段代码时要注意&#xff0c;在C操作时&#xff0c;y总先把a&#xff0c;b的根结点取出来了&#xff1a;a find(a), b find(b);&#xff0c;因此接下来是先将集合a接到集合b下再把a的连通…
阅读更多...
Android修行手册 - Activity 在 Java 和 Kotlin 中怎么写构造参数

Android修行手册 - Activity 在 Java 和 Kotlin 中怎么写构造参数

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…
阅读更多...
构建捡垃圾机器人的 ROS 2 项目

构建捡垃圾机器人的 ROS 2 项目

一、说明 本系列是关于学习如何使用 ROS2、Docker 和 Github 设计、设置和维护机器人项目。 先决条件 — ROS2 软件包的基本知识、实现发布者、订阅者、操作并连接它们。 我们之前在 ROS2 中了解了不同的部分。但是&#xff0c;在我们转向实际的基于硬件的项目之前&#xff0c;…
阅读更多...
阿里云ECS服务器无法发送邮件问题解决方案

阿里云ECS服务器无法发送邮件问题解决方案

这篇文章分享一下自己把项目部署在阿里云ECS上之后&#xff0c;登录邮件提醒时的邮件发送失败问题&#xff0c;无法连接发送邮箱的服务器。 博主使用的springboot提供的发送邮件服务&#xff0c;如下所示&#xff0c;为了实现异步的效果&#xff0c;新开了一个线程来发送邮件。…
阅读更多...
基于 SpringBoot 2.7.x 使用最新的 Elasticsearch Java API Client 之 ElasticsearchClient

基于 SpringBoot 2.7.x 使用最新的 Elasticsearch Java API Client 之 ElasticsearchClient

1. 从 RestHighLevelClient 到 ElasticsearchClient 从 Java Rest Client 7.15.0 版本开始&#xff0c;Elasticsearch 官方决定将 RestHighLevelClient 标记为废弃的&#xff0c;并推荐使用新的 Java API Client&#xff0c;即 ElasticsearchClient. 为什么要将 RestHighLevelC…
阅读更多...
Windows的批处理——获取系统时间、生成当天日期日志

Windows的批处理——获取系统时间、生成当天日期日志

Windows批处理基础https://coffeemilk.blog.csdn.net/article/details/132118351 一、Windows批处理的日期时间 在我们进行软件开发的过程中&#xff0c;有时候会使用到一些批处理命令&#xff0c;其中就涉及到获取系统日期、时间来进行一些逻辑的判断处理&#xff1b;那么我们…
阅读更多...
Tomcat启动后的日志输出为乱码

Tomcat启动后的日志输出为乱码

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
[Linux] 4.常用初级指令

[Linux] 4.常用初级指令

pwd&#xff1a;显示当前文件路径 ls:列出当前文件夹下有哪些文件 mkdir空格文件名&#xff1a;创建一个新的文件夹 cd空格文件夹名&#xff1a;进入文件夹 cd..&#xff1a;退到上一层文件夹 ls -a&#xff1a;把所有文件夹列出来 .代表当前文件夹 ..代表上层文件夹 用…
阅读更多...
探索ClickHouse——连接Kafka和Clickhouse

探索ClickHouse——连接Kafka和Clickhouse

安装Kafka 新增用户 sudo adduser kafka sudo adduser kafka sudo su -l kafka安装JDK sudo apt-get install openjdk-8-jre下载解压kafka 可以从https://downloads.apache.org/kafka/下找到希望安装的版本。需要注意的是&#xff0c;不要下载路径包含src的包&#xff0c;否…
阅读更多...
最新ChatGPT网站系统源码+支持GPT4.0+支持AI绘画Midjourney绘画+支持国内全AI模型

最新ChatGPT网站系统源码+支持GPT4.0+支持AI绘画Midjourney绘画+支持国内全AI模型

一、SparkAI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&a…
阅读更多...
CCF CSP认证 历年题目自练Day18

CCF CSP认证 历年题目自练Day18

CCF CSP认证 历年题目自练Day18 题目一 试题编号&#xff1a; 201809-1 试题名称&#xff1a; 卖菜 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 256.0MB 问题描述&#xff1a; 问题描述 　　在一条街上有n个卖菜的商店&#xff0c;按1至n的顺序排成一排&#xff0c;这…
阅读更多...
Apollo自动驾驶系统概述（文末参与活动赠送百度周边）

Apollo自动驾驶系统概述（文末参与活动赠送百度周边）

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…
阅读更多...
大喜国庆，聊聊我正式进入职场的这三个月...

大喜国庆，聊聊我正式进入职场的这三个月...

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…
阅读更多...
基础数据结构之——【顺序表】(上)

基础数据结构之——【顺序表】(上)

从今天开始更新数据结构的相关内容。&#xff08;我更新博文的顺序一般是按照我当前的学习进度来安排&#xff0c;学到什么就更新什么&#xff08;简单来说就是我的学习笔记&#xff09;&#xff0c;所以不会对一个专栏一下子更新到底&#xff0c;哈哈哈哈哈哈哈&#xff01;&a…
阅读更多...
八个不可不知的SQL高级方法

八个不可不知的SQL高级方法

结构化查询语言&#xff08;SQL&#xff09;是一种广泛使用的工具&#xff0c;用于管理和操作数据库。基本的SQL查询简单易学&#xff0c;但掌握高级SQL技术可以将您的数据分析和管理能力提升到新的高度。 高级SQL技术是指一系列功能和函数&#xff0c;使您能够对数据执行复杂…
阅读更多...
【day10.01】使用select实现服务器并发

【day10.01】使用select实现服务器并发

用select实现服务器并发&#xff1a; linuxlinux:~/study/1001$ cat server.c #include <myhead.h>#define ERR_MSG(msg) do{\printf("%d\n",__LINE__);\perror(msg);\ }while(0)#define PORT 8880#define IP "192.168.31.38"int main(int argc, c…
阅读更多...
【C/C++笔试练习】二维数组、二维数组的访问，解引用，地址计算、计算糖果、进制转换

【C/C++笔试练习】二维数组、二维数组的访问，解引用，地址计算、计算糖果、进制转换

文章目录 C/C笔试练习1.二维数组&#xff08;1&#xff09;二维数组的访问&#xff08;2&#xff09;二维数组的初始化&#xff08;3&#xff09;二维数组的解引用&#xff08;4&#xff09;二维数组的解引用&#xff08;5&#xff09;多维数组的解引用&#xff08;6&#xff0…
阅读更多...
Blued引流脚本

Blued引流脚本

于多数人来说&#xff0c;引流都是一个比较困难的操作&#xff0c;因为流量不会听你的。所以任何人在网上做生意&#xff0c;或者开一个实体店&#xff0c;都会为流量而发愁&#xff0c;其实对于流量的吸引来说&#xff0c;我们越是刻意为之&#xff0c;可能所获得的效果也越不…
阅读更多...
Go结构体深度探索：从基础到应用

Go结构体深度探索：从基础到应用

在Go语言中&#xff0c;结构体是核心的数据组织工具&#xff0c;提供了灵活的手段来处理复杂数据。本文深入探讨了结构体的定义、类型、字面量表示和使用方法&#xff0c;旨在为读者呈现Go结构体的全面视角。通过结构体&#xff0c;开发者可以实现更加模块化、高效的代码设计。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023