前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >D4-Android绘图之和我一起画箭头

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

作者头像
张风捷特烈
发布2018-09-29 11:21:37
1.1K0
发布2018-09-29 11:21:37
举报
文章被收录于专栏:Android知识点总结
零、前言

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

效果图

效果图.png

效果图


画线
1.前期准备:为了方便查看先绘制网格和坐标系
代码语言:javascript
复制
Pos coo = v2(500, 800);//定义坐标系位置

//绘制网格
CanvasUtils.drawGrid(getContext(), 50, canvas);
//绘制坐标系
CanvasUtils.drawCoord(getContext(), coo, 50, canvas);
2.画一个给定点的向量:以原点为起点
代码语言:javascript
复制
//基于坐标绘制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向量
代码语言:javascript
复制
Shape a = new ShapeLine().ang(60f).c(300f).coo(coo).b(5f).ss(Color.GRAY);
painter.draw(a);

画一个给信息的向量.png

你也许会说:恩?有点意思,明明是直线,你偏说是向量干嘛----


二、画箭头:

基于上面两点画个箭头应该不在话下吧,封个方法出来,专门给向量加箭头

代码语言:javascript
复制
    /**
     * 给向量加个箭头...纯属好看
     *
     * @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);//绘制箭头
    }

使用:

代码语言:javascript
复制
cap(a);

箭头.png

你也许会说:好吧,你说向量就向量吧,箭头画完了,老子走了-----等一下,好戏还没开演呢。

三、向量的简单操作

之所以说是向量,不是因为它的名字叫向量,而是模仿了很多向量向量相关的操作

准备工作:

为了避免new很多点,采用原型模式(已在Pos里添加clone函数),下面是由一个点克隆点的方法。 直线采用深克隆,避免new

代码语言:javascript
复制
    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);
    }

使用:

代码语言:javascript
复制
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()
代码语言:javascript
复制
pA.resize(300);

重定义长度.png


2.取反向量:ref()
代码语言:javascript
复制
pA = pA.ref();

取反.png


3.X取反向量:refX()
代码语言:javascript
复制
pA = pA.refX();

X取反向量.png


4.Y取反向量:refY()
代码语言:javascript
复制
pA = pA.refY();

Y取反向量.png


5.置为0向量:release()
代码语言:javascript
复制
pA.release();

置为0向量.png

6.向量加法演示:
代码语言:javascript
复制
//向量
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

代码语言:javascript
复制
 Pos pB = v2(400f, 0f);

修改B.png

是不是回忆起力的合成与分解了,现在说是向量,行了吧 加两条虚线,美化一下

代码语言:javascript
复制
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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 零、前言
    • 效果图
    • 画线
      • 1.前期准备:为了方便查看先绘制网格和坐标系
        • 2.画一个给定点的向量:以原点为起点
          • 3.画一个给信息的向量:比如--一条与X轴夹角60°,长300px向量
          • 二、画箭头:
          • 三、向量的简单操作
            • 准备工作:
              • 1.重定义长度:resize()
                • 2.取反向量:ref()
                  • 3.X取反向量:refX()
                    • 4.Y取反向量:refY()
                      • 5.置为0向量:release()
                        • 6.向量加法演示:
                        • 后记、
                          • 1.声明:
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档