溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

view視圖之Canvas+Paint圖形繪制的方法是什么

發(fā)布時間:2023-04-04 11:20:11 來源:億速云 閱讀:129 作者:iii 欄目:開發(fā)技術(shù)

這篇文章主要介紹“view視圖之Canvas+Paint圖形繪制的方法是什么”的相關(guān)知識,小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“view視圖之Canvas+Paint圖形繪制的方法是什么”文章能幫助大家解決問題。

    一、繪圖都需要那些相關(guān)知識

    1、我們平常畫畫一樣,我們需要一張畫布(Canvas)

    2、我們平常畫畫一樣,我們需要一直畫筆(Paint)

    二、我們先來了解下Canvas

    Canvas代表了“依附”于指定View的畫布,他提供了很多形狀的繪制方法,而Paint也提供了一些方法,如下 Canvas常用方法

    view視圖之Canvas+Paint圖形繪制的方法是什么

    Paint常用方法

    view視圖之Canvas+Paint圖形繪制的方法是什么

    還有幾個效果方法

    rotate(float degrees,float px,float py):對Canvas執(zhí)行旋轉(zhuǎn)變換。
    scale(float sx,float sy,float px,float py):對Canvas進(jìn)行縮放變換。
    skew(float sx,float sy):對Canvas執(zhí)行傾斜變換。
    translate(float dx,float dy):移動Canvas。向右移動dx距離(dx為負(fù)數(shù)即向左):向下移動dy(正數(shù)為下移動,負(fù)數(shù)為上移動)

    三、那我們?nèi)绾蝸硎褂眠@些方法進(jìn)行繪制呢?

    1、我們需要創(chuàng)建一個類繼承view

    重寫構(gòu)造方法,和onDraw()方法,而我們就需要在此方法中進(jìn)行繪制

    (1)首先定義一個畫筆對象和一個畫布的顏色
    paint = new Paint(); 
    canvas.drawColor(Color.WHITE);
    (2)我們需要給我的畫筆對象設(shè)置一些屬性,比如畫筆的大小、顏色等!
      //我們給畫筆設(shè)置一些屬性,
    
            paint.setAntiAlias(true);//取消鋸齒
            paint.setColor(Color.BLUE);//畫筆的顏色
            paint.setStyle(Paint.Style.STROKE);//畫筆的粗細(xì)
            paint.setStrokeWidth(4);//畫筆的寬度
            int viewWidth = this.getWidth();//獲取系統(tǒng)屏幕
    
    
    //-------------------------------------------------------------------------
            /*
            * 給我們繪制的圖形進(jìn)行填充,看效果打開代碼即可
            * */
    //        paint.setStyle(Paint.Style.FILL);//充滿填充
    //        paint.setColor(Color.RED);//填充顏色
    
    //-------------------------------------------------------------------------
            /*
            * 設(shè)置圖形漸變,看效果打開代碼即可
            * */
    //        Shader mShader = new LinearGradient(0, 0, 40, 60
    //                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
    //                , null , Shader.TileMode.REPEAT);
    //        paint.setShader(mShader);
    //        //設(shè)置陰影
    //        paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);

    那么如何進(jìn)行繪制,其實(shí)很簡單,直接調(diào)用上面表格中的方法即可,例如繪制圓形,只有一句

      /*
            * 繪制圓形
            * drawCirecle(cx,xy,radius,paint)
            * cx: viewWidth / 10 + 10表示占屏幕的十分之一,并且左偏移10dp
            * xy: viewWidth / 10 + 10表示占屏幕的十分之一,并且上偏移10dp
            * radius: 半徑
            * paint:畫筆
            * */
            canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);

    全部代碼如下

    package tester.ermu.com.canvasdemo;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.view.View;
    
    /**
     * Created by ENZ on 2016/11/17.
     * 1、我們不管繪制什么圖形,都需要兩個工具,就是畫筆和畫布。
     * 2、canvas是畫布
     * 3、Paint是畫筆
     */
    
    public class CanvasText extends View {
        //聲明一個畫筆的對象
        private Paint paint;
    
        public CanvasText(Context context) {
            super(context);
        }
    
        //如果這個不引用,會報錯哦!自定義View,必須在構(gòu)造函數(shù)有AttributeSet attrs這個參數(shù),便于自定義屬性的引用。
        public CanvasText(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        //我們重寫onDraw()方法
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //聲明一個畫筆,設(shè)置一個白色的畫布,這樣筆和畫布都有了
            paint = new Paint();
            canvas.drawColor(Color.WHITE);
    
            //我們給畫筆設(shè)置一些屬性,
    
            paint.setAntiAlias(true);//取消鋸齒
            paint.setColor(Color.BLUE);//畫筆的顏色
            paint.setStyle(Paint.Style.STROKE);//畫筆的粗細(xì)
            paint.setStrokeWidth(4);//畫筆的寬度
            int viewWidth = this.getWidth();//獲取控件屏幕
    
    
    //-------------------------------------------------------------------------
            /*
            * 給我們繪制的圖形進(jìn)行填充,看效果打開代碼即可
            * */
    //        paint.setStyle(Paint.Style.FILL);//充滿填充
    //        paint.setColor(Color.RED);//填充顏色
    
    //-------------------------------------------------------------------------
            /*
            * 設(shè)置圖形漸變,看效果打開代碼即可
            * */
    //        Shader mShader = new LinearGradient(0, 0, 40, 60
    //                ,new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }
    //                , null , Shader.TileMode.REPEAT);
    //        paint.setShader(mShader);
    //        //設(shè)置陰影
    //        paint.setShadowLayer(25 , 20 , 20 , Color.GRAY);
    
    //-------------------------------------------------------------------------
            /*
            * 繪制圓形
            * drawCirecle(cx,xy,radius,paint)
            * radius: 半徑
            * paint:畫筆
            * */
            canvas.drawCircle(viewWidth / 10 + 10, viewWidth / 10 + 10, viewWidth / 10, paint);
    //-------------------------------------------------------------------------
            /*
            * 繪制正方形
            * drawRect(左,上,右,下,畫筆)
            * */
            canvas.drawRect(10 , viewWidth / 5 + 20 , viewWidth / 5 + 10,viewWidth * 2 / 5 + 20 , paint);
    
    //-------------------------------------------------------------------------
            /*
            * 繪制矩形
            * drawRect(左,上,右,下,畫筆)
            * */
            canvas.drawRect(10, viewWidth * 2 / 5 + 30, viewWidth / 5 + 10, viewWidth / 2 + 30, paint);
    
    //-------------------------------------------------------------------------
    
            /*
            * 繪制橢圓
            *1、我們先來一個矩形,
            *
            *
            * */
            RectF re1 = new RectF(10, viewWidth / 2 + 40, 10 + viewWidth / 5 ,viewWidth * 3 / 5 + 40);
            // 繪制圓角矩形
            canvas.drawRoundRect(re1, 15, 15, paint);
    
    //-------------------------------------------------------------------------
            /*
            * 定義一個Path對象,封閉成一個三角形
            * 三角形的繪制,和上面不一樣,這里面需要有3個坐標(biāo)點(diǎn)
            * 連接三個坐標(biāo)點(diǎn)即可(左、右、上下)
            * */
    
            Path path2 = new Path();
            path2.moveTo(10, viewWidth * 9 / 10 + 60);
            path2.lineTo(viewWidth / 5 + 10, viewWidth * 9 / 10 + 60);
            path2.lineTo(viewWidth / 10 + 10, viewWidth * 7 / 10 + 60);
            path2.close();
            canvas.drawPath(path2, paint);
    //-------------------------------------------------------------------------
            /*
            * 定義一個Path對象,封閉成一個五角形
            * 連接五個坐標(biāo)點(diǎn)即可(順時針開始繪制點(diǎn))
            * */
    
            Path path3 = new Path();
            path3.moveTo(10 + viewWidth / 15, viewWidth * 9 / 10 + 70);
            path3.lineTo(10 + viewWidth * 2 / 15, viewWidth * 9 / 10 + 70);
            path3.lineTo(10 + viewWidth / 5, viewWidth + 70);
            path3.lineTo(10 + viewWidth / 10, viewWidth * 11/10 + 70);
            path3.lineTo(10 , viewWidth + 70);
            path3.close();
            canvas.drawPath(path3, paint);
    
    //-------------------------------------------------------------------------
            /*
            * 文字的添加
            *  paint.setTextSize(textSize);//設(shè)置字體大小
            *  paint.setTypeface(typeface);//設(shè)置字體類型搜索
            *  canvas.drawText(text, x, y, paint);//使用畫筆paint
            * */
            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(Color.RED);
            paint.setStrokeWidth(2);
            paint.setTextSize(36);
            canvas.drawText("圓形", 60 + viewWidth * 3 / 5, viewWidth / 10 + 10, paint);
            canvas.drawText("正方形", 60 + viewWidth * 3 / 5, viewWidth * 3 / 10 + 20, paint);
            canvas.drawText("長方形", 60 + viewWidth * 3 / 5, viewWidth * 1 / 2 + 20, paint);
            canvas.drawText("圓角矩形" , 60 + viewWidth * 3 / 5, viewWidth * 3 / 5 + 30, paint);
            canvas.drawText("橢圓", 60 + viewWidth * 3 / 5, viewWidth * 7 / 10 + 30, paint);
            canvas.drawText("三角", 60 + viewWidth * 3 / 5, viewWidth * 9 / 10 + 30, paint);
            canvas.drawText("五角星", 60 + viewWidth * 3 / 5, viewWidth * 11 / 10 + 30, paint);
        }
    }

    四、我們在布局中引用我們自定義的類

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    
        <tester.ermu.com.canvasdemo.CanvasText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
           />
    </LinearLayout>

    五、運(yùn)行效果

    無填充效果

    view視圖之Canvas+Paint圖形繪制的方法是什么

    填充效果

    view視圖之Canvas+Paint圖形繪制的方法是什么

    漸變效果

    view視圖之Canvas+Paint圖形繪制的方法是什么

    關(guān)于“view視圖之Canvas+Paint圖形繪制的方法是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點(diǎn)。

    向AI問一下細(xì)節(jié)

    免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI