画布上绘制

画布上绘制

关注
发信
关注(28)粉丝(399)

如何在android画布上绘制部分圆形矩形?

本文介绍了如何在android画布上绘制部分圆形矩形?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在画布上绘制一个圆角矩形填充颜色(或位图)和描边但没有一些选定的角并且没有某些选定边的边框.我有什么想法可以实现这一目标吗?

解决方案

您可以将绘图过程分为两部分.

  1. 绘制填充区域

    当尝试绘制标准 sdk API 不支持的形状时，Canvas.drawPath 方法将是一个很好的方法.您可以只定义四个变量来表示四个角的半径.

    Path path = new Path();rectdrawingRect = {你要绘制的矩形区域}RectF topLeftArcBound = new RectF();RectF topRightArcBound = new RectF();RectF bottomLeftArcBound = new RectF();RectF bottomRightArcBound = new RectF();topRightArcBound.set(drawingRect.right - topRightRadius * 2,drawingRect.top,drawingRect.right,drawingRect.top + topRightRadius * 2);bottomRightArcBound.set(drawingRect.right - bottomRightRadius * 2，drawingRect.bottom - bottomRightRadius * 2，drawingRect.right，drawingRect.bottom);bottomLeftArcBound.set(drawingRect.left,drawingRect.bottom - bottomLeftRadius * 2,drawingRect.left + bottomLeftRadius * 2,drawingRect.bottom);topLeftArcBound.set(drawingRect.left,drawingRect.top,drawingRect.left + topLeftRadius * 2,drawingRect.top + topLeftRadius * 2);路径重置()；path.moveTo(drawingRect.left + topLeftRadius,drawingRect.top);//绘制顶部水平线path.lineTo(drawingRect.right - topRightRadius,drawingRect.top);//绘制右上角path.arcTo(topRightArcBound, -90, 90);//画右垂直线path.lineTo(drawingRect.right,drawingRect.bottom - bottomRightRadius);//绘制右下角path.arcTo(bottomRightArcBound, 0, 90);//绘制底部水平线path.lineTo(drawingRect.left - bottomLeftRadius,drawingRect.bottom);//绘制左下角path.arcTo(bottomLeftArcBound, 90, 90);//画左垂直线path.lineTo(drawingRect.left,drawingRect.top + topLeftRadius);//绘制左上角path.arcTo(topLeftArcBound, 180, 90);path.close();Paint.setStyle(Paint.Style.FILL);canvas.drawPath(路径，油漆)；

    并且您可以将选定角的半径设置为零

  2. 画边框

    边框包含八个部分:

    • 左上角
    • 顶线
    • 右上角
    • 右侧线
    • 右下角
    • 底线
    • 左下角
    • 左线

    使用 int 值来包含选定的部分将是一个好主意

    私有静态最终 int TOP_LEFT_CORNER = 0x1;私有静态最终 int TOP_LINE = 0x2;私有静态最终 int TOP_RIGHT_CORNER = 0x4;私有静态最终 int RIGHT_LINE = 0x8;私有静态最终 int BOTTOM_RIGHT_CORNER = 0x10;私有静态最终 int BOTTOM_LINE = 0x20;私有静态最终 int BOTTOM_LEFT_CORNER = 0x40;私有静态最终 int LEFT_LINE = 0x80;private int selectedParts = TOP_LEFT_CORNER |TOP_LINE |TOP_RIGHT_CORNER;

    现在我们可以根据 selectedParts 绘制边框:

    Paint.setStyle(Paint.Style.STROKE);if((selectedParts & TOP_LINE) > 0){canvas.drawLine(drawingRect.left + topLeftRadius，drawingRect.top，drawingRect.right - topRightRadius，drawingRect.top)；}if((selectedParts & TOP_RIGHT_CORNER) > 0){canvas.drawArc(topRightArcBound, -90, 90, false,paint);}if((selectedParts & RIGHT_LINE) > 0){canvas.drawLine(drawingRect.right，drawingRect.top + topRightRadius，drawingRect.right，drawingRect.bottom - bottomRightRadius，paint)；}if((selectedParts & BOTTOM_RIGHT_CORNER) > 0){canvas.drawArc(bottomRightArcBound, 0, 90, false,paint);}if((selectedParts & BOTTOM_LINE) > 0){canvas.drawLine(drawingRect.right - bottomRightRadius，drawingRect.bottom.drawingRect.left + bottomLeftRadius，drawingRect.bottom，paint)；}if((selectedParts & BOTTOM_LEFT_CORNER) > 0){canvas.drawArc(bottomLeftArcBound, 90, 90, false,paint);}if((selectedParts & LEFT_LINE) > 0){canvas.drawLine(drawingRect.left，drawingRect.bottom - bottomLeftRadius，drawingRect.left，drawingRect.top + topLeftRadius，paint)；}if((selectedParts & TOP_LEFT_CORNER) > 0){canvas.drawArc(topLeftArcBound, 180, 90, false,paint);}

