Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing a squircle shape on canvas (Android)

Here is what I'm using to draw a circle shape on to the canvas (and then an icon bitmap on it):

private static Bitmap makeIcon(int radius, int color, Bitmap icon) {
    final Bitmap output = Bitmap.createBitmap(radius, radius, Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(color);
    canvas.drawARGB(0, 0, 0, 0);
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT)
        canvas.drawCircle(radius / 2, radius / 2, radius / 2, paint);
    else
        canvas.drawRect(0, 0, radius, radius, paint);
    int cx = (radius - icon.getWidth()) >> 1; // same as (...) / 2
    int cy = (radius - icon.getHeight()) >> 1;
    canvas.drawBitmap(icon, cx, cy, paint);
    icon.recycle();
    return output;
}

But I have no idea on how to draw a squircle shape instead of the circle shape. FYI, here are some examples of icons using the squircle shape:

enter image description here

like image 905
fahmy Avatar asked May 07 '18 02:05

fahmy


People also ask

How do you make a bitmap on Canvas?

Use the Canvas method public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint) . Set dst to the size of the rectangle you want the entire image to be scaled into. EDIT: Here's a possible implementation for drawing the bitmaps in squares across on the canvas.

Can we draw directly on Canvas in android studio?

The parameter to onDraw() is a Canvas object that the view can use to draw itself. The Canvas class defines methods for drawing text, lines, bitmaps, and many other graphics primitives. You can use these methods in onDraw() to create your custom user interface (UI).

What is Android Canvas?

The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).


1 Answers

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path squirclePath = getSquirclePaath(150, 250, 400);
        canvas.drawPath(squirclePath, mPaint);
    }

    private static Path getSquirclePaath(int left, int top, int radius){
        //Formula: (|x|)^3 + (|y|)^3 = radius^3
        final double radiusToPow = radius * radius * radius;

        Path path = new Path();
        path.moveTo(-radius, 0);
        for (int x = -radius ; x <= radius ; x++)
            path.lineTo(x, ((float) Math.cbrt(radiusToPow - Math.abs(x * x * x))));
        for (int x = radius ; x >= -radius ; x--)
            path.lineTo(x, ((float) -Math.cbrt(radiusToPow - Math.abs(x * x * x))));
        path.close();

        Matrix matrix = new Matrix();
        matrix.postTranslate(left + radius, top + radius);
        path.transform(matrix);

        return path;
    }

Here is a preview:

enter image description here

like image 114
Raed Mughaus Avatar answered Oct 14 '22 02:10

Raed Mughaus