Follow treslines by email clicking Here!

Thursday, October 3, 2013

Drawing and mixing colors with Canvas / View in Android

Hi there! Today i'm gonna share something very cool with you. It took me a lot of days "scanning" the web for a solution, trying by myself, debugging and so on. unfortunately i didn't find i solution that fits my needs. Solving problems using canvas can be very exciting, but it can also quickly become very depressing if you do not have the perseverance necessary or basic understanding of how things work at this level

To prevent you from getting discouraged, I'll share my solution with you. Here's the challange: Draw arbitrary shapes (splashes) in different colors in a view.(using canvas, drawing methods, paints etc.) Be able to drag and drop it around the view. If the splashes intersects, the intersection should be colored according to the color mixture of the two parts. Then i should be able to read the pixel of the new color to use it the way i want. (Ohhhh my god...!!!!) That's a challange right? ;-) 

So i did it!!! ;-) There is a lot of fragments out there, but nothing complete and because i know this is a very common task desired by many developers, i took the time to do it as clean and reusable as i could.  The result will be something like this:









ShapeTypes

Let's define the shape types we wanna use it first. For sure you could enhance it by adding new types if you need.




public enum ShapeType {
    CIRCLE, RECTANBLE, ARBITRARY_SHAPE
}


ShapeFactory

Then let's define a class that is responsible for creating the shapes. In our cases the splashes. The empty cases can be enhenced by you by adding new shapes to it.




public class ShapeFactory {

    public static void createShape(Path path, float shapeSizeFactor, final int randomShapeId) {

        switch (randomShapeId) {
        case 1:
            path.moveTo(379 * shapeSizeFactor, 616 * shapeSizeFactor);
            int[] shapeCoordinates;
            shapeCoordinates = new int[] { 379, 616, 379, 614, 379, 613, 379, 612, 379, 610, 379, 609, 379, 607, 381, 600, 383, 593, 384, 585, 381, 565, 375, 555, 361, 530, 354, 517,
                    345, 503, 337, 489, 315, 457, 303, 441, 292, 425, 283, 412, 274, 398, 266, 384, 261, 373, 256, 363, 253, 354, 252, 334, 253, 322, 255, 309, 258, 298, 262, 288,
                    266, 280, 270, 272, 276, 265, 283, 256, 294, 249, 304, 244, 314, 239, 322, 236, 329, 235, 336, 235, 355, 237, 373, 242, 380, 245, 390, 251, 393, 254, 402, 263,
                    408, 269, 416, 278, 422, 289, 430, 300, 437, 313, 450, 340, 453, 355, 456, 369, 458, 381, 461, 402, 462, 412, 464, 421, 465, 430, 466, 438, 467, 446, 470, 453,
                    476, 465, 481, 470, 490, 474, 499, 476, 510, 478, 520, 477, 529, 475, 538, 472, 545, 468, 553, 462, 559, 455, 565, 446, 570, 435, 578, 414, 581, 402, 588, 374,
                    595, 347, 599, 333, 610, 300, 616, 287, 622, 275, 630, 265, 639, 256, 648, 247, 656, 239, 665, 232, 672, 226, 681, 222, 692, 217, 704, 215, 713, 213, 728, 213,
                    734, 213, 740, 214, 747, 215, 753, 218, 759, 221, 765, 226, 771, 231, 777, 237, 781, 245, 785, 252, 786, 259, 788, 267, 788, 276, 788, 285, 787, 294, 784, 303,
                    783, 312, 780, 320, 776, 328, 771, 336, 767, 345, 762, 354, 752, 374, 748, 385, 744, 394, 741, 403, 735, 414, 729, 427, 721, 440, 715, 452, 708, 463, 702, 474,
                    694, 486, 690, 499, 685, 511, 678, 534, 677, 542, 676, 553, 677, 558, 684, 563, 693, 563, 705, 560, 718, 554, 730, 547, 747, 539, 785, 520, 800, 512, 835, 496,
                    850, 490, 871, 481, 880, 478, 888, 477, 894, 476, 900, 476, 906, 477, 910, 478, 915, 481, 918, 484, 927, 492, 931, 500, 933, 507, 935, 515, 936, 522, 937, 537,
                    933, 552, 930, 561, 919, 575, 912, 581, 904, 588, 896, 594, 888, 599, 879, 603, 855, 611, 839, 614, 827, 616, 818, 620, 801, 630, 793, 637, 782, 653, 780, 661,
                    780, 670, 782, 678, 789, 689, 797, 703, 806, 718, 829, 750, 842, 768, 853, 787, 861, 802, 869, 819, 879, 857, 882, 874, 885, 892, 887, 913, 888, 930, 887, 947,
                    885, 966, 880, 986, 873, 1002, 863, 1019, 849, 1035, 832, 1049, 795, 1064, 771, 1062, 757, 1051, 744, 1037, 730, 1018, 719, 996, 712, 975, 708, 954, 706, 907, 706,
                    888, 704, 868, 701, 853, 695, 839, 688, 828, 663, 813, 637, 813, 616, 817, 600, 826, 567, 863, 558, 883, 554, 908, 554, 933, 570, 982, 581, 1006, 590, 1029, 598,
                    1055, 602, 1104, 597, 1133, 588, 1161, 573, 1191, 533, 1244, 505, 1268, 477, 1286, 402, 1315, 364, 1324, 339, 1326, 286, 1316, 271, 1306, 253, 1291, 236, 1269,
                    219, 1227, 219, 1205, 222, 1188, 228, 1172, 256, 1137, 275, 1116, 300, 1094, 321, 1074, 356, 1032, 373, 1011, 385, 991, 394, 961, 393, 947, 388, 934, 368, 915,
                    352, 907, 314, 892, 305, 886, 309, 866, 332, 831, 344, 814, 363, 782, 367, 764, 365, 759, 354, 750, 344, 748, 330, 747, 310, 747, 278, 754, 243, 769, 195, 799,
                    160, 810, 142, 809, 136, 805, 124, 789, 119, 774, 116, 760, 115, 743, 117, 710, 121, 695, 126, 681, 140, 652, 151, 641, 168, 629, 192, 619, 204, 619, 218, 619,
                    231, 620, 253, 626, 261, 629, 269, 633, 278, 636, 306, 637, 318, 634, 330, 631, 342, 627, 370, 615, 373, 614, 373, 614 };
            for (int i = 0; i < shapeCoordinates.length - 2; i += 2) {
                path.lineTo(shapeCoordinates[i] * shapeSizeFactor, shapeCoordinates[i + 1] * shapeSizeFactor);
            }
            path.close();
            break;
        case 2:

            break;
        case 3:

            break;
        default:
            break;
        }
   
    }

}