I want to draw on a canvas a round rectangle fill with color (or bitmap) and with a stroke but without some selected corners and also without the border on some selected sides. any ideas how i can achieve this ?

解决方案

you can split the drawing process into two parts.

  1. draw the fill area

    when trying to draw a shape that is not support by the standard sdk APIs, Canvas.drawPath method will be a good way to do it.you can just define four variables to represent radiuses of four corners.

    Path path = new Path();
Rect drawingRect = {the rect area you want to draw}
RectF topLeftArcBound = new RectF();
RectF topRightArcBound = new RectF();
RectF bottomLeftArcBound = new RectF();
RectF bottomRightArcBound = new RectF();

topRightArcBound.set(drawingRect.right - topRightRadius * 2, drawingRect.top, drawingRect.right, drawingRect.top + topRightRadius * 2);
bottomRightArcBound.set(drawingRect.right - bottomRightRadius * 2, drawingRect.bottom - bottomRightRadius * 2, drawingRect.right, drawingRect.bottom);
bottomLeftArcBound.set(drawingRect.left, drawingRect.bottom - bottomLeftRadius * 2, drawingRect.left + bottomLeftRadius * 2, drawingRect.bottom);
topLeftArcBound.set(drawingRect.left, drawingRect.top, drawingRect.left + topLeftRadius * 2, drawingRect.top + topLeftRadius * 2);

path.reset();

path.moveTo(drawingRect.left + topLeftRadius, drawingRect.top);

//draw top horizontal line
path.lineTo(drawingRect.right - topRightRadius, drawingRect.top);

//draw top-right corner
path.arcTo(topRightArcBound, -90, 90);

//draw right vertical line
path.lineTo(drawingRect.right, drawingRect.bottom - bottomRightRadius);

//draw bottom-right corner
path.arcTo(bottomRightArcBound, 0, 90);

//draw bottom horizontal line
path.lineTo(drawingRect.left - bottomLeftRadius, drawingRect.bottom);

//draw bottom-left corner
path.arcTo(bottomLeftArcBound, 90, 90);

//draw left vertical line
path.lineTo(drawingRect.left, drawingRect.top + topLeftRadius);

//draw top-left corner
path.arcTo(topLeftArcBound, 180, 90);

path.close();

paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);

    and you can just set radius to zero for selected corners

  2. draw border

    border contains eight parts:

    • top-left corner
    • top line
    • top-right corner
    • right line
    • bottom-right corner
    • bottom line
    • bottom-left corner
    • left line

    use a int value to contains selected parts will be a good idea

    private static final int TOP_LEFT_CORNER = 0x1;
private static final int TOP_LINE = 0x2;
private static final int TOP_RIGHT_CORNER = 0x4;
private static final int RIGHT_LINE = 0x8;
private static final int BOTTOM_RIGHT_CORNER = 0x10;
private static final int BOTTOM_LINE = 0x20;
private static final int BOTTOM_LEFT_CORNER = 0x40;
private static final int LEFT_LINE = 0x80;

private int selectedParts = TOP_LEFT_CORNER | TOP_LINE | TOP_RIGHT_CORNER;

    and now we can draw border based on selectedParts:

    paint.setStyle(Paint.Style.STROKE);
if((selectedParts & TOP_LINE) > 0){
    canvas.drawLine(drawingRect.left + topLeftRadius, drawingRect.top, drawingRect.right - topRightRadius, drawingRect.top);
}

if((selectedParts & TOP_RIGHT_CORNER) > 0){
    canvas.drawArc(topRightArcBound, -90, 90, false, paint);
}

if((selectedParts & RIGHT_LINE) > 0){
    canvas.drawLine(drawingRect.right, drawingRect.top + topRightRadius, drawingRect.right, drawingRect.bottom - bottomRightRadius, paint);
}

if((selectedParts & BOTTOM_RIGHT_CORNER) > 0){
    canvas.drawArc(bottomRightArcBound, 0, 90, false, paint);
}

if((selectedParts & BOTTOM_LINE) > 0){
    canvas.drawLine(drawingRect.right - bottomRightRadius, drawingRect.bottom. drawingRect.left + bottomLeftRadius, drawingRect.bottom, paint);
}

if((selectedParts & BOTTOM_LEFT_CORNER) > 0){
    canvas.drawArc(bottomLeftArcBound, 90, 90, false, paint);
}

if((selectedParts & LEFT_LINE) > 0){
    canvas.drawLine(drawingRect.left, drawingRect.bottom - bottomLeftRadius, drawingRect.left, drawingRect.top + topLeftRadius, paint);
}

if((selectedParts & TOP_LEFT_CORNER) > 0){
    canvas.drawArc(topLeftArcBound, 180, 90, false, paint);
}

这篇关于如何在android画布上绘制部分圆形矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-31 15:33
Powered by LMLPHP ©2024 画布上绘制 0.040657