Android怎么通过触摸动态地在屏幕上画矩形效果

发布时间：2022-04-08 15:26:54 作者：iii
来源：亿速云阅读：236

# Android怎么通过触摸动态地在屏幕上画矩形效果

## 一、前言

在Android应用开发中，实现用户通过触摸屏幕动态绘制图形的功能是常见的交互需求。本文将详细介绍如何通过触摸事件在Android屏幕上动态绘制矩形效果，涵盖从基础原理到完整实现的全部过程。通过本教程，您将掌握：

1. 自定义View的基本方法
2. 触摸事件的处理机制
3. 矩形绘制的数学计算
4. 性能优化的关键点

## 二、实现原理

### 2.1 核心思路

动态绘制矩形的实现主要依赖三个关键技术点：

1. **自定义View**：通过继承`View`或`SurfaceView`创建绘图区域
2. **触摸事件处理**：监听`ACTION_DOWN`、`ACTION_MOVE`等事件
3. **Canvas绘图**：使用`Paint`和`Canvas`在`onDraw()`中绘制图形

### 2.2 绘制流程

1. 用户手指按下（ACTION_DOWN） - 记录矩形起点
2. 手指移动（ACTION_MOVE） - 计算当前矩形区域并重绘
3. 手指抬起（ACTION_UP） - 完成最终矩形绘制

## 三、代码实现

### 3.1 基础自定义View

