如何把TextView的形象一样的使用Canvas的？ [英] How to put textview like image with the use of Canvas?

问题描述

我已经实现了参照上面观这一ANS <一个href=\"http://stackoverflow.com/questions/32248421/how-to-make-a-view-like-this-actually-i-tried-with-drawble-views-but-cant-get/32305075#3230\">How做出这样的看法？其实我试着用drawble意见，但不能让它 5075

我试过

 公共类CanvasView扩展视图{   涂料bPaint;
RectF coordbounds;
私人语境mContext;公共Can​​vasView（上下文的背景下）{
    超级（上下文）;
    this.mContext =背景;
}私人无效的init（）{
    bPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）;
    bPaint.setStyle（Paint.Style.FILL_AND_STROKE）;
    bPaint.setColor（Color.WHITE）;
}@覆盖
公共无效的onDraw（android.graphics.Canvas帆布）{
    super.onDraw（画布）;    canvas.drawLine（coordbounds.left，coordbounds.centerY（），
            coordbounds.right，coordbounds.centerY（），bPaint）;    位图位图= BitmapFactory.de codeResource（getResources（），R.drawable.ic_approved）;    INT rectwidth = bitmap.getWidth（）;
    INT rectheight = bitmap.getHeight（）;
    //划分行成四个部分，并减去2 *一半的半径
    浮actualspan_image =（coordbounds.right  -  coordbounds.left） - （2 * rectwidth / 2）;    //段行成3部分
    浮interlinesegments_bitmap = actualspan_image /（5  -  1）;
    INT circledia = 20;    //划分行成四个部分，并减去2 *一半的半径
    浮actualspan =（coordbounds.right  -  coordbounds.left） - （2 * circledia / 2）;
    //段行成3部分
    浮interlinesegments = actualspan /（5  -  1）;    的for（int i = 0;我小于5;我++）{
        左浮动= coordbounds.left +（我* interlinesegments_bitmap）;
        浮顶= coordbounds.centerY（） -  rectheight / 2;
        浮动权= coordbounds.left +（我* interlinesegments_bitmap）+ rectwidth;
        浮底= coordbounds.centerY（）+ rectheight / 2;        如果（ⅰ== 1）{            canvas.drawBitmap（位图，空，新RectF（左，上，右，下），NULL）;            //canvas.drawLine(left，上，右，下，bPaint）;            涂料粉刷=新的油漆（）;            paint.setTextSize（20）;
            paint.setTextAlign（Paint.Align.CENTER）;            TextView的nameTv =新的TextView（mContext）;            nameTv.layout（0,0，（int）的（coordbounds.left + circledia / 2 +
                          （我* interlinesegments）），（INT）coordbounds.centerY（））;            nameTv.setGravity（Gravity.CENTER | Gravity.BOTTOM）;
            nameTv.setTextColor（Color.WHITE）;
            nameTv.setText（咨询）;            nameTv.draw（画布）;        }其他{
            canvas.drawCircle（coordbounds.left + circledia / 2 +
                            （我* interlinesegments）
                    coordbounds.centerY（），10，bPaint）;
        }
    }
}
 

解决方案

要放置文本做在的onDraw如下：

 浮动midline_segment =（5-1）/ 2 * interlinesegments + rectwidth / 2;
canvas.drawText（订单传送XYZ，
coordbounds.left + midline_segment，
coordbounds.centerY（）+ 40，tPaint）;
 

请确保您在画图对象正确设置对齐方式：

  tPaint.setTextAlign（Paint.Align.CENTER）;
 

I already implemented upper view with reference to this ans 5075

I tried

     public class CanvasView extends View {

   Paint bPaint;
RectF coordbounds;
private Context mContext;

public CanvasView(Context context) {
    super(context);
    this.mContext = context;
}

private void init() {
    bPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    bPaint.setColor(Color.WHITE);
}

@Override
public void onDraw(android.graphics.Canvas canvas)

{
    super.onDraw(canvas);

    canvas.drawLine(coordbounds.left, coordbounds.centerY(),
            coordbounds.right, coordbounds.centerY(), bPaint);

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_approved);

    int rectwidth = bitmap.getWidth();
    int rectheight = bitmap.getHeight();


    //Divide the line into four segments and subtract 2 * half the radii
    float actualspan_image = (coordbounds.right - coordbounds.left) - (2 * rectwidth / 2);

    //Segment the line into 3 parts
    float interlinesegments_bitmap = actualspan_image / (5 - 1);


    int circledia = 20;

    //Divide the line into four segments and subtract 2 * half the      radii
    float actualspan = (coordbounds.right - coordbounds.left) - (2 * circledia / 2);
    //Segment the line into 3 parts
    float interlinesegments = actualspan / (5 - 1);

    for (int i = 0; i < 5; i++) {
        float left = coordbounds.left + (i * interlinesegments_bitmap);
        float top = coordbounds.centerY() - rectheight / 2;
        float right = coordbounds.left + (i * interlinesegments_bitmap) + rectwidth;
        float bottom = coordbounds.centerY() + rectheight / 2;

        if (i == 1) {

            canvas.drawBitmap(bitmap, null, new RectF(left, top, right, bottom), null);

            //canvas.drawLine(left, top, right, bottom, bPaint);

            Paint paint = new Paint();

            paint.setTextSize(20);
            paint.setTextAlign(Paint.Align.CENTER);

            TextView nameTv = new TextView(mContext);

            nameTv.layout(0,0, (int)(coordbounds.left + circledia / 2 +
                          (i * interlinesegments)), (int)  coordbounds.centerY());



            nameTv.setGravity(Gravity.CENTER | Gravity.BOTTOM);
            nameTv.setTextColor(Color.WHITE);
            nameTv.setText("Consultation");

            nameTv.draw(canvas);

        } else {
            canvas.drawCircle(coordbounds.left + circledia / 2 +
                            (i * interlinesegments),
                    coordbounds.centerY(), 10, bPaint);


        }


    }
}

解决方案

To place the text do as follows in onDraw:

float midline_segment = (5-1)/2 * interlinesegments + rectwidth/2;
canvas.drawText("Order transmitted XYZ", 
coordbounds.left +  midline_segment, 
coordbounds.centerY()+40,tPaint);

Make sure that you set the alignment correctly in the Paint object:

tPaint.setTextAlign(Paint.Align.CENTER);

这篇关于如何把TextView的形象一样的使用Canvas的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！