【纯JavaScript 三维 扇形 圆 标绘 箭头 贝塞尔曲线】

已于 2024-03-21 18:13:36 修改
阅读量162 收藏
点赞数 4
分类专栏： JavaScript 3D 文章标签： javascript
于 2024-03-21 15:35:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyy_112/article/details/136910027
版权

纯JavaScript 三维 扇形 圆 标绘 箭头 贝塞尔曲线

在这里插入图片描述

1.创建扇形、圆

代码如下（示例）：


/**
 * 根据起点，终点，创建扇形面
 * @param {*} startPoint 起点坐标
 * @param {*} endPoint 终点坐标
 * @param {*} showAngle 扇形弧度 （0 - 360）
 * @param {*} n 边数复杂度（太大会出现锯齿现场默认半径5倍）
 */
function createSectorPolygonByPoint(startPoint, endPoint, showAngle, n, addR = 0) {
    let r = Math.sqrt(Math.pow(endPoint[0] - startPoint[0], 2) + Math.pow(endPoint[1] - startPoint[1], 2) + Math.pow(endPoint[2] - startPoint[2], 2)) + addR;
    if (!n) {
        n = r * 5;
        n < 20 && (n = 20);
        n > 20 && (n = 100);
    }
    let sAnale = getTheta(startPoint, endPoint, 90);
    let [x, y, z] = startPoint;
    let points = [startPoint];
    let angle = Math.PI + sAnale - Math.PI * showAngle / 360;
    let counterclockwise = false;
    points.push([x + r * Math.sin(angle),       //从第一个顶点开始一条新的子路径
    y - r * Math.cos(angle), z])
    var delta = 2 * Math.PI / n;            //两个顶点之间的夹角
    var maxCount = parseInt(n * showAngle / 360);
    for (var i = 1; i < maxCount; i++) {          //循环剩余的每个顶点
        angle += counterclockwise ? -delta : delta;   //调整角度
        points.push([x + r * Math.sin(angle),   //以下个顶点为端点添加线段
        y - r * Math.cos(angle), z]);
    }
    return points;
}

//计算与X轴夹角 并偏移pn(0-360)（三角）
function getTheta(p1, p2, pn = 0) {
    let angle = Math.atan2((p2[1] - p1[1]), (p2[0] - p1[0]));
    angle -= Math.PI * pn / 180;
    return angle;
}

2.各类箭头标绘

代码如下（示例）：


/**
 * 根据两点绘制标准箭头(两点式)
 * @param {*} endPoint 终点
 * @param {*} startPoint  起点
 * @param {*} outAngle 外角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} ratio 箭头长度占比
 * @param {*} concave 缩进比例
 * @returns 
 */
function arrow1(endPoint, startPoint, outAngle = 60, inAngle = 40, Angle = 10, ratio = 0.2, concave = 0.15) {
    let r = Math.sqrt(Math.pow(endPoint[0] - startPoint[0], 2) + Math.pow(endPoint[1] - startPoint[1], 2) + Math.pow(endPoint[2] - startPoint[2], 2));
    let r2 = r * ratio;
    let r3 = r * concave;

    //计算与X轴夹角 并偏移pn(0-360)（三角）
    let pn = 90;//默认0°
    let sAnale = Math.atan2((endPoint[1] - startPoint[1]), (endPoint[0] - startPoint[0]));
    sAnale -= Math.PI * 90 / 180;

    let [x, y, z] = startPoint;
    let points = [startPoint];
    //外1左
    let angle = Math.PI + sAnale - Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    //外2左
    angle = Math.PI + sAnale - Math.PI * inAngle / 360;
    points.push([x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z]);

    //外3左
    angle = Math.PI + sAnale - Math.PI * Angle / 360;
    points.push([x + r * Math.sin(angle), y - r * Math.cos(angle), z]);

    //外3右
    angle = Math.PI + sAnale + Math.PI * Angle / 360;
    points.push([x + r * Math.sin(angle), y - r * Math.cos(angle), z]);


    //外2右
    angle = Math.PI + sAnale + Math.PI * inAngle / 360;
    points.push([x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z]);

    //外1右
    angle = Math.PI + sAnale + Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    // points.push(startPoint);
    return points;
}

