arcgis js 4 使用pixi.js 绘制贝塞尔曲线
我们先定义一下贝塞尔曲线的数据结构
-
let option = {
-
renderer:{
-
type: "simple",
-
symbol: {
-
lineColor: "#14ff34",
-
lineWidth: 3
-
}
-
},
-
data: [
-
{
-
geometry: [
-
[12958063.6570659, 4857420.273468611],
-
[12716675.521741385, 3593151.825632137]
-
],
-
attributes: {
-
name: "北京-武汉",
-
}
-
},
-
{
-
geometry: [
-
[12609052.185915885, 2656339.6069692653],
-
[11855688.835137373, 3458622.655850267]
-
],
-
attributes: {
-
name: "广州-重庆",
-
}
-
},
-
{
-
geometry: [
-
[12609052.185915885, 2656339.6069692653],
-
[13521404.55552746, 3666531.372785874]
-
],
-
attributes: {
-
name: "广州-上海",
-
}
-
},
-
{
-
geometry: [
-
[12609052.185915885, 2656339.6069692653],
-
[13785570.925280986, 1381981.4713991268]
-
],
-
attributes: {
-
name: "广州-菲律宾",
-
}
-
}
-
-
]
-
};
贝塞尔曲线最重要是获取中间那个点
```javascript
//获取贝塞尔曲线中间控制点的坐标
getPoint(sx, sy, ex, ey){
//获取开始,结束点所在直线1公式
let k = (ey - sy)/(ex - sx);
let b = (k(sy + ey) + (sx + ex))/(2k);
//以开始点为旋转中心,逆时针旋转30度,获得该直线2公式
let angle = (Math.atan2(ey - sy, ex - sx))/(Math.PI/180) + 30;
let k1 = Math.tan((Math.PIangle)/180); let b1 = sy - k1sx;
//中间控制点即为直线1和2的交点
let c1x = (b - b1)/(k1 + 1/k),
c1y = k1*c1x + b1;
更多参考https://xiaozhuanlan.com/topic/0781345692
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律