D4-Android绘图之和我一起画箭头
D4-Android绘图之和我一起画箭头
张风捷特烈
发布于 2018-09-29 11:21:37
发布于 2018-09-29 11:21:37
零、前言
画箭头?逗我吧，箭头有什么好画的，其中还是有东西讲的，算是LogicCanvas向量绘制的引入吧 数学老师：“安逸的你们，是否已经忘记了曾经被向量支配的恐惧?”(开玩笑的) 案例代码在自定义控件时的Ondraw里 绘图部分基于我的LogicCanvas绘图库：基础使用在此， 喜欢的话可以到github上看看，顺便给个star
效果图
效果图.png
效果图
画线
1.前期准备：为了方便查看先绘制网格和坐标系
Pos coo = v2(500, 800);//定义坐标系位置
//绘制网格
CanvasUtils.drawGrid(getContext(), 50, canvas);
//绘制坐标系
CanvasUtils.drawCoord(getContext(), coo, 50, canvas);2.画一个给定点的向量：以原点为起点
//基于坐标绘制a向量
Shape a = new ShapeLine().v(100f,100f).coo(coo).b(5f).ss(Color.GRAY);
painter.draw(a);
画一个给定点的向量.png
你也许会说:老子瓜子都准备好了，就给我看这个?分明就是条线，扯什么向量，吓老子一跳。用安卓元素的canvas也能666的画出来------别急别急
3.画一个给信息的向量：比如--一条与X轴夹角60°，长300px向量
Shape a = new ShapeLine().ang(60f).c(300f).coo(coo).b(5f).ss(Color.GRAY);
painter.draw(a);
画一个给信息的向量.png
你也许会说:恩?有点意思，明明是直线，你偏说是向量干嘛----
二、画箭头：
基于上面两点画个箭头应该不在话下吧，封个方法出来，专门给向量加箭头
/**
* 给向量加个箭头...纯属好看
*
* @param shapeL 直线
*/
public void cap(ShapeLine shapeL) {
Pos posOfCap = shapeL.mv.add(shapeL.mp);//箭头向量的起点
ShapeLine cap = (ShapeLine) new ShapeLine()//一侧箭头
.c(30f).ang(shapeL.mang + 155)
.p(posOfCap).coo(shapeL.mcoo).b(3f).ss(Color.BLUE);
ShapeLine cap2 = cap.deepClone().ang(shapeL.mang - 155);//另一侧箭头
draw(cap, cap2);//绘制箭头
}使用：
cap(a);
箭头.png
你也许会说:好吧，你说向量就向量吧，箭头画完了，老子走了-----等一下，好戏还没开演呢。
三、向量的简单操作
之所以说是向量，不是因为它的名字叫向量，而是模仿了很多向量向量相关的操作
准备工作：
为了避免new很多点，采用原型模式(已在Pos里添加clone函数)，下面是由一个点克隆点的方法。 直线采用深克隆，避免new
protected Pos pos = new Pos(0,0);//准备一个点
protected ShapeLine sl = new ShapeLine();//准备一个线
/**
* 形成向量
*
* @param x X 坐标
* @param y Y 坐标
* @return 向量
*/
public Pos v2(float x, float y) {
return pos.clone(x, y);
}使用：
Pos pA=v2(100,100);//就拷贝了一个点，并赋值为100,100
ShapeLine a = (ShapeLine) sl.deepClone().v(pA).coo(coo).b(5f).ss(Color.GRAY);
painter.draw(a).cap(a);
源向量.png
1.重定义长度：resize()
pA.resize(300);
重定义长度.png
2.取反向量:ref()
pA = pA.ref();
取反.png
3.X取反向量:refX()
pA = pA.refX();
X取反向量.png
4.Y取反向量:refY()
pA = pA.refY();
Y取反向量.png
5.置为0向量:release()
pA.release();
置为0向量.png
6.向量加法演示：
//向量
Pos pA = v2(100f, 100f);
Pos pB = v2(-100f, 100f);
//形状
ShapeLine a = (ShapeLine) sl.deepClone().v(pA).coo(coo).b(5f).ss(Color.RED);
ShapeLine b = a.deepClone().v(pB);
ShapeLine c = a.deepClone().v(pA.add(pB));
//绘制
painter.draw(a).cap(a);
painter.draw(b).cap(b);
painter.draw(c).cap(c);
向量.png
为了直观，现在改一下B
Pos pB = v2(400f, 0f);
修改B.png
是不是回忆起力的合成与分解了，现在说是向量，行了吧 加两条虚线，美化一下
ShapeLine AC = (ShapeLine) sl.deepClone().ps(pA, pA.add(pB)).coo(coo).b(4).de(Cons.DOT_LINE_8).ss(Color.BLACK);
ShapeLine BC = AC.deepClone().ps(pB, pA.add(pB));
painter.draw(AC, BC);美化.png
后记、
1.声明：
1本文由张风捷特烈原创,转载请注明
2欢迎广大编程爱好者共同交流
3个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
4你的喜欢与支持将是我最大的动力
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录