二阶贝塞尔曲线生成弧线

概述

本文分享一个二阶贝塞尔曲线曲线生成弧线的算法。

效果

image.png

实现

1. 封装方法

class ArcLine {constructor(from, to, num = 100) {this.from = from;this.to = to;this.num = num;return this.getPointList();}getPointList() {const { from, to } = thisconst ctrlPoint = this.getOffsetPoint(from, to);const points = this.create2PBezier(from, ctrlPoint, to)return points}getOffsetPoint(start, end) {const distance = this.getDistance(start, end) / 2; //除以3?let angle, dX, dY;const mp = [start[0], start[1]];const deltaAngle = - Math.PI / 8; //偏移0.2弧度if (start[0] != end[0] && start[1] != end[1]) { //斜率存在const k = (end[1] - start[1]) / (end[0] - start[0]);angle = Math.atan(k);} else if (start[0] == end[0]) { //垂直线angle = (start[1] <= end[1] ? 1 : -1) * Math.PI / 2;} else { //水平线angle = 0;}if (start[0] <= end[0]) {angle -= deltaAngle;dX = Math.round(Math.cos(angle) * distance);dY = Math.round(Math.sin(angle) * distance);mp[0] += dX;mp[1] += dY;} else {angle += deltaAngle;dX = Math.round(Math.cos(angle) * distance);dY = Math.round(Math.sin(angle) * distance);mp[0] -= dX;mp[1] -= dY;}return mp;}getDistance(p1, p2) {return Math.sqrt((p1[0] - p2[0]) * (p1[0] - p2[0]) + (p1[1] - p2[1]) * (p1[1] - p2[1]));}bezier2P(p0, p1, p2, t) {const P0 = p0 * Math.pow(1 - t, 2);const P1 = p1 * 2 * t * (1 - t);const P2 = p2 * t * t;return P0 + P1 + P2;}getBezierNowPoint2P(p0, p1, p2, num, tick) {return {x: this.bezier2P(p0[0], p1[0], p2[0], num * tick),y: this.bezier2P(p0[1], p1[1], p2[1], num * tick),};}create2PBezier(p0, p1, p2) {const num = this.numconst t = 1 / (num - 1);const points = [];for (let i = 0; i < num; i++) {const point = this.getBezierNowPoint2P(p0, p1, p2, i, t);points.push([point.x, point.y]);}return points;}
}

2. 前端调用

示例使用openlayers实现。

let vetSource = new ol.source.Vector({features: [],
});
let vectorLayer = new ol.layer.Vector({source: vetSource,style: new ol.style.Style({stroke: new ol.style.Stroke({color: "#f00",width: 2,}),}),
});
map.addLayer(vectorLayer)function addAllLines() {let features = [];for (let i = 0; i < pointData.length; i++) {const after = pointData[i];const from = [101.797439042302, 36.5937248286007];const to = [after.lon, after.lat].map(Number);let points = new ArcLine(from, to);points = points.map((p) => ol.proj.fromLonLat(p));lineData.push(points);features.push(new ol.Feature({geometry: new ol.geom.LineString(points),}));}vetSource.addFeatures(features);map.getView().animate({center: [12474607.173951693, 4278483.982819865],zoom: 3.8,});
}

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

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

相关文章

二级C语言备考4

一、单选 共40题 &#xff08;共计40分&#xff09; 第1题 &#xff08;1.0分&#xff09; 题号:6198 难度:易 第1章 以下说法正确的是 (). A:C语言被称为"高级语言"是因为它用接近人们习惯的自然语言和数学语言作为表达形式,使人们学习和操…

rime中州韵小狼毫 汉语拼音输入方案

在word中&#xff0c;我们可以轻易的给汉字加上拼音&#xff0c;如下&#x1f447;&#xff1a; 但是&#xff0c;如何单独的输入拼音呢&#xff1f;例如输入 pīn yīn, 再如 zhōng guō。今天我们分享一个使用rime中州韵小狼毫须鼠管输入法配置的输入汉语拼音的输入方案。功…

C++面试问题---Const

1.const 1.1 作用 修饰变量&#xff0c;说明该变量不可以被改变&#xff1b;修饰指针&#xff0c;分为指向常量的指针&#xff08;pointer to const&#xff09;和自身是常量的指针&#xff08;常量指针&#xff0c;const pointer&#xff09;&#xff1b;修饰引用&#xff0c;…

JFrog_Artifactory CLI 的使用

文章目录 1. 文件上传&#xff0c;下载&#xff0c;删除&#xff0c;拷贝, 移动&#xff0c;搜索2. 用户登录信息配置3. 文件属性设置4. 执行curl命令 1. 文件上传&#xff0c;下载&#xff0c;删除&#xff0c;拷贝, 移动&#xff0c;搜索 #1.上传tar包&#xff0c;并且创建包…

【uniapp-小程序-分享图5/4】

utils.js //裁剪分享的图片为5:4 const makeCanvas (imgUrl) > {console.log("imgUrl",imgUrl);return new Promise((resolve, reject) > {// 获取图片信息,小程序下获取网络图片信息需先配置download域名白名单才能生效uni.getImageInfo({src: imgUrl,succe…

tkinter电子时钟实现时间日期可实现透明无标题栏

您可以使用Python的Tkinter库来创建一个简单的电子时钟应用程序。以下是一个示例代码&#xff0c;它可以在窗口上显示当前的时间和日期&#xff0c;并且窗口是透明的且没有标题栏。 from tkinter import * import time# 创建主窗口 root Tk()# 设置窗口透明 root.attributes(…

【机器学习300问】6、什么是机器学习中的特征量?

一、首先我们看三个例子 例一&#xff1a;在辨别水果的任务中&#xff0c;人类一般会通过外观、味道、颜色等方面信息来进行区分。而机器学习则通过水果的颜色、重量、气味成分的量等被称之为“特征量”的数值来区分。 例二&#xff1a;在手写数字识别任务中&#xff0c;人类…

概率大揭秘:深度复习概率论,事半功倍的学霸秘籍!

第一章 概率论的基本概念 一、事件及其关系与运算 1、样本空间、样本点、随机事件、必然事件、不可 能事件、基本事件和复合事件的概念&#xff1b; 2、事件的包含与相等&#xff1a;若事件A包含事件B&#xff0c;则B的发生必然导致A的发生。进而有P(AB)P(B)&#xff0c;P…

什么是算法复杂度?

算法复杂度分析 数据结构有哪些&#xff1f; 数组&#xff0c;链表&#xff0c;二叉树&#xff0c;红黑树&#xff0c;散列表。 为什么要进行复杂度分析&#xff1f; 指导你编写出性能更优秀的代码 评判别人写的代码的好坏。 时间复杂度&#xff1a;代码的执行耗时 空间复…

Spark Doris Connector 可以支持通过 Spark 读取 Doris 数据类型不兼容报错解决

1、版本介绍&#xff1a; doris版本&#xff1a; 1.2.8Spark Connector for Apache Doris 版本&#xff1a; spark-doris-connector-3.3_2.12-1.3.0.jar:1.3.0-SNAPSHOTspark版本&#xff1a;spark-3.3.1 2、Spark Doris Connector Spark Doris Connector - Apache Doris 目…

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 前言 本文将介绍在Vue中父子组件如何进行…

【MQTT】使用MQTT在Spring Boot项目中实现异步消息通信

目录 使用MQTT在Spring Boot项目中实现异步消息通信步骤1&#xff1a;引入MQTT库依赖步骤2&#xff1a;配置MQTT连接信息步骤3&#xff1a;创建MQTT配置类步骤4&#xff1a;发送MQTT消息发布MQTT消息消费MQTT消息 总结 前置文章&#xff1a; &#xff08;一&#xff09;MQTT协议…

基于深度学习的视觉应用

基于深度学习的视觉应用&#xff0c; 又名&#xff1a;机器视觉之从调包侠到底层开发&#xff08;第4天&#xff09; PS:这个系列是准备做从Python一些接口应用开发&#xff0c;openCV基础使用场景原理讲解&#xff0c;做一些demo案例讲解&#xff0c;然后开始数学基础复习&am…

PHP在线考试平台管理系统源码带文字搭建教程和操作手册

PHP在线考试平台管理系统源码带文字搭建教程和操作手册 技术架构 PHP7.2 Thinkphp6 React UmiJs nginx mysql5.7 cnetos7以上 宝塔面板 系统功能特性与介绍 采用PHP7强类型&#xff08;严格模式&#xff09;。 题库管理 支持多种试题类型和录题方式。 考生管理 快速导入考…

鸿蒙开发环境搭建-高频环境问题解决

1.Node版本问题 由于SDK的部分工具依赖Node.js运行时&#xff0c;推荐使用配套API版本的Node.js&#xff0c;保证工程的兼容性。 匹配关系见下表&#xff1a; API LevelNode.js支持范围API Level≤914.x&#xff08;≥14.19.1&#xff09;、16.xAPI Level>914.x&#xff0…

【Java万花筒】数据之翼:Java库助您飞跃科学计算高峰

Java数据魔法&#xff1a;探秘科学计算之道 前言 随着科技的不断发展&#xff0c;数据处理和科学计算在各行各业中扮演着愈发重要的角色。为了更高效、更准确地进行数据分析、科学计算和可视化展示&#xff0c;Java开发者广泛使用各种强大的库。本文将深入探讨几个在数据处理…

鲁迅经典名言100句

要继续调整心性&#xff0c;安静读书&#xff0c;一步一步按计划完成工作&#xff0c;然后就可以更加幸福。这个道理真简单&#xff0c;但是我从没看见谁做到过。— —《读书与跌宕自喜》 中国大约太老了&#xff0c;社会上事无大小&#xff0c;都恶劣不堪&#xff0c;像一只黑…

基于多媒体的深度学习 Midreport自我总结分析

Resistor Ohm Value Estimation Challenge 需要将误差降低到1%以下 1、调整模型架构&#xff1a;增加模型的复杂性&#xff0c;例如增加卷积层或全连接层的数量&#xff0c;增加神经元数量等 # 在 ResistorEstimator 类的 CNN 方法中进行修改 def CNN(self, type):input In…

Selenium登录网页时,不定时出现异常弹窗的四种解决方案

方案一&#xff1a;加个异常判断&#xff0c;出现了就重新登录 以下是一个简单的伪代码示例&#xff0c;展示了如何加入异常判断并重新登录&#xff1a; def login():# 登录操作if login_success:return Trueelse:return Falsedef check_usbkey_matching():# 检查当前用户与U…

【纯CSS特效源码】(一)几款漂亮的文字特效

1.渐变文字 使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色 并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色 <!DOCTYPE html> <html><style>body {background-color: #111;}#content {position: abso…