Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to drawing a path with a bitmap?

I have a little drawing app and want to use "complex" shapes as brushes, i.e. a star. Drawing with a simple brush already works with this code:

remotePath.reset();
remotePath.moveTo(start_x, start_y);

float dx = Math.abs(end_x - start_x);
float dy = Math.abs(end_y - start_y);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        remotePath.quadTo(start_x, start_y, (end_x + start_x) / 2, (end_y + start_y) / 2);
}

remotePath.lineTo(end_x, end_y);
// commit the path to our offscreen
mCanvas.drawPath(remotePath, remotePaint);
// kill this so we don't double draw
remotePath.reset();
invalidate();

I basically want the same functionality using this bitmap:

Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.brush_star);

My solution currently is using a list of points (coordinates) to draw the bitmap. The problem with that solution is that it only draws bitmaps at the given points resulting in having gaps between each drawn bitmap. I rather would like to get a smooth line while drawing like with a simple brush without any gaps in between.

Current code for the bitmap drawing:

        protected void onDraw(Canvas canvas) {

        // Make canvas white
        canvas.drawColor(Color.WHITE);

        // Paintable area
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

        canvas.drawPath(mPath, mPaint);

        for (Point point : points) {
            canvas.drawBitmap(complexBrush, point.x, point.y, p);
        }
    }

What's the best way to do so? Thanks for any help!

like image 879
Dominik Avatar asked Aug 10 '11 03:08

Dominik


People also ask

How do you draw a bitmap?

To draw on a bitmap, use the image control's canvas and attach the mouse-event handlers to the appropriate events in the image control. Typically, you would use region operations (fills, rectangles, polylines, and so on). These are fast and efficient methods of drawing.

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.

What is bitmap in canvas?

Canvas is the place or medium where perfroms/executes the operation of drawing, and Bitmap is responsible for storing the pixel of the picture you draw.


1 Answers

I use this Point's class:

public class Point  implements Serializable {
float x, y;
float dx, dy;
}

Paint object:

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
paint.setColor(Color.RED);
paint.setAntiAlias(true);

draw on canvas:

private void drawCanvas(Canvas canvas, List<Point> pts){
    if (pts.size() > 1){
        Path path = new Path();
        final int SMOOTH_VAL = 6;
        for(int i = pts.size() - 2; i < pts.size(); i++){
            if(i >= 0){
                Point point = pts.get(i);

                if(i == 0){
                    Point next = pts.get(i + 1);
                    point.dx = ((next.x - point.x) / SMOOTH_VAL);
                    point.dy = ((next.y - point.y) / SMOOTH_VAL);
                }
                else if(i == pts.size() - 1){
                    Point prev = pts.get(i - 1);
                    point.dx = ((point.x - prev.x) / SMOOTH_VAL);
                    point.dy = ((point.y - prev.y) / SMOOTH_VAL);
                }
                else{
                    Point next = pts.get(i + 1);
                    Point prev = pts.get(i - 1);
                    point.dx = ((next.x - prev.x) / SMOOTH_VAL);
                    point.dy = ((next.y - prev.y) / SMOOTH_VAL);
                }
            }
        }

        boolean first = true;
        for(int i = 0; i < pts.size(); i++){
            Point point = pts.get(i);
            if(first){
                first = false;
                path.moveTo(point.x, point.y);
            }
            else{
                Point prev = pts.get(i - 1);
                path.cubicTo(prev.x + prev.dx, prev.y + prev.dy, point.x - point.dx, point.y - point.dy, point.x, point.y);
            }
        }
        canvas.drawPath(path, paint);
    } else {
        if (pts.size() == 1) {
            Point point = pts.get(0);
            canvas.drawCircle(point.x, point.y, 2, paint);
        }
    }
}

Draw on bitmap canvas:

private void drawBitmap(Bitmap bmp, List<Point> pts) {
    Canvas c = new Canvas(bmp);
    drawCanvas(c, pts);
}
like image 135
Kenumir Avatar answered Oct 27 '22 20:10

Kenumir