Develop Reference

PorterDuff.Mode.CLEAR in canvas not working for 5.0 or above version : Android

i am using below code for clear part of image,
Paint round_brush;
class TouchView extends View
{
Paint pTouch;
int X = -100;
int Y = -100;
Canvas c2;
public TouchView(Context context, Bitmap background_bitmap_, Bitmap foreground_bitmap_)
{
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
background_bitmap = null;
foreground_bitmap = null;
background_bitmap = background_bitmap_;
foreground_bitmap = foreground_bitmap_.copy(Bitmap.Config.ARGB_8888, true);
c2 = new Canvas(foreground_bitmap);
pTouch = new Paint(); //Paint.ANTI_ALIAS_FLAG
pTouch.setAlpha(0xFF);
pTouch.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
pTouch.setColor(Color.TRANSPARENT);
//pTouch.setMaskFilter(new BlurMaskFilter(15, Blur.NORMAL));
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
round_brush = new Paint();
// smooths out the edges of what is being drawn
round_brush.setAntiAlias(true);
// set color
round_brush.setColor(Color.GRAY);
// set style
round_brush.setStyle(Paint.Style.STROKE);
// set stroke
round_brush.setStrokeWidth(4);
}
#Override
public boolean onTouchEvent(MotionEvent ev)
{
switch (ev.getAction())
{
case MotionEvent.ACTION_DOWN:
{
X = (int) ev.getX();
Y = (int) ev.getY();
invalidate();
break;
}
case MotionEvent.ACTION_MOVE:
{
X = (int) ev.getX();
Y = (int) ev.getY();
invalidate();
break;
}
case MotionEvent.ACTION_UP:
break;
}
return true;
}
#Override
public void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//draw background
canvas.drawBitmap(background_bitmap, new Matrix(), null);
//cropping part of above image
c2.drawCircle(X, Y, brushSize, pTouch);
canvas.drawCircle(X, Y, brushSize, round_brush);
//draw the overlay over the background
canvas.drawBitmap(foreground_bitmap, new Matrix(), null);
}
}
while i test on 4.4 or lower device it works as expected and everything is fine ! but on 5.0 or above device it draws black circle ! why? what is wrong? is any special condition for 5.0 or above device?
My test device result,
Moto E (4.4) OK
Moto E (5.0.2) Fail
Samsung(4.1.2) OK
Yureka (5.0.2) Fail

Android: touch points escaped

