零、前言
画箭头?逗我吧,箭头有什么好画的,其中还是有东西讲的,算是LogicCanvas向量绘制的引入吧
数学老师:“安逸的你们,是否已经忘记了曾经被向量支配的恐惧?”(开玩笑的)
案例代码在自定义控件时的Ondraw里
绘图部分基于我的LogicCanvas绘图库:基础使用在此,
喜欢的话可以到github上看看,顺便给个star
效果图


画线
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);

你也许会说:老子瓜子都准备好了,就给我看这个?分明就是条线,扯什么向量,吓老子一跳。用安卓元素的canvas也能666的画出来------别急别急
3.画一个给信息的向量:比如--一条与X轴夹角60°,长300px向量
Shape a = new ShapeLine().ang(60f).c(300f).coo(coo).b(5f).ss(Color.GRAY);
painter.draw(a);

你也许会说:恩?有点意思,明明是直线,你偏说是向量干嘛----
二、画箭头:
基于上面两点画个箭头应该不在话下吧,封个方法出来,专门给向量加箭头
/**
* 给向量加个箭头...纯属好看
*
* @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);

你也许会说:好吧,你说向量就向量吧,箭头画完了,老子走了-----等一下,好戏还没开演呢。
三、向量的简单操作
之所以说是向量,不是因为它的名字叫向量,而是模仿了很多向量向量相关的操作
准备工作:
为了避免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);

1.重定义长度:resize()
pA.resize(300);

2.取反向量:ref()
pA = pA.ref();

3.X取反向量:refX()
pA = pA.refX();

4.Y取反向量:refY()
pA = pA.refY();

5.置为0向量:release()
pA.release();

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);

为了直观,现在改一下B
Pos pB = v2(400f, 0f);

是不是回忆起力的合成与分解了,现在说是向量,行了吧
加两条虚线,美化一下
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);

后记、
1.声明:
[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
[4]你的喜欢与支持将是我最大的动力
2.连接传送门:
更多安卓技术欢迎访问:安卓技术栈
我的github地址:欢迎star
简书首发,腾讯云+社区同步更新
张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com
3.联系我
QQ:1981462002
邮箱:1981462002@qq.com
微信:zdl1994328
4.欢迎关注我的微信公众号,最新精彩文章,及时送达:

网友评论