Draw Cloud shape using cubicTo in android canvas

Question

I need to draw a cloud like below.

I tried to use this code without success:

 private Path cloudPath(float xRatio, float yRatio) {
        xRatio = (float) (xRatio / 500.0);
        yRatio = (float) (yRatio / 505.0);
        Path cloudPath = new Path();
        cloudPath.moveTo(321.639f * xRatio, 198.999f * yRatio);
        cloudPath.cubicTo(358.117f * xRatio, 134.634f * yRatio, 343.492f * xRatio, 185.892f * yRatio, 358.117f * xRatio, 161.971f * yRatio);
        cloudPath.cubicTo(283.117f * xRatio, 59.634f * yRatio, 358.117f * xRatio, 93.213f * yRatio, 324.539f * xRatio, 59.634f * yRatio);
        cloudPath.cubicTo(278.695f * xRatio, 59.762f * yRatio, 281.633f * xRatio, 59.634f * yRatio, 280.158f * xRatio, 59.677f * yRatio);
        cloudPath.cubicTo(199.746f * xRatio, 0f * yRatio, 269.002f * xRatio, 25.28f * yRatio, 237.327f * xRatio, 0f * yRatio);
        cloudPath.cubicTo(133.073f * xRatio, 34.254f * yRatio, 172.272f * xRatio, 0f * yRatio, 147.953f * xRatio, 13.512f * yRatio);
        cloudPath.lineTo(133.073f * xRatio, 34.254f * yRatio);
        cloudPath.cubicTo(98.117f * xRatio, 25.626f * yRatio, 122.635f * xRatio, 28.745f * yRatio, 110.741f * xRatio, 25.626f * yRatio);
        cloudPath.cubicTo(23.117f * xRatio, 100.626f * yRatio, 56.696f * xRatio, 25.626f * yRatio, 23.117f * xRatio, 59.205f * yRatio);
        cloudPath.cubicTo(30.651f * xRatio, 133.426f * yRatio, 23.117f * xRatio, 112.389f * yRatio, 25.825f * xRatio, 123.518f * yRatio);
        cloudPath.lineTo(30.651f * xRatio, 133.426f * yRatio);
        cloudPath.cubicTo(0f * xRatio, 193.916f * yRatio, 12.065f * xRatio, 147.077f * yRatio, 0f * xRatio, 169.087f * yRatio);
        cloudPath.cubicTo(75f * xRatio, 268.915f * yRatio, 0f * xRatio, 235.337f * yRatio, 33.579f * xRatio, 268.915f * yRatio);
        cloudPath.cubicTo(83.329f * xRatio, 268.458f * yRatio, 77.815f * xRatio, 268.915f * yRatio, 80.595f * xRatio, 268.76f * yRatio);
        cloudPath.lineTo(83.329f * xRatio, 268.458f * yRatio);
        cloudPath.cubicTo(151.5f * xRatio, 304.205f * yRatio, 98.323f * xRatio, 290.064f * yRatio, 123.265f * xRatio, 304.205f * yRatio);
        cloudPath.cubicTo(201.273f * xRatio, 287.582f * yRatio, 170.173f * xRatio, 304.205f * yRatio, 187.405f * xRatio, 298.02f * yRatio);
        cloudPath.cubicTo(249.239f * xRatio, 304.205f * yRatio, 214.467f * xRatio, 297.992f * yRatio, 231.127f * xRatio, 304.205f * yRatio);
        cloudPath.cubicTo(326.739f * xRatio, 226.705f * yRatio, 292.041f * xRatio, 304.205f * yRatio, 326.739f * xRatio, 269.507f * yRatio);
        cloudPath.cubicTo(321.639f * xRatio, 198.999f * yRatio, 326.739f * xRatio, 216.943f * yRatio, 324.934f * xRatio, 207.602f * yRatio);
        cloudPath.close();
        cloudPath.moveTo(321.639f * xRatio, 198.999f * yRatio);
        return cloudPath;
    }

ondraw method:

  canvas.drawPath(path, paint);

I need to draw this shape using Path, we can't use bitmap instead of Path. Because I need to remove that multiple shape from stack, I need to develop this shape in Path Object.

