Drawing transparent line on canvas of imageview in android - android

The problem is, I attempt to change the opacity to 100 which should be transparent, but when I try to draw the line it has some circle on the line. (ref to the screenshot) Highly appreciate if provide some sample code. Thanks a lot for helping.
Code from MainActivity
// set image
bitmap = downScale(view.getTag().toString(),1280,1024);
altered_bitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), bitmap.getConfig());
draw_view.setNewImage(altered_bitmap,bitmap);
pen.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View arg0) {
draw_view.setAlpha(100);
}
}
});
And Code from the custom imageView
public ScaleImageView(Context context) {
super(context);
sharedConstructing(context);
}
public void sharedConstructing(Context context) {
super.setClickable(true);
this.context = context;
mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
matrix = new Matrix();
m = new float[9];
setImageMatrix(matrix);
setScaleType(ScaleType.MATRIX);
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(width);
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setAlpha(alpha);
drawListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (getDrawable() != null) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];// event.getX();
downy = getPointerCoords(event)[1];// event.getY();
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
mPath = new Path();
paths.add(mPath);
invalidate();
downx = upx;
downy = upy;
break;
case MotionEvent.ACTION_UP:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
mPath = new Path();
paths.add(mPath);
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
}
return true;
}
};
setOnTouchListener(drawListener);
}
//draw view start
public void setNewImage(Bitmap alteredBitmap, Bitmap bmp) {
canvas = new Canvas(alteredBitmap);
matrix_draw = new Matrix();
canvas.drawBitmap(bmp, matrix_draw, paint);
setImageBitmap(alteredBitmap);
mPath = new Path();
paths.add(mPath);
}
public void setBrushColor(int color) {
this.color = color;
paint.setColor(color);
paint.setAlpha(alpha);
}
public void setAlpha(int alpha) {
this.alpha = alpha;
paint.setAlpha(alpha);
}
public void setWidth(float width) {
this.width = width;
paint.setStrokeWidth(width);
}
final float[] getPointerCoords(MotionEvent e) {
final int index = e.getActionIndex();
final float[] coords = new float[] { e.getX(index), e.getY(index) };
Matrix matrix = new Matrix();
getImageMatrix().invert(matrix);
matrix.postTranslate(getScrollX(), getScrollY());
matrix.mapPoints(coords);
return coords;
}
public void setIsScale() {
isScale = !isScale;
setOnTouchListener(isScale ? zoomListener : drawListener);
}
And the screenshot
Update: Project code
Since it is quite difficult to figure out the problem though code extract , I have uplod the project (<1 mb) along with the used library:
if you have some spare time , you are welcome to take a look
it is a small drawing tool , first copy a folder with some images to the folder "HistoryTool" in your device
The path , for example, like:
sd card root/ HistoryTool/ folder1 / a.jpg
, then you can draw on it, but the draw transparent line has circle on it. thats all
https://drive.google.com/file/d/0B9mELZtUJp0LZncwQVM4alExalE/view?usp=sharing

I have complete the task by using On-draw and Path
drawListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (getDrawable() != null) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];// event.getX();
downy = getPointerCoords(event)[1];// event.getY();
holderList.add(new Holder(color, width, alpha));
holderList.get(holderList.size() - 1).path.moveTo(downx, downy);
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
holderList.get(holderList.size() - 1).path.lineTo(upx, upy);
invalidate();
downx = upx;
downy = upy;
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
}
return true;
}
};
setOnTouchListener(drawListener);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (img != null) {
tmp_canvas.drawBitmap(img, 0, 0, null);
}
for (Holder holder : holderList) {
tmp_canvas.drawPath(holder.path, holder.paint);
}
}
//draw view start
public void setNewImage(Bitmap alteredBitmap, Bitmap bmp) {
tmp_canvas = new Canvas(alteredBitmap);
img = bmp;
tmp_canvas.drawBitmap(bmp, 0, 0, null);
setImageBitmap(alteredBitmap);
}

