幸运快三 > 数码 > android

android canvas画箭头&android用canvas画出线段和箭头

android用canvas画出线段和箭头,在界面中画出一条线段以及线段的箭头。做完后发现网上的箭头种类各样,也有用圆形画出箭头的方法,这里画出一条箭头的底与线段垂直,箭头大小可修改的方案。

在界面中画出一条线段以及线段的箭头。

做完后发现网上的箭头种类各样,也有用圆形画出箭头的方法,这里画出一条箭头的底与线段垂直,箭头大小可修改的方案。

android用canvas画出线段和箭头步骤阅读

工具/原料

  • 安卓开发工具Ecilpse

方法/步骤

  1. 1

    设置布局文件,添加2个控件,一个Button,一个ImageView

    android用canvas画出线段和箭头步骤阅读
    android用canvas画出线段和箭头步骤阅读
  2. 2

    在MainAcitvity添加两个控件的全局变量,以及画图工具的全局变量

    private Button btn_drawline;

    private ImageView iv_canvas;

    private Bitmap baseBitmap;

    private Canvas canvas;

    private Paint paint;

    android用canvas画出线段和箭头步骤阅读
  3. 3

    在oncreate()方法中初始化 Button控件和ImageView控件,并给Button添加按键监听

    按键监听中调用画图方法:

    // 初始化一个画笔,笔触宽度为5,颜色为红色

    paint = new Paint();

    paint.setStrokeWidth(1);

    paint.setColor(Color.RED);

    iv_canvas = (ImageView) findViewById(R.id.iv_canvas);

    btn_drawline.setOnClickListener(click);

    btn_drawline.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    drawTria((float) 300, (float) 100, (float) 100, (float) 400,

    50, 10);

    }

    });

    android用canvas画出线段和箭头步骤阅读
  4. 4

    画线段和箭头的方法,处理箭头指向任何方向都能显示出来

    protected void drawTria(float fromX, float fromY, float toX, float toY,

    int heigth, int bottom) {

    // heigth和bottom分别为三角形的高与底的一半,调节三角形大小

    baseBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),

    iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);

    canvas = new Canvas(baseBitmap);

    canvas.drawColor(Color.YELLOW);// 设置底色

    canvas.drawLine(fromX, fromY, toX, toY, paint);

    float juli = (float) Math.sqrt((toX - fromX) * (toX - fromX)

    + (toY - fromY) * (toY - fromY));// 获取线段距离

    float juliX = toX - fromX;// 有正负,不要取绝对值

    float juliY = toY - fromY;// 有正负,不要取绝对值

    float dianX = toX - (heigth / juli * juliX);

    float dianY = toY - (heigth / juli * juliY);

    float dian2X = fromX + (heigth / juli * juliX);

    float dian2Y = fromY + (heigth / juli * juliY);

    //终点的箭头

    Path path = new Path();

    path.moveTo(toX, toY);// 此点为三边形的起点

    path.lineTo(dianX + (bottom / juli * juliY), dianY

    - (bottom / juli * juliX));

    path.lineTo(dianX - (bottom / juli * juliY), dianY

    + (bottom / juli * juliX));

    path.close(); // 使这些点构成封闭的三边形

    canvas.drawPath(path, paint);

    //显示图像

    iv_canvas.setImageBitmap(baseBitmap);

    }

    android用canvas画出线段和箭头步骤阅读
  5. 5

    画出的箭头便随着线段的斜率而画出来了。

    线段的四个方向,以及线段平行X轴,平行Y轴的情况都能正常显示。

    android用canvas画出线段和箭头步骤阅读
    android用canvas画出线段和箭头步骤阅读
    android用canvas画出线段和箭头步骤阅读
    android用canvas画出线段和箭头步骤阅读
    android用canvas画出线段和箭头步骤阅读
  6. 6

    如果要画双向箭头,只需要再添加一个箭头即可,调用以下方法:

    protected void drawTria(float fromX, float fromY, float toX, float toY,

    int heigth, int bottom) {

    // heigth和bottom分别为三角形的高与底的一半,调节三角形大小

    baseBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),

    iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);

    canvas = new Canvas(baseBitmap);

    canvas.drawColor(Color.YELLOW);// 设置底色

    canvas.drawLine(fromX, fromY, toX, toY, paint);

    float juli = (float) Math.sqrt((toX - fromX) * (toX - fromX)

    + (toY - fromY) * (toY - fromY));// 获取线段距离

    float juliX = toX - fromX;// 有正负,不要取绝对值

    float juliY = toY - fromY;// 有正负,不要取绝对值

    float dianX = toX - (heigth / juli * juliX);

    float dianY = toY - (heigth / juli * juliY);

    float dian2X = fromX + (heigth / juli * juliX);

    float dian2Y = fromY + (heigth / juli * juliY);

    //终点的箭头

    Path path = new Path();

    path.moveTo(toX, toY);// 此点为三边形的起点

    path.lineTo(dianX + (bottom / juli * juliY), dianY

    - (bottom / juli * juliX));

    path.lineTo(dianX - (bottom / juli * juliY), dianY

    + (bottom / juli * juliX));

    path.close(); // 使这些点构成封闭的三边形

    canvas.drawPath(path, paint);

    //起点的箭头

    Path path2 = new Path();

    path2.moveTo(fromX, fromY);// 此点为边形的起点

    path2.lineTo(dian2X + (bottom / juli * juliY), dian2Y

    - (bottom / juli * juliX));

    path2.lineTo(dian2X - (bottom / juli * juliY), dian2Y

    + (bottom / juli * juliX));

    path2.close(); // 使这些点构成封闭的三边形

    canvas.drawPath(path2, paint);

    //显示图像

    iv_canvas.setImageBitmap(baseBitmap);

    }

    android用canvas画出线段和箭头步骤阅读
    END

注意事项

  • 以上几处部分之间添加即可,其他无需改动,亲测可用

本文来自投稿,不代表幸运快三立场,转载请注明出处:http://www.morucat.com/digital/10923.html