3.2 矢量图的绘制
3.2 矢量图的绘制
周星星9527
发布于 2018-08-08 15:47:22
发布于 2018-08-08 15:47:22
相对云图，矢量图的绘制要简单一些，绘制箭头表示矢量，而箭头可简单的由三条长短不一的直线构成。矢量图(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);运行结果如图：
注意：代码中用到的复数（=向量=矢量）类的代码没有给出，但不影响了解绘制箭头的思路理解。实际中，矢量图是多个点的矢量，如下图：
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读