So, your problem is circles on the line. This comes from each new segment of the line chain being drawn individually and each end point overlapping the previously drawn segment of the chain. You want to draw the path of the line before you call stroke(); This will draw the entire chain of line segments once instead of individually and prevent those circular overlaps.
What you could do is something like this: Make a line chain class that draws lines all at once:
/* Feed the line chain an array of points to draw when you construct it. */
/* points_=[{"x":0,"y":0},{"x":10,"y":10}]; */
function LineChain(points_){
this.points=points_;
}
LineChain.prototype={
constructor:LineChain,
/* Draws this line chain to the specified context. */
drawTo:function(context_){
/* Get the first point in the chain. */
var point=this.points[0];
/* Start the path by moving to the first position on the chain. */
context_.beginPath();
context_.moveTo(point.x,point.y);
/* Loop through the remaining points in the chain and draw the rest of the path. */
for (var index=1;index<this.points.length-1;index++){
point=this.points[index];
context_.lineTo(point.x,point.y);
}
}
}
Now when you actually want to draw the chain to the canvas, just do this:
/* Define a line chain. */
var line_chain=new LineChain([{"x":0,"y":0},{"x":10,"y":20},{"x":30,"y":40}]);
/* Wherever you're drawing at... */
context.strokeStyle="rgba(255,0,0,0.5)";
context.lineWidth=20;
line_chain.drawTo(context);
context.stroke();
Basically, it doesn't matter how you go about implementing this technique, the only thing you need to do is ensure that your entire path is drawn before you call the stroke function.

from the docs Paint.setAlpha(int)
set the alpha component [0..255] of the paint's color.
that means that 0 is transparent and 255 is fully opaque. 100 you're just setting to something in the middle.

Please refer to BlendMode that will help you fix this problem.
Expectation: If we draw same stroke even on itself it should not overdraw and decrease transparency.
Refer to below links.
https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/BlendMode
https://medium.com/mobile-app-development-publication/practical-image-porterduff-mode-usage-in-android-3b4b5d2e8f5f

Related

I want to retain a bitmap when changing orientation of screen

I made a custom ImageView which has a canvas and gets two bitmaps so that I can draw on top of an existing image.
While the orientation changes the images is visible but the lines I've drawn disappear.
public class DrawableImageView extends ImageView implements View.OnTouchListener, DrawableImageViewControlListener {
float downx = 0;
float downy = 0;
float upx = 0;
float upy = 0;
Canvas canvas;
Paint paint;
Matrix matrix;
boolean isChanged;
public DrawableImageView(Context context) {
super(context);
setOnTouchListener(this);
}
public DrawableImageView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
setOnTouchListener(this);
}
public DrawableImageView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOnTouchListener(this);
}
public void setNewImage(Bitmap alteredBitmap, Bitmap bmp)
{
canvas = new Canvas(alteredBitmap);
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(5);
paint.setStrokeCap(Paint.Cap.ROUND);
matrix = new Matrix();
canvas.drawBitmap(bmp, matrix, paint);
isChanged = false;
setImageBitmap(alteredBitmap);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
int action = event.getAction();
isChanged = true;
switch (action)
{
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];//event.getX();
downy = getPointerCoords(event)[1];//event.getY();
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];//event.getX();
upy = getPointerCoords(event)[1];//event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
invalidate();
downx = upx;
downy = upy;
break;
case MotionEvent.ACTION_UP:
upx = getPointerCoords(event)[0];//event.getX();
upy = getPointerCoords(event)[1];//event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
return true;
}
final float[] getPointerCoords(MotionEvent e)
{
final int index = e.getActionIndex();
final float[] coords = new float[] { e.getX(index), e.getY(index) };
Matrix matrix = new Matrix();
getImageMatrix().invert(matrix);
matrix.postTranslate(getScrollX(), getScrollY());
matrix.mapPoints(coords);
return coords;
}
#Override
public void colorChanged(int color) {
paint.setColor(color);
}
#Override
public void brushChanged(int size) {
paint.setStrokeWidth(size);
}
public boolean isChanged() {
return isChanged;
}
And here is the code where I initialize the ImageView in my OnCreate:
imageView = (DrawableImageView) findViewById(R.id.editImageView);
IStorage storage = BootLoader.resolve(this).getStorage();
imageFile = storage.getImageFile(fileName);
Bitmap bitmap = BitmapFactory.decodeFile(imageFile.getAbsolutePath());
if (alteredBitmap == null) {
alteredBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
}
imageView.setNewImage(alteredBitmap, bitmap);
Note: I am using two layout files for the two different orientations, and would like to keep it this way. So not manually handling configuration changes.
Android tears down the whole Activity when the screen orientation is changed and restarts it again, so you need to save the altered bitmap when this happens and restore it afterwards.
Different storage options are described here
When to save is described here,

