Kotlin 開發第 24 天 Painter (Canvas)

2018鐵人賽 android kotlin canvas album

陳董 Don

2017-12-27 08:03:21

3150 瀏覽

分享至

Painter
提供一個畫板，讓使用者可以通過手指在上面畫畫。
可以將畫好的內容存到相簿當中。

Components

View
Canvas
File
Bitmap

在 Canvas 上畫圖

Paint 對象

Paint 對象用來定義畫筆的風格，比如顏色、粗細等等，比如

Paint.style - 繪製模式
paint.setColor(int Color) - 顏色
Paint.strokeWidth - 線條寬度
Paint.isAntiAlias - 抗鋸齒開關

    private fun setupPaint() {
        paint = Paint()
        paint.setColor(Color.GREEN)
        paint.strokeWidth = 5f
        paint.style = Paint.Style.STROKE
        paint.strokeCap = Paint.Cap.ROUND
        paint.isAntiAlias = true
    }

可以到官方文件上查更多有關 Canvas 和 Paint 的資料

PaintBoard

我們建立一個 View 來讓使用者可以在上面畫畫。

Canvas 雖然是一個畫布，但實際上繪畫過程中所產生的內容都是存在 Canvas 的 bitmap 屬性中。

所以我們這裡初始化了一個 bitmap 放到 Canvas 中，在之後也會使用這個 bitmap 來將畫好的圖片存到相簿中。

（如果對 ARGB_8888 有疑慮可以參考之前的文章）

    private var paint: Paint
    private var bitmap: Bitmap
    private var mCanvas: Canvas

    private var startX:Float = 0f
    private var startY:Float = 0f

    init {
        // bitmap
        val width = Resources.getSystem().displayMetrics.widthPixels
        bitmap = Bitmap.createBitmap(width, 800, Bitmap.Config.ARGB_8888)

        // Canvas
        mCanvas = Canvas(bitmap)
        mCanvas.drawColor(Color.GRAY)

        // Paint
        paint = Paint()
        paint.setColor(Color.BLACK)
        paint.setStrokeWidth(10f)
    }

saveBitmap

    fun saveBitmap(stream: OutputStream) {
        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, stream)

    }

在 layout/activity_main.xml 中，引入 PaintBoard

    <devdon.com.painter.PaintBoard
        android:id="@+id/layout_paint_board"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

BoardActivity

在 AndroidManifest.xml 中，加入存圖片的權限請求

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

判斷使用者是否同意保存圖片，如果尚未允許則跳出請求

    private fun checkWritable():Boolean {
        if(ActivityCompat.checkSelfPermission(this, Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED){
            ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE),0)
            return false
        } else {
            return true
        }
    }

當使用者點下 SAVE 的時候，將圖片存到主要儲存卡上

而圖片的檔名根據當下的時間產生一個檔名（如果是同一個檔名會覆蓋）。

    private val saveClickHandler = View.OnClickListener { view ->
        if(checkWritable()){
            try {
                val fileName = (System.currentTimeMillis() / 1000).toString() + ".jpg"
                val file = File(Environment.getExternalStorageDirectory(), fileName)
                val stream = FileOutputStream(file)
                paintBoard.saveBitmap(stream)
                stream.close()

                val intent = Intent()
                intent.setAction(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE)
                intent.setData(Uri.fromFile(Environment.getExternalStorageDirectory()))
                sendBroadcast(intent)

                Toast.makeText(this, "Save Success", Toast.LENGTH_SHORT).show()

            } catch(e:Exception) {
                println(e)
                Toast.makeText(this, "Save Failed", Toast.LENGTH_SHORT).show()

            }
        }

    }

在相簿裡面就會看到我們剛才畫好的內容