I have also used below code, but drawing start from top position like from 0,0. I have drawn this shape in onActionMove Method ontouch in canvas.

 public Path draw(int x, int y, int w, int h, int color) {
        Path t = new Path();
        Matrix m = new Matrix();
        Paint p = new Paint();
        p.setColor(color);
        p.setAntiAlias(true);
        // original size of path
        float ow = 200f;
        float oh = 200f;
        float od = (w / ow < h / oh) ? w / ow : h / oh;
        m.reset();
        m.setScale(od, od, w / ow, h / oh);
        t.reset();
        t.moveTo(x, y);
        t.moveTo(230.4f, 389.57f);
        t.cubicTo(194.87f, 389.57f, 160.53f, 375.34f, 135.23f, 350.32f);
        t.cubicTo(126.79f, 353.95f, 117.63f, 355.87f, 108.39f, 355.87f);
        t.cubicTo(71.04f, 355.87f, 40.66f, 325.48f, 40.66f, 288.12f);
        t.cubicTo(40.66f, 284.13f, 41.04f, 280.08f, 41.79f, 276.03f);
        t.cubicTo(15.52f, 256.6f, 0.0f, 226.05f, 0.0f, 193.21f);
        t.cubicTo(0.0f, 141.56f, 38.98f, 97.72f, 89.71f, 91.12f);
        t.cubicTo(102.41f, 57.89f, 134.06f, 35.92f, 170.07f, 35.92f);
        t.cubicTo(201.51f, 35.92f, 230.25f, 53.09f, 245.33f, 80.28f);
        t.cubicTo(256.19f, 76.53f, 267.51f, 74.62f, 279.11f, 74.62f);
        t.cubicTo(336.25f, 74.62f, 382.74f, 121.1f, 382.74f, 178.24f);
        t.cubicTo(382.74f, 180.64f, 382.63f, 183.08f, 382.42f, 185.66f);
        t.cubicTo(408.09f, 195.71f, 425.49f, 220.71f, 425.49f, 248.69f);
        t.cubicTo(425.49f, 288.36f, 390.96f, 320.14f, 350.76f, 316.07f);
        t.cubicTo(327.63f, 360.91f, 281.04f, 389.57f, 230.4f, 389.57f);
        t.transform(m);
        return t;
    }


 private void onActionMove(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        Path path = this.getCurrentPath();
                        path.reset();
                        path.addPath(draw((int) startX, (int) startY, (int) x, (int) y, 0xffff8000));

    }



@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
   canvas.drawPath(path, paint);
}