I am working on some project, in which I have to animate image depending upon the users touch, but the problem is I am not getting all the touch points, therefore I do not get the smooth animation. I am working on Android tablet os 4.0.3.
public class DrawView extends View implements OnTouchListener {
private static final String TAG = "DrawView";
List<Points> points = new ArrayList<Points>();
Paint paint = new Paint();
Button button = null;
int movement = 0;
int[] imageIds = {R.drawable.zero,R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,
R.drawable.five,R.drawable.six,R.drawable.seven,R.drawable.eight,R.drawable.ninie,R.drawable.ten,
R.drawable.eleven,R.drawable.twelve,R.drawable.thirteen,R.drawable.fourteen,R.drawable.fifteen,
R.drawable.sixteen,R.drawable.seventeen,R.drawable.eighteen,R.drawable.ninteen,R.drawable.twenty,
R.drawable.twentyone,R.drawable.twentytwo,R.drawable.twentythree,R.drawable.twentyfour,
R.drawable.twentyfive,R.drawable.twentysix,R.drawable.twentyseven,R.drawable.twentyeight,
R.drawable.twentynine,R.drawable.thirty,R.drawable.thirtyone,R.drawable.thirtytwo,
R.drawable.thirtythree,R.drawable.thirtyfour,R.drawable.thirtyfive,R.drawable.thirtysix,
R.drawable.thirtyseven,R.drawable.thirtyeight,R.drawable.thirtynine,R.drawable.fortyone,
R.drawable.fortytwo,R.drawable.fortytwo,R.drawable.fortyfour,R.drawable.fortyfive,
R.drawable.fortysix,R.drawable.fortyseven,R.drawable.fortyeight,R.drawable.fortynine,
R.drawable.fifty,R.drawable.fiftyone,R.drawable.fiftyone,R.drawable.fiftythree,R.drawable.fiftyfour,
R.drawable.fiftyfive,R.drawable.fiftysix,R.drawable.fiftyseven,R.drawable.fiftyeight,
R.drawable.fiftynine,R.drawable.sixty,R.drawable.sixtyone,R.drawable.sixtytwo,
R.drawable.sixtythree,R.drawable.sixtyfour,R.drawable.sixtyfive,R.drawable.sixtysix,
R.drawable.sixtyseven,R.drawable.sixtyeight,R.drawable.sixtynine,R.drawable.seventy,
R.drawable.seventyone,R.drawable.seventytwo,R.drawable.seventythree,R.drawable.seventyfour,
R.drawable.seventyfive,R.drawable.seventysix,R.drawable.seventyseven,R.drawable.seventyeight,
R.drawable.seventynine,R.drawable.eighty,R.drawable.eightyone,R.drawable.eightytwo,R.drawable.thirtythree,
R.drawable.eightyfour,R.drawable.eightyfive,R.drawable.eightysix,R.drawable.eightyseven,
R.drawable.seventyeight,R.drawable.eightynine,R.drawable.ninty,R.drawable.nintyone,
R.drawable.nintytwo,R.drawable.nintythree,R.drawable.nintyfour,R.drawable.nintyfive,
R.drawable.nintysix,R.drawable.nintyseven,R.drawable.nintyeight,R.drawable.nintynine,
R.drawable.hundred
};
int touchPoint=0,currentImage=0;
float previousX = 0, starting = 0, difference = 0, remaining=0;
RelativeLayout relativeLayout;
Boolean update = false;
int changeImageFrequency = 4;
ImageView image;
public DrawView(Context context) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
}
#SuppressLint("DrawAllocation")
#TargetApi(11)
#Override
public void onDraw(Canvas canvas) {
Log.i("testing", "i am in draw");
if (movement==0) {
Bitmap bimap = BitmapFactory.decodeResource(getResources(), imageIds[currentImage]);
canvas.drawBitmap(bimap, 0, 0,null);
invalidate();
}
else if (movement==1) {
if (currentImage+changeImageFrequency<100) {
currentImage+=changeImageFrequency;
Bitmap bimap = BitmapFactory.decodeResource(getResources(), imageIds[currentImage]);
canvas.drawBitmap(bimap, 0, 0,null);
invalidate();
}
else {
Bitmap bimap = BitmapFactory.decodeResource(getResources(), imageIds[currentImage]);
canvas.drawBitmap(bimap, 0, 0,null);
currentImage=0;
}
movement=0;
invalidate();
}
else if (movement==2) {
if (currentImage-changeImageFrequency>=0) {
currentImage-=changeImageFrequency;
Bitmap bimap = BitmapFactory.decodeResource(getResources(), imageIds[currentImage]);
canvas.drawBitmap(bimap, 0, 0,null);
invalidate();
}
else {
Bitmap bimap = BitmapFactory.decodeResource(getResources(), imageIds[currentImage]);
canvas.drawBitmap(bimap, 0, 0,null);
currentImage=99;
}
movement=0;
invalidate();
}
}
public boolean onTouch(View view, MotionEvent event) {
// TODO Auto-generated method stub
int action = event.getAction();
switch(action) {
case MotionEvent.ACTION_DOWN:
starting = event.getX();
invalidate();
break;
case MotionEvent.ACTION_MOVE:
difference = event.getX()-starting;
if (difference>0)
movement = 1;
else if (difference<0)
movement = 2;
invalidate();
break;
case MotionEvent.ACTION_UP:
invalidate();
break;
}
return true;
}

