D4-Android绘图之和我一起画箭头

零、前言

画箭头?逗我吧，箭头有什么好画的，其中还是有东西讲的，算是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]你的喜欢与支持将是我最大的动力

2.连接传送门：

更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
简书首发，腾讯云+社区同步更新
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：

公众号.jpg