"Because i need to remove that multiple shape from stack," Can you explain this point a bit more? Before suggesting any solution, understanding this use case might help. — Mohammed Atif, Mar 29 '19 at 06:12
My needs to draw multiple shae like rectangle, line ,cloud, and add one more option to undo each shape.so for undo, i am drawing each shape in path and and add this path to arraylist and when i remove then remove that path from arraylist and then i fulfill my needs of Undo. that;'s why i am using path. — dipali, Mar 29 '19 at 06:16
@ManojPerumarath i want to change cloud color as per user selection. — dipali, Mar 29 '19 at 06:54
If you want change color run-time, have a look [at this.](https://stackoverflow.com/q/35625099/2289835) — Rumit Patel, Mar 29 '19 at 09:07
Hi..We encourage you to get involved in the community, but please don’t thank in the question. It eventually degrades the quality of the site. See http://meta.stackoverflow.com/questions/288160/no-thanks-damn-it — Pavindu, Sep 18 '19 at 18:42

score 1 · Answer 1 · answered Mar 30 '19 at 09:46

As I understand you want to draw a path in different positions with different size and color. It's better to use matrix inside of doing the calculation by yourself. There is a simple code that I wrote for you to show the concept :

public static void draw(Canvas c, int x, int y, int w, int h,int color){
    Paint  p  = new Paint();
    p.setColor(color);
    p.setAntiAlias(true);

    // original size of path
    float ow = 200f;
    float oh = 200f;

    od = (w / ow < h / oh) ? w / ow : h / oh;

    r();
    c.save();
    c.translate((w - od * ow) / 2f + x, (h - od * oh) / 2f + y);

    m.reset();
    m.setScale(od, od);

    c.save();
    c.scale(2.5f,2.5f);
    c.save();
    t.reset();


    t.moveTo(230.4f,389.57f);
    t.cubicTo(194.87f,389.57f,160.53f,375.34f,135.23f,350.32f);
    t.cubicTo(126.79f,353.95f,117.63f,355.87f,108.39f,355.87f);
    t.cubicTo(71.04f,355.87f,40.66f,325.48f,40.66f,288.12f);
    t.cubicTo(40.66f,284.13f,41.04f,280.08f,41.79f,276.03f);
    t.cubicTo(15.52f,256.6f,0.0f,226.05f,0.0f,193.21f);
    t.cubicTo(0.0f,141.56f,38.98f,97.72f,89.71f,91.12f);
    t.cubicTo(102.41f,57.89f,134.06f,35.92f,170.07f,35.92f);
    t.cubicTo(201.51f,35.92f,230.25f,53.09f,245.33f,80.28f);
    t.cubicTo(256.19f,76.53f,267.51f,74.62f,279.11f,74.62f);
    t.cubicTo(336.25f,74.62f,382.74f,121.1f,382.74f,178.24f);
    t.cubicTo(382.74f,180.64f,382.63f,183.08f,382.42f,185.66f);
    t.cubicTo(408.09f,195.71f,425.49f,220.71f,425.49f,248.69f);
    t.cubicTo(425.49f,288.36f,390.96f,320.14f,350.76f,316.07f);
    t.cubicTo(327.63f,360.91f,281.04f,389.57f,230.4f,389.57f);
    t.moveTo(138.64f,330.26f);
    t.lineTo(142.95f,334.92f);
    t.cubicTo(165.84f,359.68f,196.9f,373.32f,230.4f,373.32f);
    t.cubicTo(276.76f,373.32f,319.27f,346.01f,338.69f,303.75f);
    t.lineTo(341.35f,297.92f);
    t.lineTo(347.63f,299.15f);
    t.cubicTo(351.01f,299.82f,354.41f,300.16f,357.74f,300.16f);
    t.cubicTo(386.12f,300.16f,409.22f,277.06f,409.22f,248.68f);
    t.cubicTo(409.22f,225.63f,393.69f,205.24f,371.46f,199.11f);
    t.lineTo(364.6f,197.22f);
    t.lineTo(365.56f,190.17f);
    t.cubicTo(366.18f,185.61f,366.48f,181.83f,366.48f,178.23f);
    t.cubicTo(366.48f,130.06f,327.28f,90.87f,279.1f,90.87f);
    t.cubicTo(267.14f,90.87f,255.53f,93.27f,244.56f,97.99f);
    t.lineTo(237.16f,101.17f);
    t.lineTo(233.91f,93.81f);
    t.cubicTo(222.73f,68.51f,197.67f,52.16f,170.06f,52.16f);
    t.cubicTo(139.37f,52.16f,112.6f,71.82f,103.44f,101.09f);
    t.lineTo(101.79f,106.34f);
    t.lineTo(96.31f,106.77f);
    t.cubicTo(51.42f,110.21f,16.26f,148.18f,16.26f,193.2f);
    t.cubicTo(16.26f,222.46f,30.89f,249.56f,55.4f,265.7f);
    t.lineTo(60.31f,268.94f);
    t.lineTo(58.76f,274.61f);
    t.cubicTo(57.53f,279.16f,56.91f,283.69f,56.91f,288.11f);
    t.cubicTo(56.91f,316.49f,80.0f,339.59f,108.39f,339.59f);
    t.cubicTo(117.0f,339.59f,125.53f,337.41f,133.06f,333.3f);
    t.lineTo(138.64f,330.26f);


    t.transform(m);
    c.drawPath(t, p);
    c.restore();
}

    draw(canvas,100,100,50,50,0xffff8000);

Hope this helps.

Can you check my edit portion in my question and help me on this..Thanks in advanced. — dipali, Apr 04 '19 at 06:04
It's the way android canvas works! The start point is top, left corner of the canvas. — ucMedia, Apr 04 '19 at 16:18
But i want to change start point from when i touch on canvas,can you please help me ? — dipali, Apr 05 '19 at 04:44

Draw Cloud shape using cubicTo in android canvas

1 Answers1