Android自定義有限制區域圖例角度自識別塗鴉工具類中篇

Posted on by

引言

上文Android：實現一個自定義有限制區域的圖例（角度自識別）塗鴉工具類（上）中我們已經實現瞭自定義View簽名的功能，包含撤回、清除方法。但我們最終要實現的功能還不止如此，這篇我們就來說說給限制區域內簽名的實現過程。

試想，既然是自定義View瞭，那麼如果要限制用戶在指定區域內簽名，最好的辦法不是在觸摸的時候通過坐標點的判斷添加一些攔截嗎？沒錯，起初我也是這麼想的，但是再看到限制區域的圖形後，我陷入瞭深深的沉思……

沒錯，就是這樣的圖，這還是其中的一張，後期指不定還會有多少張這樣形狀復雜的圖。單看組成就不得瞭，都是些大小不一的圓相交相切，圓心散落在各個位置。但從自定義角度繪制這樣的圖形相信難度也不小，就更不要說通過坐標點的計算來攔截觸摸事件的方式限制簽名范圍瞭。

此時絕望的我突然想起之前項目中的一個上傳圖片功能，當時是利用瞭ViewGroup作為遮罩來簡單實現的，那麼，這個功能其實也可如此。我們大可不必大費周章的采用觸摸事件判斷呀，超出范圍如果使用畫佈遮擋其實也能滿足。結合項目需求最後塗鴉完成後，需要生成圖片，我們也可通過View自帶的Draw方法生成圖片，咱們說幹就幹。

首先，自定義一個ViewGroup（作為遮罩、生成圖片使用）

class FaceViewGroup(context: Context, attrs: AttributeSet? = null) :
    LinearLayout(context, attrs, 0) {
    private var mWith = 0
    private var mHight = 0
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWith = MeasureSpec.getSize(widthMeasureSpec)
        mHight = MeasureSpec.getSize(heightMeasureSpec)
    }
    override fun dispatchDraw(canvas: Canvas?) {
        ......
    }
}

這裡我們需要瞭解下dispatchDraw方法：

繪制 ViewGroup 中的子 View 時，會調用 dispatchDraw(Canvas canvas)，需要註意的是，是在繪制 ViewGroup 自己之後，也就是在 onDraw(Canvas canvas) 之後。

最後才會觸發這個方法，所以利用它繪制遮罩再合適不過，我們可以讓UI將各種復雜的圖形切出來保存再本地，再利用dispatchDraw方法中的畫佈將圖片繪制在中心。切圖時需要註意，我們需要繪制的區域需要透明。

//本地區域圖
val bitmap = BitmapFactory.decodeResource(resources,R.mipmap.ic_face)
//繪制到ViewGroup中
canvas?.drawBitmap(bitmap, (mWith-bitmap.width)/2f, (mHight-bitmap.height)/2f, Paint().apply {
            color = Color.WHITE
            isAntiAlias = true
            style = Paint.Style.FILL
        })

在Xml：

<com.example.FaceViewGroup
    android:id="@+id/group"
    android:layout_width="414dp"
    android:layout_height="280dp">
    <com.example.SignatureView
        android:id="@+id/linePath"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="2dp" />
</com.example.FaceViewGroup>

SignatureView就是我們上篇講到的自定義View，運行起來發現效果還不錯，確實實現瞭限制的問題，雖然不是真正意義上的限制，但效果一樣，滿足需求瞭。最後生成圖片：

val bitmap: Bitmap = Bitmap.createBitmap(
    resources.displayMetrics,
    binding.group.width,
    binding.group.height,
    Bitmap.Config.ARGB_8888
)
val canvas = Canvas(bitmap)
binding.group.setBackgroundColor(ContextCompat.getColor(this, R.color.white))
//解決白底問題
canvas.drawRect(
    Rect(
        0,
        0,
        bitmap.width,
        bitmap.height
    ), Paint().apply {
        color = Color.WHITE
        style = Paint.Style.FILL
    })
binding.group.draw(canvas)

這裡說下，如果不設置背景色，通過View的draw方式生成的圖片是黑底的。另外還有個值得註意的點，如果使用瞭三方ui適配方案，你會發現無論怎麼調整視圖和Bitmap最後生成的圖片和實際繪制看到的圖片存在問題—繪制的內容偏離瞭限制區域，最終發現需要進行適配，也就是這一步，參考資料：

//這裡需要添加resources.displayMetrics才能適配寬高
val bitmap: Bitmap = Bitmap.createBitmap(
    resources.displayMetrics,
    binding.group.width,
    binding.group.height,
    Bitmap.Config.ARGB_8888
)

最開始一直以為是橫豎屏的切換導致位置偏移，實則是使用瞭AndroidAutoSize使得尺寸發生變化，所以在創建Bitmap時需要將適配過後的displayMetrics傳入。到此，我們就完成瞭異性區域內塗鴉功能。

總結

有時候不能被固定思維所困住，換種思路或許能讓復雜的問題輕松解決，但還是需要多積累經驗才行。如果沒有之前的自定義View和上傳圖片的經驗，或許實現上述功能還不能找到簡單的實現方式。好瞭，這篇就先介紹到這裡，下篇我們將基於本篇的實現上，添加根據手勢自動判斷方向，實現圖例按照手勢移動的方向顯示。

以上就是Android自定義有限制區域圖例角度自識別塗鴉工具類詳解的詳細內容，更多關於Android自識別塗鴉工具類的資料請關註WalkonNet其它相關文章！

推薦閱讀：