Geek asks and answers

Drawable not drawn on canvas

I have a custom view and a drawing that can be drawn on it, but for some reason drawable does not draw on the canvas of the view. This is how drawable is created:

int[] gradientColors=new int[] { 0xFFFF0000,0xFFFFFF00,0xFF00FF00,
        0xFF00FFFF,0xFF0000FF,0xFFFF00FF,0xFFFF0000 };
gradient=new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
        gradientColors);

And here is the onDraw function:

@Override protected void onDraw(Canvas canvas)
{
    super.onDraw(canvas);
    int width=canvas.getWidth();
    int height=canvas.getHeight();
    gradientBitmap=Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
    canvas.setBitmap(gradientBitmap);
    gradient.setBounds(0,0,width,height);
    gradient.draw(canvas);
}

Thanks for any help.

+5
source share
1 answer

Try looking at this code, and it will be useful for you to learn how to process drawings for custom views:

public class MainActivity extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(new SampleView(this));
        }

           private static class SampleView extends View {
                private Rect    mRect;
                private GradientDrawable mDrawable;

                public SampleView(Context context) {
                    super(context);
                    setFocusable(true);

                    mRect = new Rect(0, 0, 220, 120);

    /*              GradientDrawable.Orientation  BL_TR  draw the gradient from the bottom-left to the top-right   
                      BOTTOM_TOP  draw the gradient from the bottom to the top   
                      BR_TL  draw the gradient from the bottom-right to the top-left   
                      LEFT_RIGHT  draw the gradient from the left to the right   
                      RIGHT_LEFT  draw the gradient from the right to the left   
                      TL_BR  draw the gradient from the top-left to the bottom-right   
                      TOP_BOTTOM  draw the gradient from the top to the bottom   
                      TR_BL  draw the gradient from the top-right to the bottom-left   
    */

                    mDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
                                                     new int[] { 0xFFFF0000, 0xFF00FF00,
                                                         0xFF0000FF });
                    mDrawable.setShape(GradientDrawable.RECTANGLE);
                    mDrawable.setGradientRadius((float)(Math.sqrt(2) * 60));
                }

                static void setCornerRadius(GradientDrawable drawable, float r0,
                                           float r1, float r2, float r3) {
    /*              setCornerRadii
                    Specify radii for each of the 4 corners. For each corner, 
                    the array contains 2 values, [X_radius, Y_radius]. 
                    The corners are ordered top-left, top-right, bottom-right, 
                    bottom-left 
    */
                    drawable.setCornerRadii(new float[] { r0, r0, r1, r1,
                                                          r2, r2, r3, r3 });
                }

                @Override protected void onDraw(Canvas canvas) {

                    mDrawable.setBounds(mRect);

                    float r = 35;

                    canvas.save();
                    canvas.translate(10, 10);
                    mDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
                    setCornerRadius(mDrawable, r, r, 0, 0);
                    mDrawable.draw(canvas);
                    canvas.restore();

                    canvas.translate(0, mRect.height() + 10);
                    canvas.save();
                    canvas.translate(10, 10);
                    mDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);
                    setCornerRadius(mDrawable, 0, 0, r, r);
                    mDrawable.draw(canvas);
                    canvas.restore();

                    canvas.translate(0, mRect.height() + 10);
                    canvas.save();
                    canvas.translate(10, 10);
                    mDrawable.setGradientType(GradientDrawable.SWEEP_GRADIENT);
                    setCornerRadius(mDrawable, 0, r, r, 0);
                    mDrawable.draw(canvas);
                    canvas.restore();


                }
            }
        }

UPDATE

public class MyView extends View {
    private static int measuredWidth = 300;
    private static int measuredHeight = 300;
    private Rect    mRect;
    private GradientDrawable mDrawable;

    public MyView(Context context) {
        super(context);
        initializeView();


    }

    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initializeView();
    }

    private void initializeView() {

        mDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
                new int[] { 0xFFFF0000,0xFFFFFF00,0xFF00FF00,
                0xFF00FFFF,0xFF0000FF,0xFFFF00FF,0xFFFF0000 });
        mDrawable.setShape(GradientDrawable.RECTANGLE);
        mDrawable.setGradientRadius((float)(Math.sqrt(2) * 60));
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initializeView();
    }

    @Override protected void onDraw(Canvas canvas) {
        mRect = new Rect(0, 0, measuredWidth, measuredHeight);
        mDrawable.setBounds(mRect);
        canvas.save();
        canvas.translate(10, 10);
        mDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
        //setCornerRadius(mDrawable, r, r, 0, 0);
        mDrawable.draw(canvas);
        canvas.restore();

    }

I tried this for you based on your code and it works, except that I set the height and width:

+2
source

More articles:


All Articles