Android基于Matrix绘制PaintDrawable设置BitmapShader，以手指触点为中心显示原图的圆切图，Kotlin（4）

最新推荐文章于 2024-10-01 21:22:21 发布

zhangphil

最新推荐文章于 2024-10-01 21:22:21 发布

阅读量784

点赞数 11

分类专栏： Android kotlin 文章标签： android kotlin

本文链接：https://blog.csdn.net/zhangphil/article/details/135572357

版权

kotlin 同时被 2 个专栏收录

310 篇文章 0 订阅

订阅专栏

Android

244 篇文章 7 订阅

订阅专栏

这篇文章介绍了如何使用Android和Kotlin在ImageView中，通过Matrix和BitmapShader实现手指在图片上的滑动轨迹跟踪，并在下方的切图中显示手指位置和轨迹。作者还提出了两个改进点：限制切图范围和仅在切图内显示轨迹线。

摘要由CSDN通过智能技术生成

Android基于Matrix绘制PaintDrawable设置BitmapShader，以手指触点为中心显示原图的圆切图，Kotlin（4）

这篇 Android基于Matrix绘制PaintDrawable设置BitmapShader，以手指触点为中心显示原图像圆图，Kotlin（3）-CSDN博客虽然实现了上图绘制手指在屏幕滑动的轨迹，且在下面的切图中用中心圆圈标记出当前手指在图中的位置，但没有在下面的切图中也绘制出与上图的手指滑动轨迹，下面实现这个功能：手指在原图中滑动，在切图中用圆圈标记手指的位置，同时在切图中复刻手指滑动的轨迹。

import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapShader
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Matrix
import android.graphics.Paint
import android.graphics.Path
import android.graphics.RectF
import android.graphics.Shader.TileMode
import android.graphics.drawable.BitmapDrawable
import android.graphics.drawable.PaintDrawable
import android.os.Bundle
import android.util.AttributeSet
import android.view.MotionEvent
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.AppCompatImageView


class MainActivity : AppCompatActivity() {
    private var iv: MyImageView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        iv = findViewById(R.id.iv)

        val r = findViewById<ImageView>(R.id.result)
        iv?.setTestImageView(r)
    }
}

class MyImageView : AppCompatImageView {
    private var mCurX = 0
    private var mCurY = 0

    private val mPath1 = Path()
    private val mPath2 = Path()
    private val mPathPaint1 = Paint()
    private val mPathPaint2 = Paint()
    private val mCirclePaint = Paint()

    private var mNewBmp: Bitmap? = null
    private var mSrcBmp: Bitmap? = null
    private var mIsDraw = false
    private val mRadius = 300f

    private var mDrawable: PaintDrawable? = null

    private var testIV: ImageView? = null

    constructor(ctx: Context, attrs: AttributeSet) : super(ctx, attrs) {
        mSrcBmp = (drawable as BitmapDrawable).bitmap

        mPathPaint1.style = Paint.Style.STROKE
        mPathPaint1.strokeWidth = 15f
        mPathPaint1.isAntiAlias = true
        mPathPaint1.color = Color.RED

        mPathPaint2.style = Paint.Style.STROKE
        mPathPaint2.strokeWidth = 20f
        mPathPaint2.isAntiAlias = true
        mPathPaint2.color = Color.YELLOW

        mCirclePaint.style = Paint.Style.STROKE
        mCirclePaint.strokeWidth = 25f
        mCirclePaint.isAntiAlias = true
        mCirclePaint.color = Color.BLUE
    }

    fun setTestImageView(iv: ImageView?) {
        testIV = iv
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        mCurX = event.x.toInt()
        mCurY = event.y.toInt()

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                mPath1.moveTo(event.x, event.y)
                mPath2.moveTo(event.x, event.y)

                mIsDraw = true
            }

            MotionEvent.ACTION_MOVE -> {
                mPath1.lineTo(event.x, event.y)
                mPath2.lineTo(event.x, event.y)
            }

            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                mIsDraw = false

                //抬手后，清除手指轨迹。
                myClear()
            }
        }

        invalidate()

        return true
    }

    private fun myClear() {
        //清除历史轨迹。
        mPath1.reset()
        mPath2.reset()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        if (mIsDraw) {
            myDraw()

            canvas.drawPath(mPath1, mPathPaint1)
        }
    }

    private fun myDraw() {
        val shader = BitmapShader(Bitmap.createScaledBitmap(mSrcBmp!!, this.width, this.height, true), TileMode.DECAL, TileMode.DECAL)
        mDrawable = PaintDrawable(Color.DKGRAY)
        mDrawable!!.setCornerRadius(mRadius / 2) //圆角矩形，如果不除2即是圆形框图。
        mDrawable!!.paint.shader = shader
        mDrawable!!.setBounds(0, 0, (mRadius * 2).toInt(), (mRadius * 2).toInt())

        mNewBmp = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888)
        val c = Canvas(mNewBmp!!)
        c.drawColor(Color.LTGRAY) //画满底色。

        val matrix = Matrix()
        matrix.setTranslate(-mCurX + mRadius, -mCurY + mRadius)
        mDrawable!!.paint.shader.setLocalMatrix(matrix)

        mDrawable!!.draw(c)


        val rectF = RectF()
        matrix.mapRect(rectF)

        val cx = mCurX + rectF.left
        val cy = mCurY + rectF.top
        c.drawCircle(cx, cy, 30f, mCirclePaint) //蓝色中心圆圈

        //下面小框图里面的Path
        val path = Path()
        mPath2.transform(matrix, path)
        c.drawPath(path, mPathPaint2) //绘制下面框图里面的Path

        testIV?.setImageBitmap(mNewBmp)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.pkg.MyImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="@drawable/ic_launcher_background"
        android:scaleType="fitCenter"
        android:src="@mipmap/mypic" />

    <ImageView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/ic_launcher_background"
        android:src="@drawable/ic_launcher_foreground" />

</LinearLayout>