How to magnify/zoom part of image

I'm making an app where user will be able to click on part of the image and get a magnified version in the corner of WebView. I managed to make a Paint that would make a zoom version, but it displays wrong location, like there's some offset.
I know this question has been asked a lot of times and was already answered, but it appears non of those solutions helped.
Here's code I've used:
#Override
public boolean onTouchEvent(#NonNull MotionEvent event) {
zoomPos = new PointF();
zoomPos.x = event.getX();
zoomPos.y = event.getY();
matrix = new Matrix();
mShader = new BitmapShader(MainActivity.mutableBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mShader);
outlinePaint = new Paint(Color.BLACK);
outlinePaint.setStyle(Paint.Style.STROKE);
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
zooming = true;
this.invalidate();
break;
case MotionEvent.ACTION_UP:
Point1 = true;
zooming = false;
this.invalidate();
break;
case MotionEvent.ACTION_CANCEL:
zooming = false;
this.invalidate();
break;
default:
break;
}
return true;
}
#Override
protected void onDraw(#NonNull Canvas canvas) {
super.onDraw(canvas);
if (zooming) {
matrix.reset();
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
mPaint.getShader().setLocalMatrix(matrix);
canvas.drawCircle(100, 100, 100, mPaint);
}
}
Technically it should draw a circle at upper-left corner and display zoomed image of area where my finger is, it draws a circle, but again, zoom is shifted.
Final result should look something like this:
MainActivity.java
public class MainActivity extends Activity {
static ImageView takenPhoto;
static PointF zoomPos;
Paint shaderPaint;
static BitmapShader mShader;
BitmapShader shader;
Bitmap bmp;
static Bitmap mutableBitmap;
static Matrix matrix;
Canvas canvas;
static Paint mPaint;
static Paint Paint;
static boolean zooming;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
File file = new File(Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");
String fileString = file.getPath();
takenPhoto = (ZoomView) findViewById(R.id.imageView1);
bmp = BitmapFactory.decodeFile(fileString);
mutableBitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
takenPhoto.setImageBitmap(mutableBitmap);
matrix = new Matrix();
mShader = new BitmapShader(mutableBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mShader);
zoomPos = new PointF();
Paint = new Paint(Color.RED);
}
}
ZoomView.java
public class ZoomView extends ImageView {
private PointF zoomPos;
PointF fingerPos;
private Paint paint = new Paint(Color.BLACK);
boolean zooming;
Matrix matrix;
BitmapShader mShader;
Paint mPaint;
Paint outlinePaint;
boolean Point1;
public ZoomView(Context context) {
super(context);
}
public ZoomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ZoomView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public boolean onTouchEvent(#NonNull MotionEvent event) {
zoomPos = new PointF();
zoomPos.x = event.getX();
zoomPos.y = event.getY();
matrix = new Matrix();
mShader = new BitmapShader(MainActivity.mutableBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mShader);
outlinePaint = new Paint(Color.BLACK);
outlinePaint.setStyle(Paint.Style.STROKE);
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
zooming = true;
this.invalidate();
break;
case MotionEvent.ACTION_UP:
Point1 = true;
zooming = false;
this.invalidate();
break;
case MotionEvent.ACTION_CANCEL:
zooming = false;
this.invalidate();
break;
default:
break;
}
return true;
}
#Override
protected void onDraw(#NonNull Canvas canvas) {
super.onDraw(canvas);
if (zooming) {
matrix.reset();
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
mPaint.getShader().setLocalMatrix(matrix);
RectF src = new RectF(zoomPos.x-50, zoomPos.y-50, zoomPos.x+50, zoomPos.y+50);
RectF dst = new RectF(0, 0, 100, 100);
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
matrix.postScale(2f, 2f);
mPaint.getShader().setLocalMatrix(matrix);
canvas.drawCircle(100, 100, 100, mPaint);
canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
canvas.drawCircle(zoomPos.x-110, zoomPos.y-110, 10, outlinePaint);
}
if(Point1){
canvas.drawCircle(zoomPos.x, zoomPos.y, 10, paint);
}
}
}
EDIT:
As you can see new code is way better, still there is some offset - black dot - position of the finger.
Seems that the issue is with how you are using the matrix.
Now you are using the original image (1) as a shader which is then being post scaled up around a pivot point (2), which is like doing a zoom around a point (3) - but not centering the point (4) ! (For example, open google maps and zoom in on the map with your mouse - the point is zoomed around the pivot but the pivot is not centered)
What will be an easier way to achieve what you want is by using the Rect to Rect method. I.E. you want to take a small area from the original image (5) and draw it to a larger area (6) .
And here is a code sample:
RectF src = new RectF(zoomPos.x-50, zoomPos.y-50, zoomPos.x+50, zoomPos.y+50);
RectF dst = new RectF(0, 0, 200, 200);
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
Some more points:
Try not to create new object in the onTouch - it is being called many times and it is not good on performance . Instead, create once and reuse.
getAction() will have issues when there are more than one finger on screen since it is the action ID and the pointer ID. Instead use getActionMasked() and getActionIndex().
Do not use hardcoded values (50/100 in the sample code) - these are pixels and are not aware of screen density. Use scaled size like dp.

