Android Combat Tip 29: Canvas Canvases

<span id="Label3"><p><p>Tagged with: android canvas android artboard graphic</p></p><p><p>The Android framework provides some of the 2D paint api,android.graphics packages that are one of Them.<br>To draw something, you need 4 elements (or components) to do it together:<br>* Bitmap: bitmap to keep (hold) those pixels<br>* Canvas: Canvas to respond to draw (draw) calls (and write it to Bitmap)<br>* Brushes: paint describes the colors and styles of painting, etc.<br>* "pigments": drawing primitive, such as rectangles, paths, text, bitmaps and other elements</p></p><p><p>Canvas is an important part of this, and today it's the basic way to use Canvas.</p></p>first, the basic Draw method<p><p>The Android.graphics.Canvas class provides a lot of "painting" methods that allow the canvas to have a rich and colorful drawing Ability. For example: draw points, lines, rectangles, ellipses, circles, text, and so On. The following examples demonstrate the use of these METHODS.<br>Start by building a class that inherits from View. Let the canvas appear on the View (this is also the way to customize the UI component).<br>Reload the OnDraw method so that these painting steps are done in ONDRAW.<br>The source code is as Follows:</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-keyword"><span class="hljs-keyword"></span> package</span>com.lazytech.canvasdemo;<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">paintboard</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">Paintboard</span></span>(context context, AttributeSet Attrs) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs); }<span class="hljs-annotation"><span class="hljs-annotation">@Override</span></span> <span class="hljs-keyword"><span class="hljs-keyword">protected</span></span> <span class="hljs-keyword"><span class="hljs-keyword">void</span></span> <span class="hljs-title"><span class="hljs-title">OnDraw</span></span>(canvas Canvas) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>. OnDraw (canvas);<span class="hljs-comment"><span class="hljs-comment">//paint a circle</span></span>Paint paint =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Paint (); Paint.setcolor (color.blue); Paint.setstyle (Paint.Style.STROKE); Paint.setstrokewidth (<span class="hljs-number"><span class="hljs-number">Ten</span></span>); Canvas.drawcircle (<span class="hljs-number"><span class="hljs-number"></span> -</span>,<span class="hljs-number"><span class="hljs-number"></span> the</span>,<span class="hljs-number"><span class="hljs-number"></span> -</span>, paint);<span class="hljs-comment"><span class="hljs-comment">//paint String</span></span>Paint =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Paint (); Paint.setcolor (color.yellow); Paint.settextsize (<span class="hljs-number"><span class="hljs-number"></span> -</span>); Canvas.drawtext (<span class="hljs-string"><span class="hljs-string">"My name is linc!"</span></span>,<span class="hljs-number"><span class="hljs-number">245</span></span>,<span class="hljs-number"><span class="hljs-number"></span> $</span>, paint);<span class="hljs-comment"><span class="hljs-comment">//draw</span> line</span>Paint =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Paint (); Paint.setcolor (color.black); Canvas.drawline (<span class="hljs-number"><span class="hljs-number">245</span></span>,<span class="hljs-number"><span class="hljs-number">145</span></span>,<span class="hljs-number"><span class="hljs-number"></span> -</span>,<span class="hljs-number"><span class="hljs-number">145</span></span>, paint); }}</code></pre><p><p>Just add this view to the Activity's layout file. As follows:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs avrasm"> <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.lazytech</span><span class="hljs-preprocessor">.canvasdemo</span><span class="hljs-preprocessor">.PaintBoard</span> android:id=<span class="hljs-string">"@+id/paint_board"</span> android:layout_width=<span class="hljs-string">"match_parent"</span> android:layout_below=<span class="hljs-string">"@id/text"</span> android:layout_height=<span class="hljs-string">"200dp"</span> android:background=<span class="hljs-string">"@android:color/holo_green_light"</span> /></code></pre></pre>Second Artboards<p><p>With the foundation above, we can play a bit and write a demo of the Artboard. As your fingers slide, your art traces are left on the Screen. So how is this artboard going to be implemented?<br>There are a few points to catch:<br>* Capture your Finger's sliding trajectory. Overloaded Ontouchevent method to Implement.<br>* Update your drawing in real Time. Use the Invalidate method to notify OnDraw REDRAW.<br>* Save Our Work. Save the bitmap as a file.</p></p><p><p>With the above points in order, let's get to Work. The first is to build an artboard class PaintBoard2 inherit from View. Three important elements are used as class members and are initialized in Constructors.</p></p><pre class="prettyprint"><code class=" hljs java"><span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-class"><span class="hljs-class"> <span class="hljs-keyword">class</span> <span class="hljs-title">PaintBoard2</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span></span> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Paint Mpaint =<span class="hljs-keyword"><span class="hljs-keyword">NULL</span></span>;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Bitmap Mbitmap =<span class="hljs-keyword"><span class="hljs-keyword">NULL</span></span>;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span>Canvas Mbitmapcanvas =<span class="hljs-keyword"><span class="hljs-keyword">NULL</span></span>;<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span> <span class="hljs-title"><span class="hljs-title">PaintBoard2</span></span>(context context, AttributeSet Attrs) {<span class="hljs-keyword"><span class="hljs-keyword">Super</span></span>(context, attrs); Mbitmap = Bitmap.createbitmap (<span class="hljs-number"><span class="hljs-number"></span> -</span>,<span class="hljs-number"><span class="hljs-number"></span> $</span>, Bitmap.Config.ARGB_8888); Mbitmapcanvas =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Canvas (mbitmap); Mbitmapcanvas.drawcolor (color.gray); Mpaint =<span class="hljs-keyword"><span class="hljs-keyword">New</span></span>Paint (); Mpaint.setcolor (color.red); Mpaint.setstrokewidth (<span class="hljs-number"><span class="hljs-number">6</span></span>); }</code></pre><p><p>As you swipe your finger to draw the line:</p></p><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">float</span></span>startX;<span class="hljs-keyword"><span class="hljs-keyword">Private</span></span> <span class="hljs-keyword"><span class="hljs-keyword">float</span></span>starty; @Override<span class="hljs-keyword"><span class="hljs-keyword"></span> public</span>Boolean<span class="hljs-title"><span class="hljs-title">ontouchevent</span></span>(motionevent<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>) {<span class="hljs-keyword"><span class="hljs-keyword">Switch</span></span>(<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. getaction ()) {<span class="hljs-keyword"><span class="hljs-keyword"></span> case</span>MotionEvent.ACTION_DOWN:startX =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetX (); Starty =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetY ();<span class="hljs-keyword"><span class="hljs-keyword"></span> break</span>;<span class="hljs-keyword"><span class="hljs-keyword"></span> case</span>Motionevent.action_move:<span class="hljs-keyword"><span class="hljs-keyword">float</span></span>STOPX =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetX ();<span class="hljs-keyword"><span class="hljs-keyword">float</span></span>Stopy =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetY (); LOG.E (TAG,<span class="hljs-string"><span class="hljs-string">"ontouchevent-action_move\nstartx is"</span></span>+startx+<span class="hljs-string"><span class="hljs-string">"starty is"</span></span>+starty+<span class="hljs-string"><span class="hljs-string">"stopx is"</span></span>+stopx+<span class="hljs-string"><span class="hljs-string">"stopy is"</span></span>+stopy); Mbitmapcanvas.drawline (startX, starty, stopx, stopy, mpaint); StartX =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetX (); Starty =<span class="hljs-keyword"><span class="hljs-keyword">Event</span></span>. GetY (); Invalidate ();<span class="hljs-comment"><span class="hljs-comment">//call OnDraw ()</span></span> <span class="hljs-keyword"><span class="hljs-keyword"></span> break</span>; }<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> <span class="hljs-keyword"><span class="hljs-keyword">true</span></span>; }</code></pre><p><p>Draw Bitmap When Ondraw:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs java"> <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">protected</span><span class="hljs-keyword">void</span><span class="hljs-title">onDraw</span>(Canvas canvas) { <span class="hljs-keyword">if</span><span class="hljs-keyword">null</span>) { <span class="hljs-number">0</span><span class="hljs-number">0</span>, mPaint); } }</code></pre></pre><p><p>Provides a way to save a bitmap by storing the bitmap in Outputstream.</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs cs"> <span class="hljs-keyword">public</span><span class="hljs-keyword">void</span><span class="hljs-title">saveBitmap</span>(OutputStream stream) { <span class="hljs-keyword">if</span><span class="hljs-keyword">null</span>) { <span class="hljs-number">100</span>, stream); } }</code></pre></pre><p><p>How is it called in the activity?<br>Layout of Activity:</p></p><pre class="prettyprint"><code class=" hljs avrasm"><code class="hljs avrasm"> <<span class="hljs-keyword">com </span> <span class="hljs-preprocessor">.lazytech </span> <span class="hljs-preprocessor">.canvasdemo </span> <span class="hljs-preprocessor" . paintboard < span> 2 Android:id=<span class="hljs-string"> "@+id/paint_board2" </span> Android:layout_below= <spa n class="hljs-string"> "@id/paint_board" </spa></span> Android:layout_width=<span class="hljs-string"> "match_parent" <!-- span--> Android:layout_height=<span class="hljs-string"> "200dp" </span>/> <button Android:id=<span cl ass="hljs-string"> "@+id/btn_save" </span> Android:text=<span class="hljs-string"> "save" </span> Android:layout _below=<span class="hljs-string"> "@id/paint_board2" </span> Android:onclick=<span class="hljs-string"> " onsaveclicked "</span> android:layout_width=<span class=" hljs-string ">" wrap_content "</span> android:layout_he Ight=<span class="hljs-string"> "wrap_content" </span>/> </span></code></code></pre><p><p>Define PAINTBOARD2 as a member of the activity and initialize it in oncreate:</p></p><pre class="prettyprint"><pre class="prettyprint"><code class=" hljs java"><span class="hljs-keyword">private</span> PaintBoard2 paintBoard2; <span class="hljs-annotation">@Override</span> <span class="hljs-keyword">protected</span><span class="hljs-keyword">void</span><span class="hljs-title">onCreate</span>(Bundle savedInstanceState) { <span class="hljs-keyword">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); paintBoard2 = (PaintBoard2)findViewById(R.id.paint_board2); }</code></pre></pre><p><p>Click the Save button to Process:</p></p><pre class="prettyprint"><code class=" hljs avrasm">public void onsaveclicked (view view) {try {file file = new file (environment<span class="hljs-preprocessor"><span class="hljs-preprocessor">. getExternalStorageDirectory</span></span>(), System<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Currenttimemillis</span></span>() +<span class="hljs-string"><span class="hljs-string">". jpg"</span></span>)<span class="hljs-comment"><span class="hljs-comment">;</span></span>OutputStream stream = new FileOutputStream (file)<span class="hljs-comment"><span class="hljs-comment">;</span></span>PaintBoard2<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Savebitmap</span></span>(stream)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Stream<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Close</span></span>()<span class="hljs-comment"><span class="hljs-comment">;</span></span>Send broadcast to Media to update data Intent Intent = new Intent ()<span class="hljs-comment"><span class="hljs-comment">;</span></span>Intent<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Setaction</span></span>(Intent<span class="hljs-preprocessor"><span class="hljs-preprocessor">. ACTION</span></span>_media_mounted)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Intent<span class="hljs-preprocessor"><span class="hljs-preprocessor">. SetData</span></span>(Uri<span class="hljs-preprocessor"><span class="hljs-preprocessor">. FromFile</span></span>(environment<span class="hljs-preprocessor"><span class="hljs-preprocessor">. getExternalStorageDirectory</span></span>()))<span class="hljs-comment"><span class="hljs-comment">;</span></span>Sendbroadcast (intent)<span class="hljs-comment"><span class="hljs-comment">;</span></span>Toast<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Maketext</span></span>(this,<span class="hljs-string"><span class="hljs-string">"save success"</span></span>, Toast<span class="hljs-preprocessor"><span class="hljs-preprocessor">. LENGTH</span></span>_short)<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Show</span></span>()<span class="hljs-comment"><span class="hljs-comment">;</span></span>} catch (Exception E) {Toast<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Maketext</span></span>(this,<span class="hljs-string"><span class="hljs-string">"save failed"</span></span>, Toast<span class="hljs-preprocessor"><span class="hljs-preprocessor">. LENGTH</span></span>_short)<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Show</span></span>()<span class="hljs-comment"><span class="hljs-comment">;</span></span>E<span class="hljs-preprocessor"><span class="hljs-preprocessor">. Printstacktrace</span></span>()<span class="hljs-comment"><span class="hljs-comment">;</span></span>}</code></pre><p><p>Style:<br></p></p><p><p>Complete the source code reference my open source demo project:<br>Https://code.csdn.net/lincyang/androidwidgetdemo</p></p><p><p>Reference:<br>Http://www.cnblogs.com/menlsh/archive/2012/11/18/2776003.html<br>Http://www.cnblogs.com/wuyou/p/3658691.html</p></p> <p><p>Android Combat Tip 29: Canvas Canvases</p></p></span>