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

2023-02-28 18:00:38

引言

上文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自識別塗鴉工具類的資料請關注it145.com其它相關文章！

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

目錄

引言

總結

熱門文章