How do I get onTouch events to draw correctly on a zoomable imageview with canvas?

I'm trying to draw using onTouch events on a Canvas over an Imageview that is pinchable/zoomable. It works perfectly if the image is fullscreen (and proportioned to the size of the screen), but once you zoom in on the image, the drawing point is not the same place as where you touch the screen.
I am creating a canvas and an imageview like so:
canvas = new Canvas(bitmap);
image.setImageBitmap(bitmap);
and then performing a lot of pinch/zoom transformations by using setMatrix on image. By looking at bitmap.getHeight() and bitmap.getWidth(), it's evident that throughout all the transformations, neither Bitmap nor Image actually change in size. Image, for instance, stays at a constant 2560x1454 while Bitmap stays at 3264x1836 (using image.getHeight()/width() and bitmap.getHeight()/width() for those values).
For the drawing part, I'm converting MotionEvent to a series of Point objects (literally just int x, int y) and then translating that value through a formula I found somewhere on the internet. I really have no idea why it works, which is probably my first problem.
List<Point> points = new ArrayList<>();
private boolean handleDraw(View v, MotionEvent event) {
if (event.getAction() != MotionEvent.ACTION_UP) {
Point p = new Point();
p.x = event.getX();
p.y = event.getY();
convertPoint(p, v);
points.add(p);
//draw the converted points
drawOnBitmap();
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP) {
points.clear();
return true;
}
return true;
}
and then they are converted into bitmap values here
//v here is the view passed by the ontouch listener.
private void convertPoint(Point point, View v) {
double divisor = ((double) bitmap.getWidth() / (double) v.getWidth());
point.x = (int) ((double) point.x * divisor);
point.y = (int) ((double) point.y * divisor);
}
and drawn onto the canvas here:
private void drawOnBitmap() {
Path path = new Path();
boolean first = true;
//uses quaddraw
for (int i = 0; i < points.size(); i += 2) {
Point point = points.get(i);
if (first) {
first = false;
path.moveTo(point.x, point.y);
} else if (i < points.size() - 1) {
Point next = points.get(i + 1);
path.quadTo(point.x, point.y, next.x, next.y);
} else {
path.lineTo(point.x, point.y);
}
}
canvas.drawPath(path, redPaint);
image.invalidate();
}
with Paint being
redPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
redPaint.setStyle(Paint.Style.STROKE);
redPaint.setStrokeWidth(STROKE_WIDTH);
redPaint.setColor(Color.RED);
In general, what's happening is that the touch event is being scaled from the size of the screen to the size of the bitmap (see the above image for an example). However, the answer isn't to just take the original getRaw() values; those are always incorrect.
I guess the question is, how do I get the canvas to respond to the ABSOLUTE position of the touch event instead of the proportional one? Failing that, how can I transform the base canvas with the same values as the imageview and get them both to scale proportionally?
You need to recalculate your coords using Matrix with code like this:
public class DrawableImageView extends ImageView implements OnTouchListener
{
float downx = 0;
float downy = 0;
float upx = 0;
float upy = 0;
Canvas canvas;
Paint paint;
Matrix matrix;
public DrawableImageView(Context context)
{
super(context);
setOnTouchListener(this);
}
public DrawableImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
setOnTouchListener(this);
}
public DrawableImageView(Context context, AttributeSet attrs,
int defStyleAttr)
{
super(context, attrs, defStyleAttr);
setOnTouchListener(this);
}
public void setNewImage(Bitmap alteredBitmap, Bitmap bmp)
{
canvas = new Canvas(alteredBitmap );
paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(5);
matrix = new Matrix();
canvas.drawBitmap(bmp, matrix, paint);
setImageBitmap(alteredBitmap);
}
#Override
public boolean onTouch(View v, MotionEvent event)
{
int action = event.getAction();
switch (action)
{
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];//event.getX();
downy = getPointerCoords(event)[1];//event.getY();
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];//event.getX();
upy = getPointerCoords(event)[1];//event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
invalidate();
downx = upx;
downy = upy;
break;
case MotionEvent.ACTION_UP:
upx = getPointerCoords(event)[0];//event.getX();
upy = getPointerCoords(event)[1];//event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
return true;
}
final float[] getPointerCoords(MotionEvent e)
{
final int index = e.getActionIndex();
final float[] coords = new float[] { e.getX(index), e.getY(index) };
Matrix matrix = new Matrix();
getImageMatrix().invert(matrix);
matrix.postTranslate(getScrollX(), getScrollY());
matrix.mapPoints(coords);
return coords;
}
}
The full sample you can get here.

