Graphics with Canvas

rodscarletΛογισμικό & κατασκευή λογ/κού

14 Δεκ 2013 (πριν από 3 χρόνια και 5 μήνες)

51 εμφανίσεις

Graphics with Canvas

Approaches for Graphics


Load image from /res/
drawable


Best for static images


OpenGL ES


3D graphics (i.e., transforms such as spin can be
applied to graphical objects)


Draw on Canvas or
SurfaceView


Canvas for drawing within the main thread


SurfaceView

is faster, and better for detailed graphics


Note, if your main thread take too long, the OS will kill it,
and it will be difficult to debug.

Drawable

shapes


Make new app, edu.eleg454.Graphics1


In
onCreate

is
setContentView
(
R.layout.main
)


Instead of the view generated by
R.layout.main
, we use our own, which extends View


In Graphics1 class, add


private class
MyView

extends View
{

public
MyView
(Context
context
) {



super(context
);



}




@
Override



protected
void
onDraw
(Canvas
canvas
) {




ShapeDrawable

mDrawable

=
new
ShapeDrawable
(new
OvalShape
());




mDrawable.getPaint
().
setColor
(0xff74AC23
);




mDrawable.setBounds
(10
, 10, 310, 60
);




mDrawable.draw
(canvas
);



}


}


Then, in
onCreate
, replace
setContentView
(
R.layout.main
); with
setContentView
(
new
MyView
(this
));



Run



Besides
OvalShape
,
ArcShape
,
PathShape
,
RoundRectShape
, and Shape



View Widget


The previous method required us to replace
setContentView
(
R.layout.
main
);


This resulted in the entire view being controlled by our view


E.g., we could not have a button in the view where we place the button with the layout editor


To fix this, we add a view widget


Move
MyView

to separate class


Also, in
MyView

add



public
MyView
(Context
context
,
AttributeSet

attrs
)
{




super(context
,
attrs
);



}


Go to main.xml graphical layout editor


drag linear layout


Drag text box


So the layout is
TextView
, linear layout,
TextView


Go to main.xml (not the editor)


Find second <
LinearLayout

….> </
LinearLayout
>


Before </
LinearLayout
>, add


<edu.TestGraphics1.MyView
android:layout_width
=
"
wrap_content
"
android:layout_height
="
wrap_content
"
android:id
="@+id/View01"></edu.TestGraphics1.MyView
>


Note that
edu.TestGraphics1.MyView is the name of the separate class. If another name is used, then this
name should be changed


Run



Canvas Drawing


Canvas has many drawing functions, e.g.,
drawPath
(Path
path
, Paint
paint
)


Path: sequence of graphical objects


Path
path

= new Path();


Make line between two points


path.moveTo
(10,10); // starting place


path.lineTo
(60,60);


add circle somewhere


path.addCircle
(50,250,20,
Path.Direction.
CCW
);


Paint


for setting color and line width


Paint
paint

=
new Paint
();


paint.setDither
(
true
);


paint.setColor
(
Color.
RED
);


paint.setStyle
(
Paint.Style.
FILL_AND_STROKE
);


paint.setStrokeJoin
(
Paint.Join.
ROUND
);


paint.setStrokeCap
(
Paint.Cap.
ROUND
);


paint.setStrokeWidth
(2);



Draw view

canvas.drawPath
(path
, paint
);



run





notes


Use invalidate() to force redraw


In
TestGraphics
, add variable


MyView

myView
;


In
TestGraphics.onCreate
(), add


myView

= (
MyView
)
findViewById
(R.id.
View01
);


Then
myView.invalidate
(); will force redraw



Is canvas documentation for more graphics


E.g.,
drawBitmap

has several functions


Avoid declaring and setting variables in
onDraw
, instead,
setting them elsewhere and access them from draw


Use invalidate() to force redraw


Use
SurfaceView

for faster screen drawing