If your images are of average resolution, then loading them (BitmapFactory.decodeResource) in the Main thread will block the UI, causing some touch events to be skipped untill the loading is performed. A better implementation is to use SurfaceView instead of View since it performs its drawing in a separate thread. Check this link for more details on using SurfaceView.

Android: Draw image on canvas where the user touches

so I have a canvas, and I would like a certain image (Lets say image.png) to appear where the user touches. What would I use? OnTouch?
Can someone help me out? Here is my canvas class below. Right now I have a few random images and shapes drawn, but they happen right away, not when someone touches like I would like it.
Thanks in advance!
public class MyView extends View
private Canvas canvas;
private Bitmap bitmap;
public MyView(Context context) {
super(context);
}
protected void onSizeChanged(int curw, int curh, int oldw, int oldh) {
if (bitmap != null) {
bitmap .recycle();
}
canvas= new Canvas();
bitmap = Bitmap.createBitmap(curw, curh, Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
}
public void destroy() {
if (bitmap != null) {
bitmap.recycle();
}
}
public void onTouch(Canvas canvas) {
Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.test);
canvas.drawColor(Color.TRANSPARENT);
canvas.drawBitmap(_scratch, 0, 0, null);
}
public void onDraw(Canvas canvas) {
//draw onto the canvas
Bitmap _scratch1 = BitmapFactory.decodeResource(getResources(), R.drawable.spacecat);
canvas.drawColor(Color.TRANSPARENT);
canvas.drawBitmap(_scratch1, 0, 0, null);
Paint myPaint = new Paint();
myPaint.setStrokeWidth(4);
myPaint.setColor(0xFF097286);
canvas.drawCircle(240, 40, 30, myPaint);
myPaint.setColor(0xFFF07222);
Point p1 = new Point();
Point p2 = new Point();
p1.x = 0;
p1.y = 0;
p2.x = 40;
p2.y = 55;
canvas.drawLine(p1.x, p1.y, p2.x, p2.y, myPaint);
float[] pts = new float[8];
pts[0] = 100;
pts[1] = 5;
pts[2] = 97;
pts[3] = 9;
pts[4] = 90;
pts[5] = 15;
pts[6] = 84;
pts[7] = 20;
myPaint.setColor(0xFF40FF40);
myPaint.setStrokeWidth(9);
myPaint.setAntiAlias(true);
canvas.drawPoints(pts, myPaint);
myPaint.setColor(0xFFF0FF00);
myPaint.setStrokeWidth(4);
myPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(110, 150, 100, myPaint);
}}

I wrote an example for you :
public class MyView extends View {
boolean touching = false;
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); //To change body of overridden methods use File | Settings | File Templates.
if (touching) {
//You can draw other thing here. just draw bitmap for example.
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
Rect source = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
Rect bitmapRect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
canvas.drawBitmap(bitmap, source, bitmapRect, new Paint());
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touching = true;
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
touching = false;
invalidate();
break;
}
return super.onTouchEvent(event); //To change body of overridden methods use File | Settings | File Templates.
}
}

How to redraw the Android Canvas