Undo drawing on the custom image view in android [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I was working on the drawing application, so far I am able to draw line on the image, the problem is I find it can not integrate the undo operation in the custom image view.
I apply the logic of " store the draw path one by one, and draw it on the onDraw phrase", but there seems some missing/ flaws in the code.
Welcome to ask for any question if you would like to know more detail about the code. The screenshot is what my app look like (drawing on the image)
Thanks for helping.
In the Main Activity:
// set image
bitmap = downScale(view.getTag().toString(),1280,1024);
altered_bitmap = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), bitmap.getConfig());
draw_view.setNewImage(altered_bitmap,bitmap);
undo.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View arg0) {
if (pencil.getVisibility() == View.VISIBLE || pen.getVisibility() == View.VISIBLE) {
draw_view.onClickUndo();
}
}
});
And in the custom image view:
private ArrayList<Path> paths = new ArrayList<Path>();
private Path mPath;
public ScaleImageView(Context context) {
super(context);
sharedConstructing(context);
}
public void sharedConstructing(Context context) {
super.setClickable(true);
this.context = context;
mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
matrix = new Matrix();
m = new float[9];
setImageMatrix(matrix);
setScaleType(ScaleType.MATRIX);
paint = new Paint();
paint.setAntiAlias(true);
paint.setStrokeWidth(width);
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setAlpha(alpha);
drawListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (getDrawable() != null) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];// event.getX();
downy = getPointerCoords(event)[1];// event.getY();
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
mPath = new Path();
paths.add(mPath);
invalidate();
downx = upx;
downy = upy;
break;
case MotionEvent.ACTION_UP:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
mPath = new Path();
paths.add(mPath);
invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
}
return true;
}
};
setOnTouchListener(drawListener);
}
//draw view start
public void setNewImage(Bitmap alteredBitmap, Bitmap bmp) {
canvas = new Canvas(alteredBitmap);
matrix_draw = new Matrix();
canvas.drawBitmap(bmp, matrix_draw, paint);
setImageBitmap(alteredBitmap);
mPath = new Path();
paths.add(mPath);
}
public void setBrushColor(int color) {
this.color = color;
paint.setColor(color);
paint.setAlpha(alpha);
}
public void setAlpha(int alpha) {
this.alpha = alpha;
paint.setAlpha(alpha);
}
public void setWidth(float width) {
this.width = width;
paint.setStrokeWidth(width);
}
final float[] getPointerCoords(MotionEvent e) {
final int index = e.getActionIndex();
final float[] coords = new float[] { e.getX(index), e.getY(index) };
Matrix matrix = new Matrix();
getImageMatrix().invert(matrix);
matrix.postTranslate(getScrollX(), getScrollY());
matrix.mapPoints(coords);
return coords;
}
public void setIsScale() {
isScale = !isScale;
setOnTouchListener(isScale ? zoomListener : drawListener);
}
#Override
protected void onDraw(Canvas canvas) {
for (Path p : paths){
canvas.drawPath(p, paint_line);
}
}
public void onClickUndo () {
if (paths.size()>0){
paths.remove(paths.size()-1);
invalidate();
}
}
//draw view end
Update: Test result
After tested a while, found that the app runs but selected image is not draw in the custom image view like this:
if you have some spare time , I have upload the project (<1 mb),
it is a small drawing tool , first copy a folder with some images to the folder "HistoryTool" in your device
The path , for example, like:
sd card root/ HistoryTool/ folder1 / a.jpg
, then you can draw on it, thats all, but right now the undo operation is not functioning and need to fix.
https://drive.google.com/file/d/0B9mELZtUJp0LLVh0b1Q0a3VTcG8/view?usp=sharing
Thanks a lot
Actually I think I have found the root of your problem: you add a new path each time you catch a MotionEvent.ACTION_MOVE, but touch sensor is relly noisy and you get lots of those events. You migh consider editing the existing path which you add whenever you detect MotionEvent.ACTION_DOWN. I would consider doing something like this
Path currentPath = null;
drawListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (getDrawable() != null) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downx = getPointerCoords(event)[0];// event.getX();
downy = getPointerCoords(event)[1];// event.getY();
currentPath = new Path();
currentPath.moveTo(downx, downy);
paths.add(currentPath);
break;
case MotionEvent.ACTION_MOVE:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
currentPath.lineTo(upx, upy);
invalidate();
break;
case MotionEvent.ACTION_UP:
upx = getPointerCoords(event)[0];// event.getX();
upy = getPointerCoords(event)[1];// event.getY();
currentPath.lineTo(upx, upy);
invalidate();
currentPath = null;
break;
case MotionEvent.ACTION_CANCEL:
currentPath = null;
break;
default:
break;
}
}
return true;
}
};
Just be sure to declare currentPath as a private field of your custom View class. Sorry I can't test the code right now, so if you have some problems with this code, please tell me and in the evening I will give you a tested code.
EDIT: Sorry I have added extra moveTo in ACTION_MOVE processing, which will prevent the correct work code

