path(s) on canvas -> different colors?

relsieg · by **relsieg** » Wed Feb 03, 2010 10:18 pm

Hello,

i was wondering how one can draw on a canvas and use different colors?
I.e. you draw a yellow path and after clickling a button you draw again but with another color.
Currently, after changing the color (by button click) the old path(es) change color, too.
This confuses me because I create a new Paint() object (with a new color) after button click.

Here are the important code snippets:

The paint object

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
        public void setMpaint(int color) {
 
        mPaint = new Paint();
 
        mPaint.setDither(false);
 
        mPaint.setColor(color);
 
        mPaint.setStyle(Paint.Style.STROKE);
 
        mPaint.setStrokeJoin(Paint.Join.ROUND);
 
        mPaint.setStrokeCap(Paint.Cap.ROUND);
 
        mPaint.setStrokeWidth(6);
 
        }
 
Parsed in 0.032 seconds,  using GeSHi 1.0.8.4

gets called at the beginning of the Activity and everytime the button is clicked.

the onDraw method

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
                @Override
 
        public void onDraw(final Canvas canvas) {
 
                        for (Path path : _graphics) {
 
                                canvas.drawPath(path, mPaint);
 
                        }
 
                }
 
Parsed in 0.030 seconds,  using GeSHi 1.0.8.4

I have a couple of coords and draw a (couple of ...) path.

I thought when creating a new Paint() object (after button click), the old path (which was drawn with the old Paint() object) is not influenced. Am I wrong?

Thank you,
R.

BUKsAPPs · by **BUKsAPPs** » Wed Feb 03, 2010 10:32 pm

Each time you call "mPaint = new Paint();" you reassign the mPaint variable to the newly created Paint object. This removes the reference you previously had to the older paint object, and it goes to the garbage collector.

In your onDraw method, each path is drawn with the mPaint object. The variable mPaint only points to a single object, the last one created. So all paths get drawn with the same paint object and therefor the same color.

If you want each path to be drawn with its paint object, you need to do something to keep the paint object around. One option would be to create a collection or array of paint objets just like you do for the path objects, and retrieve the associated paint object for each path when it is drawn. But another option would be to create a new class to hold your paint object and path together, and keep a collection/array of your new class.

relsieg · by **relsieg** » Wed Feb 03, 2010 11:18 pm

Hi BUKsAPPs,

thank you for your quick reply.

I've made a quick test but got the same result:

The list for the Paint() objects:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
private List<Paint> paintList = new ArrayList<Paint>();
 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

add the object to the list everytime the method is called

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
        public void setMpaint(int color) {
 
        mPaint = new Paint();
 
        mPaint.setDither(false);
 
        mPaint.setColor(color);
 
        mPaint.setStyle(Paint.Style.STROKE);
 
        mPaint.setStrokeJoin(Paint.Join.ROUND);
 
        mPaint.setStrokeCap(Paint.Cap.ROUND);
 
        mPaint.setStrokeWidth(6);
 
        paintList.add(mPaint);
 
        }
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

use the latest Paint() object

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
                @Override
 
        public void onDraw(final Canvas canvas) {
 
                        int listLength = paintList.size();
 
                        listLength = listLength - 1;
 
                        Paint currentPaintObject = paintList.get(listLength);
 
                        for (Path path : _graphics) {
 
                                canvas.drawPath(path, currentPaintObject);
 
                        }
 
                }
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

I guess the reason is - as you've said - because Paint() is a single object.

But another option would be to create a new class to hold your paint object and path together, and keep a collection/array of your new class.

I'm not quite sure how to realize that (in conjunction with the iterator).

regards,
R.

BUKsAPPs · by **BUKsAPPs** » Thu Feb 04, 2010 1:43 am

Your onDraw is still dawing all of the paths with the last paint object(currentPaintObject). Try something more like:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
        @Override 
 
        public void onDraw(final Canvas canvas) { 
 
               int iIndex = 0
 
               Paint currentPaintObject; 
 
               for (Path path : _graphics) { 
 
                    currentPaintObject = paintList.get(iIndex);
 
                    canvas.drawPath(path, currentPaintObject); 
 
                    iIndex++;
 
               } 
 
          } 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

That way each path will be redrawn each onDraw with the paint object that was created for it. This code does not do any checking to make sure that paintList length is the same as the path count, but it should be if I understand how you are creating your paint objects. This is why I recomend creating a class to hold a path and its paint object, and keeping a list of the class. That way each path will always have its own paint object.

relsieg · by **relsieg** » Thu Feb 04, 2010 8:39 am

Ah okay, it makes sense now :-)

I'll try it as soon as I'm back from work.

Thank you.

relsieg · by **relsieg** » Thu Feb 04, 2010 9:30 pm

Sooo ...
It's done :-)

Everytime I add a Path oject to the pathlist, I create a Paint object and add it to another list:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
        public boolean onTouchEvent(MotionEvent event) {
 
            synchronized (_thread.getSurfaceHolder()) {
 
                if(event.getAction() == MotionEvent.ACTION_DOWN){
 
                        path = new Path();
 
                        path.moveTo(event.getX(), event.getY());
 
                        path.lineTo(event.getX(), event.getY());
 
                }else if(event.getAction() == MotionEvent.ACTION_MOVE){
 
                        setMpaint(); // create Paint object and add to the paintlist
 
                        path.lineTo(event.getX(), event.getY());
 
                        _graphics.add(path);
 
                        path = new Path();
 
                        path.moveTo(event.getX(), event.getY());
 
..
 
Parsed in 0.037 seconds,  using GeSHi 1.0.8.4

Thank you very much for your help :-)

thanhtam_it · by **thanhtam_it** » Mon Jan 14, 2013 6:46 am

Can you share the source code with me?
I have the same problem but i can solve it.

Thansk in advance!

path(s) on canvas -> different colors?

path(s) on canvas -> different colors?

Re: path(s) on canvas -> different colors?

Who is online