Can anyone help me on how to redraw the canvas. I tried many examples and source code from the internet, but it still didn't work on my PC like the invalidate func, canvas.save, canvas.restore, etc. I want to do some translation and scaling for the canvas, but when I follow the step on the internet it shows nothing. This is my source code. (I'm still new to Java/Android programming.)
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
drawMaps.j=1;
resources = this.getResources();
try {
GetAttributes("path");
} catch (XmlPullParserException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
SeekBar seekBar = (SeekBar)findViewById(R.id.seekBar1);
panel = new Panel(this);
setContentView(R.layout.main);
panel.onDraw(canvas2);
ImageView image = (ImageView) findViewById(R.id.mapImage);
image.setImageBitmap(bufMaps);
}
class Panel extends View{
Paint paint = new Paint();
public Panel(Context context) {
super(context);
setFocusable(true);
}
public Bitmap quicky_XY(Bitmap bitmap,int pos_x,int pos_y){
Bitmap bufMap = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(bufMap);
canvas.save();
final Paint paint = new Paint();
width = canvas.getWidth();//start
height = canvas.getHeight();//end
drawMaps.xpos = width / 30;
drawMaps.ypos = height/ 20;
paint.setStrokeWidth(0);
for (int i = 0; i < 30; i++) {
paint.setColor(Color.DKGRAY);
canvas.drawLine(drawMaps.xpos +(drawMaps.xpos*i), 0,
drawMaps.xpos +(drawMaps.xpos*i), height, paint);
//canvas.drawLine(startX, startY, stopX, stopY, paint)
}
for (int i = 0; i < 20; i++) {
paint.setColor(Color.DKGRAY);
canvas.drawLine(0, drawMaps.ypos+(drawMaps.ypos*i),
width, drawMaps.ypos+(drawMaps.ypos*i), paint);
}
canvas.translate(pos_x,pos_y);
drawMaps.addPath(canvas);
canvas.restore();
invalidate();
return bufMap;
}
#Override
public void onDraw(Canvas canvas) {
canvas.save();
bufMaps = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
bufMaps = quicky_XY(emptyBmap,positionX,positionY);
}
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
positionX = (int)event.getRawX();
positionY = (int)event.getRawY();
switch(event.getAction())
{
case MotionEvent.ACTION_DOWN: {
prevX = positionX;
prevY = positionY;
}
break;
case MotionEvent.ACTION_MOVE: {
final int distY = Math.abs(positionY - prevY);
final int distX = Math.abs(positionX - prevX);
if (distX > mTouchSlop || distY > mTouchSlop){
panel.getDrawingCache();
panel.invalidate();
}
Log.e("LSDEBUG", "touch X, " + positionX);
}
break;
}
return true;
}

You do not call onDraw() yourself. Instead, you call to invalidate() and it will make sure onDraw() is called as soon as the it can.
Also, if you are trying to draw on the canvas from outside the onDraw() method, you need to get a reference to the canvas.
Inside your onDraw() the canvas is not being changed. only saved (again, called on invalidate() or whenever the system needs to redraw this View):
#Override
public void onDraw(Canvas canvas) {
canvas.save();
bufMaps = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
bufMaps = quicky_XY(emptyBmap,positionX,positionY);
}
Accessing the canvas from outside the onDraw() is done using a Holder().lockCanvas() to get reference to the canvas. After drawing, you unlock it again, using unlockAndPost() and that's it.
You will also need to implement the Callback.surfaceCreated interface to find out when the Surface is available to use.
Take a look at the android reference for SurfaceHolder.
This post explains it pretty well.

Erase bitmap parts using PorterDuff mode

I try to erase parts of a bitmap in my Android application by using Porter-Duff Xfermodes.
I have a green background which is overlayed by a blue bitmap. When I touch the screen a "hole" in the overlaying bitmap is supposed to be created making the green background visible. Instead of a hole my current code produces a black dot.
Below is my code. Any ideas, what I am doing wrong here?
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(new DrawView(this));
}
public class DrawView extends View implements OnTouchListener {
private int x = 0;
private int y = 0;
Bitmap bitmap;
Canvas bitmapCanvas;
private final Paint paint = new Paint();
private final Paint eraserPaint = new Paint();
public DrawView(Context context) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
// Set background
this.setBackgroundColor(Color.GREEN);
// Set bitmap
bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.RGB_565);
bitmapCanvas = new Canvas();
bitmapCanvas.setBitmap(bitmap);
bitmapCanvas.drawColor(Color.BLUE);
// Set eraser paint properties
eraserPaint.setAlpha(0);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
eraserPaint.setAntiAlias(true);
}
#Override
public void onDraw(Canvas canvas) {
bitmapCanvas.drawColor(Color.BLUE);
bitmapCanvas.drawCircle(x, y, 10, eraserPaint);
canvas.drawBitmap(bitmap, 0, 0, paint);
}
public boolean onTouch(View view, MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
invalidate();
return true;
}
}