ObjectView

That's the class responsible for drawing the shapes.




import java.util.Random;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelXorXfermode;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class ObjectView extends View {

    private Paint paint;
    private boolean isTouched;
    private ShapeType shapeType;
    private float shapeSizeFactor;

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

    public ObjectView(Context context, int shapeColor, int initialPositionX, int initialPositionY, ShapeType type) {
        super(context);
        setBackgroundColor(Color.TRANSPARENT);
        paint = new Paint();
        paint.setColor(shapeColor);
        paint.setXfermode(new PorterDuffXfermode(Mode.ADD));
        // paint.setXfermode(new PixelXorXfermode(0xFFFFFFFF));
        shapeType = type;
        setTranslationX(initialPositionX);
        setTranslationY(initialPositionY);
    }

    public ObjectView(Context context, int shapeColor, int initialPositionX, int initialPositionY, ShapeType type, float shapeSizeFactor) {
        this(context, shapeColor, initialPositionX, initialPositionY, type);
        this.shapeSizeFactor = shapeSizeFactor;
    }

    public void onDrawEx(Canvas canvas) {
        switch (shapeType) {
        case CIRCLE:
            int circleXCoordinate = getWidth() / 2;
            int circleYCoordinate = getHeight() / 2;
            int circleRadius = getWidth() / 2;
            canvas.drawCircle(circleXCoordinate, circleYCoordinate, circleRadius, paint);
            break;
        case RECTANBLE:
            float left = 0;
            float top = 0;
            float right = getWidth();
            float bottom = getHeight();
            canvas.drawRect(left, top, right, bottom, paint);
            break;
        case ARBITRARY_SHAPE:
            Path path = new Path();
            path.addPath(path, new Matrix());
            int min = 1;
            int max = 10;
            Random randomShapeIdGenerator = new Random();
            int randomShapeId = randomShapeIdGenerator.nextInt(max - min + 1) + min;
            ShapeFactory.createShape(path, this.shapeSizeFactor, /*randomShapeId*/1);
            canvas.drawPath(path, paint);
            break;
        }
    }

    public boolean isTouched() {return isTouched;}
    public void setTouched(boolean touched) {isTouched = touched;}

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        isTouched = true;
        return super.onTouchEvent(event);
    }
}


ObjectViewLayout

thats the main layout that holds all views and it is responsible for moving the shapes around and find out the intersection's color, if the shapes are mixed in the middle of the screen.




import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

public class ObjectViewLayout extends FrameLayout {

    public ObjectViewLayout(Context context) {
        super(context);
    }

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

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
        case MotionEvent.ACTION_UP:
            for (int i = 0; i < getChildCount() - 1; i++) {
                ObjectView objectView = (ObjectView) getChildAt(i);
                objectView.setTouched(false);
            }
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:

            for (int i = 0; i < getChildCount() - 1; i++) {
                ObjectView objectView = (ObjectView) getChildAt(i);
                if (objectView.isTouched()) {
                    objectView.setTranslationX(event.getX() - objectView.getWidth() / 2);
                    objectView.setTranslationY(event.getY() - objectView.getHeight() / 2);

                    break;
                }
            }
        }
        // THE NEXT LINE REPRESENTS/CALLS THE OVERLAYVIEW
        getChildAt(getChildCount() - 1).invalidate();
        // THIS LINE SETS/CHECKS MIXED COLORS TO USE THE WAY YOU MAY WANT
        new Colorize().setColorToPen(getColorFromMiddleOfThisObject());
        return true;
    }

    public int getColorFromMiddleOfThisObject() {
        Bitmap returnedBitmap = getBitmapFromView(this);
        int pixel = returnedBitmap.getPixel(this.getWidth()/2, this.getHeight()/2);
        Log.i("TEST", "Pixel value ObjectViewLayout: "+pixel);
        return pixel;
    }
   
    private Bitmap getBitmapFromView(View view) {
        Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(returnedBitmap);
        Drawable backgroundDrawable = view.getBackground();
        if (backgroundDrawable != null)
            backgroundDrawable.draw(canvas);
        else
            // does not have background drawable, then draw dark grey background
            // on the canvas to be able to detect it.
            canvas.drawColor(Color.DKGRAY);
        view.draw(canvas);
        return returnedBitmap;
    }

}


OverlayView

That's the view responsible for triggering the repaint/redrawing process.




import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

@SuppressLint("DrawAllocation")
public class OverlayView extends View {

    public OverlayView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
        Canvas canvasBitmap = new Canvas(bitmap);
        ViewGroup viewGroup = (ViewGroup) getParent();
        for (int i = 0; i < viewGroup.getChildCount() - 1; i++) {

            ObjectView objectView = (ObjectView) viewGroup.getChildAt(i);
            canvasBitmap.save();
            canvasBitmap.translate(objectView.getTranslationX(), objectView.getTranslationY());
            objectView.onDrawEx(canvasBitmap);
            canvasBitmap.restore();
        }
        float left = 0;
        float top = 0;
        canvas.drawBitmap(bitmap, left, top, new Paint());

    }

}


Colorize

This is the class that interprets the mixed pixel color. Here you could do / set what ever you want.




import android.graphics.Color;
import android.util.Log;

public class Colorize {
   
    public void setColorToPen(int pixelColor) {
       

        if (pixelColor == Color.MAGENTA) {
            Log.i("TEST", "It is MAGENTA");
        }
        if (pixelColor == Color.RED) {
            Log.i("TEST", "It is RED");
        }
        if (pixelColor == Color.BLUE) {
            Log.i("TEST", "It is BLUE");
        }
        if (pixelColor == Color.GREEN) {
            Log.i("TEST", "It is GREEN");
        }
        if (pixelColor == Color.YELLOW) {
            Log.i("TEST", "It is YELLOW");
        }
        if (pixelColor == Color.CYAN) {
            Log.i("TEST", "It is CYAN");
        }
        if (pixelColor == Color.BLACK) {
            Log.i("TEST", "It is BLACK");
        }
        if (pixelColor == Color.TRANSPARENT) {
            Log.i("TEST", "It is TRANSPARENT");
        }
        if (pixelColor == Color.WHITE) {
            Log.i("TEST", "It is WHITE");
        }
        if (pixelColor == Color.GRAY) {
            Log.i("TEST", "It is GREY");
        }
    }

}


MainActivity

Finally let's take a look at the main activity class.




import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.widget.FrameLayout;

public class MainActivity extends Activity {

    private OverlayView overlayView;
    private ObjectViewLayout objectViewLayout;
    private ObjectView shape1;
    private ObjectView shape2;
    private ObjectView shape3;
    private int initialPositionX = 70;
    private int initialPositionY = 70;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        float sizeFactor = 0.1f;
        objectViewLayout = new ObjectViewLayout(this);

        initialPositionX = 70;
        initialPositionY = 70;
        shape1 = new ObjectView(this, Color.RED, initialPositionX, initialPositionY, ShapeType.ARBITRARY_SHAPE, sizeFactor);
        objectViewLayout.addView(shape1, new FrameLayout.LayoutParams(150, 150));

        initialPositionX = 140;
        initialPositionY = 140;
        shape2 = new ObjectView(this, Color.BLUE, initialPositionX, initialPositionY, ShapeType.ARBITRARY_SHAPE, sizeFactor);
        objectViewLayout.addView(shape2, new FrameLayout.LayoutParams(150, 150));

        int initialPositionX = 210;
        int initialPositionY = 210;
        shape3 = new ObjectView(this, Color.GREEN, initialPositionX, initialPositionY, ShapeType.ARBITRARY_SHAPE, sizeFactor);
        objectViewLayout.addView(shape3, new FrameLayout.LayoutParams(150, 150));

        overlayView = new OverlayView(this);
        objectViewLayout.addView(overlayView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));

        setContentView(objectViewLayout);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}


Thats all. Hope you like it. :)  If you run this project now, you should get the result i showed to you at the beginning of this post.

No comments:

Post a Comment