/**
 * 根据两点绘制标准箭头(某段箭头形式)(两点式)
 * @param {*} endPoint 终点
 * @param {*} startPoint  起点
 * @param {*} outAngle 外角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} ratio 箭头长度占比
 * @param {*} concave 缩进比例
 * @param {*} endConcave 末端缩进比例
 * @returns 
 */
function arrow2(endPoint, startPoint, outAngle = 60, inAngle = 40, Angle = 10, ratio = 0.2, concave = 0.15, endConcave = 0.05) {
    let r = Math.sqrt(Math.pow(endPoint[0] - startPoint[0], 2) + Math.pow(endPoint[1] - startPoint[1], 2) + Math.pow(endPoint[2] - startPoint[2], 2));
    let r2 = r * ratio;
    let r3 = r * concave;
    let r4 = r * (1 - endConcave);

    //计算与X轴夹角 并偏移pn(0-360)（三角）
    let pn = 90;//默认0°
    let sAnale = Math.atan2((endPoint[1] - startPoint[1]), (endPoint[0] - startPoint[0]));
    sAnale -= Math.PI * 90 / 180;

    let [x, y, z] = startPoint;
    let points = [startPoint];
    //外1左
    let angle = Math.PI + sAnale - Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    //外2左
    angle = Math.PI + sAnale - Math.PI * inAngle / 360;
    points.push([x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z]);

    //外3左
    angle = Math.PI + sAnale - Math.PI * Angle / 360;
    points.push([x + r * Math.sin(angle), y - r * Math.cos(angle), z]);

    //中末端点
    angle = Math.PI + sAnale;
    points.push([x + r4 * Math.sin(angle), y - r4 * Math.cos(angle), z]);

    //外3右
    angle = Math.PI + sAnale + Math.PI * Angle / 360;
    points.push([x + r * Math.sin(angle), y - r * Math.cos(angle), z]);


    //外2右
    angle = Math.PI + sAnale + Math.PI * inAngle / 360;
    points.push([x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z]);

    //外1右
    angle = Math.PI + sAnale + Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    return points;
}


/**
 * 根据两点绘制标准箭头(二次贝塞尔曲线)(三点式)
 * @param {*} endPoint 终点
 * @param {*} startPoint  起点
 * @param {*} outAngle 外角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} ratio 箭头长度占比
 * @param {*} concave 缩进比例
 * @param {*} endConcave 末端缩进比例
 * @returns 
 */
function arrow3(endPoint, startPoint, centerPoint, outAngle = 60, inAngle = 40, Angle = 10, ratio = 0.2, concave = 0.15, endConcave = 0.05) {
    let r11 = Math.sqrt(Math.pow(centerPoint[0] - startPoint[0], 2) + Math.pow(centerPoint[1] - startPoint[1], 2) + Math.pow(centerPoint[2] - startPoint[2], 2));
    let r22 = Math.sqrt(Math.pow(endPoint[0] - centerPoint[0], 2) + Math.pow(endPoint[1] - centerPoint[1], 2) + Math.pow(endPoint[2] - centerPoint[2], 2));
    let r2 = r11 * ratio;
    let r3 = r11 * concave;
    let r4 = r22 * (1 - endConcave);

    //计算与X轴夹角 并偏移pn(0-360)（三角）
    let pn = 90;//默认0°
    let sAnale = Math.atan2((endPoint[1] - startPoint[1]), (endPoint[0] - startPoint[0]));
    sAnale -= Math.PI * 90 / 180;

    let sAnale1 = Math.atan2((centerPoint[1] - startPoint[1]), (centerPoint[0] - startPoint[0]));
    sAnale1 -= Math.PI * 90 / 180;

    let sAnale2 = Math.atan2((endPoint[1] - centerPoint[1]), (endPoint[0] - centerPoint[0]));
    sAnale2 -= Math.PI * 90 / 180;

    let [x, y, z] = startPoint;
    let [x2, y2, z2] = centerPoint;
    let points = [startPoint];
    //外1左
    let angle = Math.PI + sAnale1 - Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    //外2左
    angle = Math.PI + sAnale1 - Math.PI * inAngle / 360;
    let _l2 = [x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z];

    //外3左
    angle = Math.PI + sAnale2 - Math.PI * Angle / 360;
    let _l3 = [x2 + r22 * Math.sin(angle), y2 - r22 * Math.cos(angle), z2];
    points.push(...getBS2Coors(_l2, centerPoint, _l3));

    //中末端点
    angle = Math.PI + sAnale2;
    points.push([x2 + r4 * Math.sin(angle), y2 - r4 * Math.cos(angle), z2]);

    //外3右
    angle = Math.PI + sAnale2 + Math.PI * Angle / 360;
    let _r3 = [x2 + r22 * Math.sin(angle), y2 - r22 * Math.cos(angle), z2];

    //外2右
    angle = Math.PI + sAnale1 + Math.PI * inAngle / 360;
    let _r2 = [x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z];
    points.push(...getBS2Coors(_r2, centerPoint, _r3).reverse());

    //外1右
    angle = Math.PI + sAnale1 + Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    // points.push(startPoint);
    return points;
}

