CODEWITHSUNDEEP
androidcanvas
Ali Elgazar
Ali Elgazar

Reputation: 777

Changing the color of part of a path while it is being drawn

I managed to create my own custom path drawing application and it is as follows 

public class CanvasView extends View {
Context context;
HashMap<Integer,PathWrapper> locToPath=new HashMap<>();
ArrayList<PathWrapper> activePaths=new ArrayList<>();
CoMingleAndroidRuntime<Screenshare> screenRuntime;
boolean inited=false;
Integer myLocation;
public CanvasView(Context context,AttributeSet attr) {
    super(context, attr);
    setWillNotDraw(false);
    this.context = context;
}

public void init(CoMingleAndroidRuntime<Screenshare> screenRuntime){
    inited=true;
    this.screenRuntime=screenRuntime;
    this.myLocation=screenRuntime.getLocation();
    addPath(myLocation);
    invalidate();
}

public void addPath(int Location){
    Paint mPaint=new Paint();
    mPaint.setColor(Color.BLACK);
    mPaint.setAlpha(195);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeWidth(50f);
    locToPath.put(Location, new PathWrapper(new Path(), mPaint, Location));
}
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for(PathWrapper path:activePaths){
        canvas.drawPath(path.path, path.paint);
    }
    invalidate();
}
public void respondActionColorChanged(int R,int G,int B){
    locToPath.get(myLocation).paint.setColor(Color.rgb(R, G, B));
}
public void respondActionColorChanged(int loc,int R,int G,int B){
    locToPath.get(loc).paint.setColor(Color.rgb(R, G, B));
}
public void respondActionDown(final Integer loc, int xTouch,int yTouch){
    activePaths.add(locToPath.get(loc));
    locToPath.get(loc).path.moveTo(xTouch, yTouch);
    locToPath.get(loc).lastPoint = new Point(xTouch, yTouch);
    if(loc==myLocation){
        screenRuntime.getRewriteMachine().addActionDown(xTouch, yTouch);
    }
}
public void respondActionMove(final Integer loc,int xTouch,int yTouch){
    float dx = Math.abs(xTouch - locToPath.get(loc).lastPoint.x);
    float dy = Math.abs(yTouch - locToPath.get(loc).lastPoint.y);
    if (dx >= 5 || dy >= 5) {
        locToPath.get(loc).path.quadTo(locToPath.get(loc).lastPoint.x, locToPath.get(loc).lastPoint.y, (xTouch + locToPath.get(loc).lastPoint.x) / 2, (yTouch + locToPath.get(loc).lastPoint.y) / 2);
        locToPath.get(loc).lastPoint = new Point(xTouch, yTouch);
        if(loc==myLocation){
            screenRuntime.getRewriteMachine().addActionMove(xTouch, yTouch);
        }
    }

}
public void respondActionUp(final Integer loc,int x,int y){
    locToPath.get(loc).path.lineTo(locToPath.get(loc).lastPoint.x, locToPath.get(loc).lastPoint.y);

    if(loc==myLocation){
        screenRuntime.getRewriteMachine().addActionUp(x, y);
    }
    activePaths.remove(locToPath.get(loc));
    locToPath.get(loc).path.reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
    if(inited) {
        int xTouch;
        int yTouch;
        xTouch = (int) event.getX(0);
        yTouch = (int) event.getY(0);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                respondActionDown(myLocation,xTouch,yTouch);
                break;
            case MotionEvent.ACTION_MOVE:
                respondActionMove(myLocation, xTouch,yTouch);
                break;
            case MotionEvent.ACTION_UP:
                respondActionUp(myLocation, xTouch,yTouch);
                break;
        }
        return true;
    }
    return false;
}

This code works perfectly for my app (Ignore the location stuff and the runtime and rewriteMachine stuff).

My question is, I would like to have parts of the path be colored differently, the ultimate goal is that I would like only the last few pixels of the path to be visible and the remainder should have an Alpha of 0, such that when the user draws, he only sees the last few pixels of the path which then slowly turns invisible. Is this possible? and if so how would I do it?

Thanks.

Upvotes: 4

Views: 2138

Answers (1)

Gavriel
Gavriel

Reputation: 19237

Instead of adding points to a path, create a list of paths, and every time add a new path to the list that has only a small chunk that starts at the end point of the previous path, and has only one other point (end-point). Then you can draw each path with a different color:

Paint mPaint=new Paint();
mPaint.setColor(Color.BLACK);
//rest of mPaint...
canvas.drawPath(path1, mPaint);

mPaint=new Paint();
mPaint.setColor(Color.BLUE);
//rest of mPaint...
canvas.drawPath(path2, mPaint);

Note that path1 is different from path2, and more importantly you create a new mPaint for each color. I'm not sure if it would work if you just would call mPaint.setColor(Color.BLUE) on the previously created and used paint.

Upvotes: 5

Related Questions