```kotlin
class RectangleDrawingView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val paint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = 5f
    }

    private var startX = 0f
    private var startY = 0f
    private var endX = 0f
    private var endY = 0f
    private var isDrawing = false

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (isDrawing) {
            val left = min(startX, endX)
            val right = max(startX, endX)
            val top = min(startY, endY)
            val bottom = max(startY, endY)
            canvas.drawRect(left, top, right, bottom, paint)
        }
    }
}

3.2 处理触摸事件

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            startX = event.x
            startY = event.y
            endX = event.x
            endY = event.y
            isDrawing = true
            invalidate()
            return true
        }
        MotionEvent.ACTION_MOVE -> {
            endX = event.x
            endY = event.y
            invalidate()
            return true
        }
        MotionEvent.ACTION_UP -> {
            endX = event.x
            endY = event.y
            isDrawing = false
            invalidate()
            return true
        }
    }
    return super.onTouchEvent(event)
}

3.3 完整实现代码

class AdvancedRectangleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    // 绘制样式配置
    private val borderPaint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.STROKE
        strokeWidth = 8f
        pathEffect = DashPathEffect(floatArrayOf(20f, 10f), 0f)
    }

    private val fillPaint = Paint().apply {
        color = Color.argb(50, 0, 0, 255)
        style = Paint.Style.FILL
    }

    // 绘制状态变量
    private var startPoint = PointF()
    private var currentPoint = PointF()
    private var isDrawing = false
    private val rectangles = mutableListOf<RectF>()
    
    override fun onDraw(canvas: Canvas) {
        // 绘制已完成的矩形
        rectangles.forEach { rect ->
            canvas.drawRect(rect, fillPaint)
            canvas.drawRect(rect, borderPaint)
        }
        
        // 绘制当前正在绘制的矩形
        if (isDrawing) {
            val rect = createRect(startPoint, currentPoint)
            canvas.drawRect(rect, fillPaint)
            canvas.drawRect(rect, borderPaint)
        }
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                startPoint.set(event.x, event.y)
                currentPoint.set(event.x, event.y)
                isDrawing = true
                return true
            }
            MotionEvent.ACTION_MOVE -> {
                currentPoint.set(event.x, event.y)
                invalidate()
                return true
            }
            MotionEvent.ACTION_UP -> {
                currentPoint.set(event.x, event.y)
                rectangles.add(createRect(startPoint, currentPoint))
                isDrawing = false
                invalidate()
                return true
            }
        }
        return super.onTouchEvent(event)
    }

    private fun createRect(start: PointF, end: PointF): RectF {
        return RectF(
            min(start.x, end.x),
            min(start.y, end.y),
            max(start.x, end.x),
            max(start.y, end.y)
        )
    }
    
    fun clearAll() {
        rectangles.clear()
        invalidate()
    }
}

四、功能扩展

4.1 添加撤销功能

fun undoLast() {
    if (rectangles.isNotEmpty()) {
        rectangles.removeAt(rectangles.lastIndex)
        invalidate()
    }
}

4.2 支持多种图形模式

enum class DrawMode { RECTANGLE, CIRCLE, LINE }

var drawMode = DrawMode.RECTANGLE

override fun onDraw(canvas: Canvas) {
    when(drawMode) {
        DrawMode.RECTANGLE -> drawRectangle(canvas)
        DrawMode.CIRCLE -> drawCircle(canvas)
        DrawMode.LINE -> drawLine(canvas)
    }
}

4.3 添加颜色选择器

var borderColor: Int = Color.BLUE
    set(value) {
        field = value
        borderPaint.color = value
        invalidate()
    }
    
var fillColor: Int = Color.argb(50, 0, 0, 255)
    set(value) {
        field = value
        fillPaint.color = value
        invalidate()
    }

五、性能优化

5.1 使用SurfaceView替代View

对于频繁绘制的场景：

class RectangleSurfaceView(context: Context, attrs: AttributeSet?) : 
    SurfaceView(context, attrs), SurfaceHolder.Callback {
    
    private val drawThread = DrawThread()
    
    override fun surfaceCreated(holder: SurfaceHolder) {
        drawThread.start()
    }
    
    private inner class DrawThread : Thread() {
        override fun run() {
            while (true) {
                val canvas = holder.lockCanvas()
                try {
                    // 绘制逻辑
                } finally {
                    holder.unlockCanvasAndPost(canvas)
                }
            }
        }
    }
}

5.2 脏矩形技术

只重绘发生变化的部分区域：

override fun onTouchEvent(event: MotionEvent): Boolean {
    // 计算需要重绘的脏区域
    val dirtyRect = RectF().apply {
        set(startX, startY, endX, endY)
        sort()
        inset(-20f, -20f) // 扩大区域确保覆盖
    }
    
    invalidate(dirtyRect.left.toInt(), dirtyRect.top.toInt(),
              dirtyRect.right.toInt(), dirtyRect.bottom.toInt())
}

六、常见问题解决

6.1 绘制闪烁问题

解决方案： 1. 使用双缓冲技术 2. 在onDraw()中避免创建新对象

private val bitmapBuffer = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
private val bufferCanvas = Canvas(bitmapBuffer)

override fun onDraw(canvas: Canvas) {
    bufferCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
    // 在bufferCanvas上绘制
    canvas.drawBitmap(bitmapBuffer, 0f, 0f, null)
}

6.2 内存泄漏预防

在SurfaceView中：

override fun surfaceDestroyed(holder: SurfaceHolder) {
    drawThread.running = false
    drawThread.join()
}

七、完整项目集成

7.1 XML布局

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.example.draw.RectangleDrawingView
        android:id="@+id/drawingView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
    <LinearLayout
        android:layout_gravity="bottom"
        android:orientation="horizontal">
        
        <Button
            android:text="Clear"
            android:onClick="onClearClick"/>
            
        <Button
            android:text="Undo"
            android:onClick="onUndoClick"/>
    </LinearLayout>
</FrameLayout>

7.2 Activity中使用

class DrawingActivity : AppCompatActivity() {
    private lateinit var drawingView: RectangleDrawingView
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_drawing)
        drawingView = findViewById(R.id.drawingView)
    }
    
    fun onClearClick(view: View) {
        drawingView.clearAll()
    }
    
    fun onUndoClick(view: View) {
        drawingView.undoLast()
    }
}

八、总结

本文详细介绍了在Android平台上实现触摸绘制矩形的完整方案，包括： 1. 自定义View的基础实现 2. 触摸事件处理的正确方式 3. 性能优化的关键技巧 4. 常见问题的解决方案

通过这个基础功能，您可以进一步扩展实现： - 多图形绘制（圆形、直线等） - 图形编辑（移动、缩放、旋转） - 保存和加载绘图数据 - 更复杂的绘图应用（如简易绘图板）

希望本文能帮助您掌握Android绘图的核心技术，为开发更复杂的图形应用打下坚实基础。 “`

该文章共计约2300字，采用Markdown格式编写，包含： 1. 完整的代码实现示例 2. 分步骤的原理讲解 3. 性能优化建议 4. 常见问题解决方案 5. 实际项目集成指南

文章结构清晰，从基础到高级逐步深入，适合不同水平的Android开发者阅读参考。