3.2 矢量图的绘制

相对云图,矢量图的绘制要简单一些,绘制箭头表示矢量,而箭头可简单的由三条长短不一的直线构成。矢量图(Vector Map)通常用于描述流场流动情况,矢量图由有限个箭头构成,而箭头通常可用三段线段组合绘制,箭头绘制代码如下,其中涉及了大量的向量运算:

1. var arrowAngel=15*Math.PI/180;
2.  
3. ContourUtil.DrawArrow=function(pencil,posObj,vecObj){
4.    pencil.strokeStyle= "#000000";
5.    pencil.lineWidth=1;
6.  
7.  var length=vecObj.lengthCPLX();
8.    theta=Math.PI+arrowAngel;
9.  var cplx = newComplex(vecObj.x,vecObj.y);
10.    vecObj.addCPLX(posObj);
11.  var pivot = newComplex(vecObj.x,vecObj.y);
12.    pencil.moveTo(posObj.x,posObj.y);
13.    pencil.lineTo(vecObj.x,vecObj.y);
14.  
15.  var arrowLength = length* 0.2;
16.  
17.    cplx.rotateCPLX(theta,arrowLength);
18.    vecObj.addCPLX(cplx);
19.    pencil.lineTo(vecObj.x,vecObj.y);
20.  
21.    pencil.moveTo(pivot.x,pivot.y);
22.    cplx.rotateCPLX(-arrowAngel * 2);
23.    pivot.addCPLX(cplx);
24.    pencil.lineTo(pivot.x,pivot.y);
25.  
26.    pencil.stroke();
27. }

指定矢量位置pos和矢量vec,即可调用上述函数绘制矢量图,如下:

1. var pos=new Complex(5,5);
2. var vec=new Complex(60,80);
3. varctx=GetCanvasContext("canvasOne");
4. ContourUtil.DrawArrow(ctx,pos,vec);

运行结果如图:

注意:代码中用到的复数(=向量=矢量)类的代码没有给出,但不影响了解绘制箭头的思路理解。实际中,矢量图是多个点的矢量,如下图:

原文发布于微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文发表时间:2018-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

Latex 公式速查

所有的在 Latex 使用的字符公式,都需要放在\(和\),$ 和 $,\begin{math} 和\end{math}之间。

72030
来自专栏ACM算法日常

翻转瓷砖Fliptile(开关反转)- POJ 3279

Farmer John knows that an intellectually satisfied cow is a happy cow who will g...

12020
来自专栏MelonTeam专栏

OpenGL ES (iOS) 学习笔记 — 基础篇(一)

最近一直在做视频相关的工作,结合最近很火的AR技术,所以准备好好学习一下3D渲染的相关知识。因为一直在iOS移动端开发,所以学习一下OpenGL ES 技术。 ...

743100
来自专栏小小挖掘机

Matplotlib基础全攻略

Matplotlib是Python中最流行的绘图库,它模仿MATLAB中的绘图风格,提供了一整套与MATLAB相似的绘图API,通过API,我们可以轻松地绘制出...

42550
来自专栏CDA数据分析师

Excel中6个怪异的公式,你知多少?

文 | 兰色幻想-赵志东 在excel中我们有时会看到一些奇奇怪怪的公式,为了帮助新手学习,兰色今天带大家一起盘点这些公式。 公式1:=Sum(表1:表20!A...

21150
来自专栏一棹烟波

OpenGL+OpenCV实现立方体贴图

我屮艸芔茻,转眼就7月份了。 今天试了一下立方体贴图,比较简单,大概说下和平面贴图的区别。 1. 平面贴图需要的是纹理坐标vec2;立方体贴图需要的是一个方向向...

25550
来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

一个简单的统计图像主颜色的算法(C#源代码)

      前段日子有朋友咨询了下分析图像主颜色的算法,我对这一块也没有什么深入的研究,参考了一些小代码,然后自己写了一个很简单的小工具,现共享给大家。    ...

30750
来自专栏机器学习原理

我的机器学习numpy篇何为ndarray?ndarry创建生成正态分布ndarry属性修改形状ndarry运算ndarry切片矩阵转置聚合函数

前言: numpy是以矩阵为基础的数学计算模块,其基础为多维数组为ndarray 官方文档:(https://docs.scipy.org/doc/nump...

40280
来自专栏数据小魔方

sparklines迷你图系列8——Comparision(HVar & VBar)

今天继续跟大家分享sparklines迷你图系列8——Comparision图表类型中的单条形图/柱形图。 这里所指的条形图之所以称为单条形图、柱形图,是因为每...

29350
来自专栏数据结构与算法

洛谷P3209 [HNOI2010]PLANAR(2-SAT)

题目描述 若能将无向图G=(V,E)画在平面上使得任意两条无重合顶点的边不相交,则称G是平面图。判定一个图是否为平面图的问题是图论中的一个重要问题。现在假设你要...

35360

扫码关注云+社区

领取腾讯云代金券