/**
 * 根据两点绘制标准箭头(二次贝塞尔曲线)(四点式)
 * @param {*} endPoint 终点
 * @param {*} startPoint  起点
 * @param {*} outAngle 外角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} inAngle 内角度 0 - 180
 * @param {*} ratio 箭头长度占比
 * @param {*} concave 缩进比例
 * @param {*} endConcave 末端缩进比例
 * @returns 
 */
function arrow4(endPoint, startPoint, centerPoint, outAngle = 60, inAngle = 40, Angle = 10, ratio = 0.2, concave = 0.15, endConcave = 0.05) {
    let r11 = Math.sqrt(Math.pow(centerPoint[0] - startPoint[0], 2) + Math.pow(centerPoint[1] - startPoint[1], 2) + Math.pow(centerPoint[2] - startPoint[2], 2));
    let r22 = Math.sqrt(Math.pow(endPoint[0] - centerPoint[0], 2) + Math.pow(endPoint[1] - centerPoint[1], 2) + Math.pow(endPoint[2] - centerPoint[2], 2));
    let r2 = r11 * ratio;
    let r3 = r11 * concave;
    let r4 = r22 * (1 - endConcave);

    //计算与X轴夹角 并偏移pn(0-360)（三角）
    let pn = 90;//默认0°
    let sAnale = Math.atan2((endPoint[1] - startPoint[1]), (endPoint[0] - startPoint[0]));
    sAnale -= Math.PI * 90 / 180;

    let sAnale1 = Math.atan2((centerPoint[1] - startPoint[1]), (centerPoint[0] - startPoint[0]));
    sAnale1 -= Math.PI * 90 / 180;

    let sAnale2 = Math.atan2((endPoint[1] - centerPoint[1]), (endPoint[0] - centerPoint[0]));
    sAnale2 -= Math.PI * 90 / 180;

    let [x, y, z] = startPoint;
    let [x2, y2, z2] = centerPoint;
    let points = [startPoint];
    //外1左
    let angle = Math.PI + sAnale1 - Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    //外2左
    angle = Math.PI + sAnale1 - Math.PI * inAngle / 360;
    let _l2 = [x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z];

    //外3左
    angle = Math.PI + sAnale2 - Math.PI * Angle / 360;
    let _l3 = [x2 + r22 * Math.sin(angle), y2 - r22 * Math.cos(angle), z2];
    points.push(...getBS2Coors(_l2, centerPoint, _l3));

    //中末端点
    angle = Math.PI + sAnale2;
    points.push([x2 + r4 * Math.sin(angle), y2 - r4 * Math.cos(angle), z2]);

    //外3右
    angle = Math.PI + sAnale2 + Math.PI * Angle / 360;
    let _r3 = [x2 + r22 * Math.sin(angle), y2 - r22 * Math.cos(angle), z2];

    //外2右
    angle = Math.PI + sAnale1 + Math.PI * inAngle / 360;
    let _r2 = [x + r3 * Math.sin(angle), y - r3 * Math.cos(angle), z];
    points.push(...getBS2Coors(_r2, centerPoint, _r3).reverse());

    //外1右
    angle = Math.PI + sAnale1 + Math.PI * outAngle / 360;
    points.push([x + r2 * Math.sin(angle), y - r2 * Math.cos(angle), z]);

    // points.push(startPoint);
    return points;
}

//B（t） =  (1-t)²P0 +2t(1-t)P1+t²P2  [0<t<1] 一次贝塞尔曲线
function getBS1Coors(p0, p1, p2, count = 100) {
    let coors = [];
    for (let i = 0; i < count; i++) {
        let t = i / count;
        let x = (1 - t) * (1 - t) * p0[0] + 2 * t * (1 - t) * p1[0] + t * t * p2[0];
        let y = (1 - t) * (1 - t) * p0[1] + 2 * t * (1 - t) * p1[1] + t * t * p2[1];
        coors.push([x, y, p1[2]]);
    }
    return coors;
}