Here is working code... may help somebody
public class ImageDemo extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new Panel(this));
}
class Panel extends View {
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mPaint;
Bitmap bitmap;
Canvas pcanvas;
int x = 0;
int y =0;
int r =0;
public Panel(Context context) {
super(context);
Log.v("Panel", ">>>>>>");
setFocusable(true);
setBackgroundColor(Color.GREEN);
// setting paint
mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setAntiAlias(true);
// getting image from resources
Resources r = this.getContext().getResources();
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.mickey);
// converting image bitmap into mutable bitmap
bitmap = bm.createBitmap(295, 260, Config.ARGB_8888);
pcanvas = new Canvas();
pcanvas.setBitmap(bitmap); // drawXY will result on that Bitmap
pcanvas.drawBitmap(bm, 0, 0, null);
}
#Override
protected void onDraw(Canvas canvas) {
// draw a circle that is erasing bitmap
pcanvas.drawCircle(x, y, r, mPaint);
canvas.drawBitmap(bitmap, 0, 0,null);
super.onDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// set parameter to draw circle on touch event
x = (int) event.getX();
y = (int) event.getY();
r =20;
// At last invalidate canvas
invalidate();
return true;
}
}
}

First thought, I'm not sure if setting alpha to 0 on your erase paint object is a good idea. That might make the whole thing ineffective.
Also, you should always use Bitmap.Config.ARGB_8888 if you're dealing with alphas.
If you're having trouble with the PorterDuff stuff, though, I would suggest simplifying your approach to ONLY do that (temporarily). That will help you narrow down the part which isn't working. Comment out everything to do with touch and view updates.
Then you can single out what part of the drawing isn't working right. Set up your constructor like this:
DrawView()
{
/* Create the background green bitmap */
...
/* Create foreground transparent bitmap */
...
/* Draw a blue circle on the foreground bitmap */
...
/* Apply the foreground to the background bitmap
using a PorterDuff method */
...
}
onDraw()
{
/* Simply draw the background bitmap */
...
}
If you set things up like that, you should be able to tell how your PD method is affecting the green bitmap, and change things accordingly.

Here is another advancement for your solution ... See Demo example
public class MainActivity extends Activity {
Bitmap bp;
Canvas bitmapCanvas;
DrawView drawImg;
LinearLayout ln1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ln1 = (LinearLayout) findViewById(R.id.ln1);
drawImg = new DrawView(this);
ln1.addView(drawImg);
}
public class DrawView extends View implements View.OnTouchListener {
private int x = 0;
private int y = 0;
Bitmap bitmap;
Path circlePath;
Paint circlePaint;
private final Paint paint = new Paint();
private final Paint eraserPaint = new Paint();
public DrawView(Context context){
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
this.setOnTouchListener(this);
// Set background
this.setBackgroundColor(Color.CYAN);
bp = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
// Set bitmap
bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas();
bitmapCanvas.setBitmap(bitmap);
bitmapCanvas.drawColor(Color.TRANSPARENT);
bitmapCanvas.drawBitmap(bp, 0, 0, null);
circlePath = new Path();
circlePaint = new Paint();
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.BLUE);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeJoin(Paint.Join.MITER);
circlePaint.setStrokeWidth(4f);
// Set eraser paint properties
eraserPaint.setAlpha(0);
eraserPaint.setStrokeJoin(Paint.Join.ROUND);
eraserPaint.setStrokeCap(Paint.Cap.ROUND);
eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
eraserPaint.setAntiAlias(true);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, paint);
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
canvas.drawPath(circlePath, circlePaint);
}
public boolean onTouch(View view, MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
bitmapCanvas.drawCircle(x, y, 30, eraserPaint);
circlePath.reset();
circlePath.addCircle(x, y, 30, Path.Direction.CW);
int ac=event.getAction();
switch(ac){
case MotionEvent.ACTION_UP:
Toast.makeText(MainActivity.this, String.valueOf(x), Toast.LENGTH_SHORT).show();
circlePath.reset();
break;
}
invalidate();
return true;
}
}
}
read more