How to create this type of brush for paint in android

Question

Possible duplicate How to make custom brush for canvas in android?

Hello friends,

I am too stuck to create this type of brush for paint application, but didn't find anything related to this.

I am new to paint/canvas so I don't have knowledge about this for the basic I have completed but for the effect like creating brush I didn't have anything like how to create/implement it. Does anybody have example of or code for this?

I need this type of brush for my application simple one example need for understanding:

Thank you.

Answer 1

I guess there is no easy way. I found this discussion and particularly the following post is interesting:

Professional Computer Graphics is never easy. That's why there are so few people really tackling it. To make things worse, professional techniques are rarely published. I don't know how much effort you desire to make to get it, but I will give you some light. So, if you want, you can study, develop and get it the best way. If it seem too hard for you, let it here as a curiosity.

The professional way to make calligraphic brushes nowadays is like that:

The master curve is smooth because it's drawn based on spline(s). To get the more professional result, construct two splines: one using the points you got (for example, from mouse events) lying over the spline and another using the points like the spline control points. So the curve you draw is the curve generated from the interpolation of these two splines. This way, you have a "master curve" to draw.

You should also have a "master thickness" on which a variation must be applied. This thickness variation is calculated according to the result you want. The more common kind of calligraphic brush is just like in the image you linked: the curved regions usually are thinner than the straight ones. It's the more usual type because most designers get this kind of result when drawing with a tablet, so programs emulate this behavior. This effect in particular is usually calculated using a function based on the second derivate of the master spline. The thickness variation amplitude can be a configurable value.

The thin and sharp curve tips are made in a extra calculation. Sometimes it can be a good idea smoothing even the thickness variations with splines or some kind of "ceil function".

If you made everything right, you have a thick (and of course closed) curve in your hands. Draw it using the best filling algorithm you can develop. Use anti-aliasing if you are able to.

All these techniques can be calculated in real time while the user moves the mouse. The more points you get, the more calculations you make, but it works well because most calculations you already made are still valid. Usually you just need to reconstruct a small (last) part.

One last suggestion: never make 2D smoothing using function regression methods, unless your points really represent a function (so you need to keep the "math meaning" of the points as much as possible). I can not imagine a slower way to smooth points that have no special semantics. The only exception is when you have very very sparse points and the input order doesn't matter, but it's not the case when somebody is drawing with brushes.

Answer 2

Though it is too late i want to share something. This might help someone. Various brush techniques are discussed in the following link with JavaScript code for HTML canvas. All you have to do is convert JavaScript code to your expected one. It is pretty simple to covert JavaScript Canvas code to Android Canvas code.

Exploring canvas drawing techniques

I have converted "Multiple lines" technique to Java code for android; You can check the following android view code.

public class MultipleLines extends View {

private Bitmap bitmap;
private Canvas canvas;

private Paint mPaint;

public MultipleLines(Context context) {
    super(context);
    init();
}

private void init(){
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(0xFFFF0000);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(1);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    canvas = new Canvas(bitmap);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = 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 boolean isDrawing;
private List<PointF> points = new ArrayList<>();

private void touch_start(float touchX, float touchY) {
    isDrawing = true;
    points.add(new PointF(touchX, touchY));

    canvas.save();
}
private void touch_move(float touchX, float touchY) {
    if (!isDrawing) return;

    canvas.drawColor(Color.TRANSPARENT);

    points.add(new PointF(touchX, touchY));

    stroke(offsetPoints(-10));
    stroke(offsetPoints(-5));
    stroke(points);
    stroke(offsetPoints(5));
    stroke(offsetPoints(10));
}

private void touch_up() {
    isDrawing = false;
    points.clear();
    canvas.restore();
}

private List<PointF> offsetPoints(float val) {
    List<PointF> offsetPoints = new ArrayList<>();
    for (int i = 0; i < points.size(); i++) {
        PointF point = points.get(i);
        offsetPoints.add(new PointF(point.x + val, point.y + val));
    }
    return offsetPoints;
}

private void stroke(List<PointF> points) {
    PointF p1 = points.get(0);
    PointF p2 = points.get(1);

    Path path = new Path();
    path.moveTo(p1.x, p1.y);

    for (int i = 1; i < points.size(); i++) {
        // we pick the point between pi+1 & pi+2 as the
        // end point and p1 as our control point
        PointF midPoint = midPointBtw(p1, p2);
        path.quadTo(p1.x, p1.y, midPoint.x, midPoint.y);
        p1 = points.get(i);
        if(i+1 < points.size()) p2 = points.get(i+1);
    }
    // Draw last line as a straight line while
    // we wait for the next point to be able to calculate
    // the bezier control point
    path.lineTo(p1.x, p1.y);

    canvas.drawPath(path,mPaint);
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.WHITE);
    canvas.drawBitmap(bitmap, 0, 0, null);
}

private PointF midPointBtw(PointF p1, PointF p2) {
    return new PointF(p1.x + (p2.x - p1.x) / 2.0f, p1.y + (p2.y - p1.y) / 2.0f);
}

}

Answer 3

You can achieved this effect by drawing bitmap texture on a canvas. I cropped a little texture from image you shared and used that as texture in canvas :-

Texture image :-

Here is my view class :-

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.MotionEvent;
import android.view.View;

import com.serveroverload.dali.R;

public class CanvasBrushDrawing extends View {
    private Bitmap mBitmapBrush;
    private Vector2 mBitmapBrushDimensions;

    private List<Vector2> mPositions = new ArrayList<Vector2>(100);

    private static final class Vector2 {
        public Vector2(float x, float y) {
            this.x = x;
            this.y = y;
        }

        public final float x;
        public final float y;
    }

    public CanvasBrushDrawing(Context context) {
        super(context);

// load your brush here
        mBitmapBrush = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_launcher);
        mBitmapBrushDimensions = new Vector2(mBitmapBrush.getWidth(), mBitmapBrush.getHeight());

        setBackgroundColor(0xffffffff);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (Vector2 pos : mPositions) {
            canvas.drawBitmap(mBitmapBrush, pos.x, pos.y, null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();
        switch (action) {
        case MotionEvent.ACTION_MOVE:
            final float posX = event.getX();
            final float posY = event.getY();
            mPositions.add(new Vector2(posX - mBitmapBrushDimensions.x / 2, posY - mBitmapBrushDimensions.y / 2));
            invalidate();
        }

        return true;
    }
}

You can use this view in your activity like this :-

setContentView(new CanvasBrushDrawing(MainActivity.this));

Now You just need better texture files from your designer. Hope it helped

You can see complete source code on Git repo https://github.com/hiteshsahu/Dali-PaintBox