Android: Problem with the Path Style in Region.Op

My basic goal is to subtract a Path from a predetermined region (also created with a Path) in Android 1.6.
Is there anyway to get Region.setPath to treat the path passed to it the same way the canvas treats a stroked path (which is what my users are seeing)?
I understand that the Style is used for Painting to the canvas, but I need the behavior to reflect what is drawn on canvas and the path being drawn is Stroked.
The behavior works find when adding shapes to the path (path.addRect, path.addCircle), but not when using lineTo, quadTo, cubeTo. My only other option is to compose a path of nothing but rects or circles.
public class ComplexRegions extends Activity {
static Display display;
/** Code Sample for StackOverflow */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
display = getWindowManager().getDefaultDisplay();
setContentView(new SampleView(this));
}
private static class SampleView extends View {
Path orig_path, finger_path;
Paint dirty_paint, fingerpaint, temp_paint;
Region orig_region, clip, fingerregion, tempregion;
Canvas c;
int h, w;
public float mX, mY, dx, dy;
boolean b;
public SampleView(Context context) {
super(context);
fingerregion = new Region();
tempregion = new Region();
orig_region = new Region();
clip = new Region();
orig_path = new Path();
finger_path = new Path();
dirty_paint = new Paint();
dirty_paint.setStyle(Paint.Style.STROKE);
dirty_paint.setColor(Color.BLUE);
dirty_paint.setStrokeWidth(5);
dirty_paint.setStrokeCap(Paint.Cap.ROUND);
dirty_paint.setStrokeJoin(Paint.Join.ROUND);
dirty_paint.setAntiAlias(false);
fingerpaint = new Paint();
fingerpaint.setColor(Color.GREEN);
fingerpaint.setStrokeWidth(10);
fingerpaint.setStyle(Paint.Style.STROKE);
fingerpaint.setStrokeCap(Paint.Cap.ROUND);
fingerpaint.setStrokeJoin(Paint.Join.ROUND);
fingerpaint.setAntiAlias(false);
temp_paint = new Paint();
temp_paint.setColor(Color.RED);
temp_paint.setStrokeWidth(1);
temp_paint.setStyle(Paint.Style.STROKE);
temp_paint.setStrokeCap(Paint.Cap.ROUND);
temp_paint.setStrokeJoin(Paint.Join.ROUND);
temp_paint.setAntiAlias(false);
w = display.getWidth();
h = display.getHeight();
clip.set(0, 0, w, h);
orig_path.addRect(w*0.25f, h*0.55f, w*0.65f, h*0.65f, Path.Direction.CW);
orig_region.setPath(orig_path, clip);
}
#Override
protected void onDraw(Canvas c) {
c.drawPath(orig_path, dirty_paint);
c.drawPath(finger_path, fingerpaint);
//following line shows that finger_path is
//behaving as though fill and stroke is on
//after being passed to the region class
c.drawPath(tempregion.getBoundaryPath(), temp_paint);
invalidate();
}
//L T R B
#Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int)event.getX();
int y = (int)event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
private void touch_start(float x, float y) {
finger_path.moveTo(x, y);
//finger_path.addCircle(x, y, 25, Path.Direction.CCW);
//when addCircle is only Path method used on path the result is fine
}
private void touch_move(float x, float y){
finger_path.lineTo(x, y);
}
private void touch_up() {
//*PROBLEM* Seems like setPath forces finger_path to default to fill and stroke
fingerregion.setPath(finger_path, clip);
//set tempregion to the region resulting from this Op
tempregion.op(orig_region, fingerregion, Region.Op.DIFFERENCE);
//check if the resulting region is empty
if(tempregion.isEmpty()){
for(int i = 0;i<100;i++)
Log.e("CR", "Region Completely Covered.");
}
}
}
}

Categories

Resources