总结

共同学习

虚己_
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ArcGIS for JavaScript 动态标绘燕尾箭头
12-21
ArcGIS for JavaScript 动态标绘燕尾箭头，需要放到web服务器上才能看到效果
Unity 在三维空间中绘制贝塞尔曲线
海月的博客
04-16 1561
一阶贝塞尔曲线 给定点P0、P1，分别为起点和终点。这是一条两点之间的直线。t是曲线的参数，范围在0到1之间，代表当前点在曲线起点和终点之间的位置比率。t值确定，当前t值在曲线上对应的点便确定了。 其实就是对两个点进行线性插值 Vector3 LinearLerp(Vector3 a, Vector3 b, float t) { return Vector3.Lerp(a, b, t); } 二阶贝塞尔曲线 给定点P0、P1、P2，分别为起点、一个中间控制点和终点。 二
ArcGIS API for JavaScript 3.x 军事标绘 (攻击箭头\前行箭头\燕尾箭头\聚集地\扇形等)
guoqi_guoqi的博客
07-18 868
arcgis for js 军事标绘
arcgis地图中三维标绘点、线、面
weixin_45289656的博客
03-08 1031
废话不多说，直接上干货 // 需要引入SketchViewModel let sketchLayer = new GraphicsLayer() let bufferLayer = new GraphicsLayer() const sketchViewModel = new SketchViewModel({ layer: sketchLayer, view: view, pointSymbol: { type: 'simple-marker',
osgearth开发二三维同步标绘系统
kelvinci的博客
02-29 571
【代码】osgearth开发二三维同步标绘系统。
cesium绘制箭头工具代码，html,三维开发实例 前端开发
05-21
cesium绘制箭头工具代码，html,三维开发实例 前端开发
Cesium标绘工具-扇形 源代码分享
04-22
这里涉及到一个问题，当我绘制扇形的时候，发现，绘制的结果是个立着的椭圆（应该是圆形），也就是南北长，东西短，目测应该是投影问题，然后进行了改造，将计算之前，先把笛卡尔坐标转成的经纬度坐标转成web墨卡托...
33.（cesium篇）cesium态势标绘-攻击箭头编辑修改（平尾）.zip
06-08
该资源包的执行效果查看地址：...“地图之家”专栏中的“33.（cesium篇）cesium态势标绘-攻击箭头编辑修改（平尾）”。如下载有问题，可联系博主。 解压密码：cesium
28.（cesium篇）cesium态势标绘-直线箭头采集.zip
06-08
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“28.（cesium篇）cesium态势标绘-直线箭头采集”。如下载有问题，可联系博主。 解压密码：cesium
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 404
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 208
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
前端Vue架构
weixin_45678402的博客
05-12 294
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
最新发布
2301_79683791的博客
05-15 504
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
用vue实现json模版编辑器
qq_44428688的博客
05-14 511
设想业务逻辑是拖拽控件生成表单 动手做了一个简单的demo 业务的原型图设想如下所示其中使用的技术主要是vuedragger。
js设计模式-策略模式与代理模式的应用
偏执的小男孩儿
05-13 375
js设计模式-策略模式与代理模式的应用
vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
口袋的天空的博客
05-12 1031
vue3,elementui-plus,pinia
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 156
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
自定义el-select下拉菜单的内容以及数据回显的内容
qq_59625204的博客
05-10 213
但是此时虽然实现了自定义内容但v-model绑定的值也回显了，所以此时我们要对默认的数据回显处理一下，在style标签中设置如下代码。这里我设置了ref为seriesBorderTypeRef,在change事件中通过以下代码就可实现数据回显部分。下拉选项的自定义内容好实现，因为他有默认插槽，所以直接在el-option标签里面写自定义内容就可以实现。.现在完美实现了需求，最后不要忘记清除添加的style样式哦。关键上方选中的数据回显应该怎么做。
cesium椭圆标绘
01-10
椭圆标绘是Cesium引擎中的一种功能，可以用于在地球上绘制椭圆形的图形。 椭圆标绘在Cesium中是通过指定椭圆的中心点、长半轴、短半轴、方向角以及椭圆上的点的数量来实现的。具体步骤如下： 首先，需要指定一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值