图片向前液化
demo 如下,注释都比较完善可供参考
package com.gowow.advimageeditor.example
import android.content.Context
import android.graphics.Bitmap
import android.graphics.PointF
import android.opengl.GLES20
import android.opengl.GLSurfaceView
import android.opengl.GLUtils
import android.opengl.Matrix
import android.view.MotionEvent
import java.nio.ByteBuffer
import java.nio.ByteOrder
import java.nio.FloatBuffer
import java.nio.ShortBuffer
import javax.microedition.khronos.egl.EGLConfig
import javax.microedition.khronos.opengles.GL10
import kotlin.math.max
import kotlin.math.min
import kotlin.math.sqrt
import kotlin.math.abs
class GlImageDeformationView : GLSurfaceView {
private var renderer: ImageRenderer? = null
private var lastTouchPoint = PointF()
private var currentTouchPoint = PointF()
private var showGrid = false
private var isDeforming = false
private val touchMovementThreshold = 0f // 移动多少像素才算一次有效移动
// 公开的笔刷参数调整接口
private var brushSize = 0.3f
private var brushIntensity = 0.006f
fun setBrushSize(size: Float) {
brushSize = size.coerceIn(0.1f, 0.8f)
renderer?.setBrushSize(brushSize)
}
fun setBrushIntensity(intensity: Float) {
brushIntensity = intensity.coerceIn(0.006f, 0.5f)
renderer?.setBrushIntensity(brushIntensity)
}
constructor(context: Context?) : super(context) {
init()
}
fun setShowGrid() {
showGrid = !showGrid
requestRender()
}
fun resetDeformation() {
renderer?.resetDeformation()
requestRender()
}
private fun init() {
// 设置 OpenGL ES 2.0 context
setEGLContextClientVersion(2)
renderer = ImageRenderer()
setRenderer(renderer)
// 仅在图片或视图大小改变时重绘
renderMode = RENDERMODE_WHEN_DIRTY
}
fun initBitmap(bmp: Bitmap?) {
bmp?.let {
renderer?.setBitmap(it)
requestRender()
}
}
private inner class ImageRenderer : Renderer {
private var mProgram = 0
private var mBitmap: Bitmap? = null
private var mTextureId = -1
private var mPositionHandle = 0
private var mTextureCoordHandle = 0
private var mMVPMatrixHandle = 0
// MVP矩阵
private val mMVPMatrix = FloatArray(16)
private val mProjectionMatrix = FloatArray(16)
private val mViewMatrix = FloatArray(16)
private val mModelMatrix = FloatArray(16)
// 网格参数
private val GRID_SIZE = 128 // 网格大小
private val vertexCount = (GRID_SIZE + 1) * (GRID_SIZE + 1)
private val indexCount = GRID_SIZE * GRID_SIZE * 6
// 原始网格点坐标
private val originalVertices = FloatArray((GRID_SIZE + 1) * (GRID_SIZE + 1) * 2)
// 变形后的网格点坐标
private val deformedVertices = FloatArray((GRID_SIZE + 1) * (GRID_SIZE + 1) * 2)
// 当前变形状态的网格点坐标（用于累积变形效果）
private val currentVertices = FloatArray((GRID_SIZE + 1) * (GRID_SIZE + 1) * 2)
// 纹理坐标
private val textureCoords = FloatArray((GRID_SIZE + 1) * (GRID_SIZE + 1) * 2)
// 索引数组
private val indices = ShortArray(indexCount)
private var vertexBuffer: FloatBuffer
private var textureBuffer: FloatBuffer
private var indexBuffer: ShortBuffer
// 用于网格线的数据
private val horizontalLineIndices = ArrayList<Short>()
private val verticalLineIndices = ArrayList<Short>()
// 变形参数
private var deformRadius = brushSize // 变形影响半径
private var deformStrength = brushIntensity // 变形强度
private var brushStep = 0.01f // 笔刷步长
// 顶点着色器
private val vertexShaderCode = """
uniform mat4 uMVPMatrix;
attribute vec4 aPosition;
attribute vec2 aTextureCoord;
varying vec2 vTextureCoord;
void main() {
gl_Position = uMVPMatrix * aPosition;
vTextureCoord = aTextureCoord;
}
""".trimIndent()
// 片段着色器
private val fragmentShaderCode = """
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D sTexture;
void main() {
gl_FragColor = texture2D(sTexture, vTextureCoord);
}
""".trimIndent()
// 网格线的着色器程序
private var mGridProgram = 0
private var mGridPositionHandle = 0
private var mGridMVPMatrixHandle = 0
// 网格线的顶点着色器
private val gridVertexShaderCode = """
uniform mat4 uMVPMatrix;
attribute vec4 aPosition;
void main() {
gl_Position = uMVPMatrix * aPosition;
}
""".trimIndent()
// 网格线的片段着色器
private val gridFragmentShaderCode = """
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.3); // 半透明红色
}
""".trimIndent()
init {
deformRadius = brushSize // 初始化变形半径
deformStrength = brushIntensity // 初始化变形强度
// 初始化网格
initGrid()
// 初始化缓冲区
vertexBuffer = ByteBuffer.allocateDirect(deformedVertices.size * 4).order(ByteOrder.nativeOrder()).asFloatBuffer()
.put(deformedVertices)
vertexBuffer.position(0)
textureBuffer = ByteBuffer.allocateDirect(textureCoords.size * 4).order(ByteOrder.nativeOrder()).asFloatBuffer()
.put(textureCoords)
textureBuffer.position(0)
val indexByteBuffer = ByteBuffer.allocateDirect(indices.size * 2).order(ByteOrder.nativeOrder())
indexBuffer = indexByteBuffer.asShortBuffer()
indexBuffer.put(indices)
indexBuffer.position(0)
}
fun setBrushSize(size: Float) {
deformRadius = size
}
fun setBrushIntensity(intensity: Float) {
deformStrength = intensity
}
private fun initGrid() {
// 生成网格顶点
var index = 0
for (y in 0..GRID_SIZE) {
for (x in 0..GRID_SIZE) {
val xPos = x.toFloat() / GRID_SIZE * 2 - 1
val yPos = y.toFloat() / GRID_SIZE * 2 - 1
// 顶点坐标
originalVertices[index * 2] = xPos
originalVertices[index * 2 + 1] = yPos
deformedVertices[index * 2] = xPos
deformedVertices[index * 2 + 1] = yPos
currentVertices[index * 2] = xPos
currentVertices[index * 2 + 1] = yPos
// 纹理坐标
textureCoords[index * 2] = x.toFloat() / GRID_SIZE
textureCoords[index * 2 + 1] = 1 - y.toFloat() / GRID_SIZE
index++
}
}
// 生成索引
index = 0
for (y in 0 until GRID_SIZE) {
for (x in 0 until GRID_SIZE) {
val pointIndex = y * (GRID_SIZE + 1) + x
indices[index++] = pointIndex.toShort()
indices[index++] = (pointIndex + 1).toShort()
indices[index++] = (pointIndex + GRID_SIZE + 1).toShort()
indices[index++] = (pointIndex + GRID_SIZE + 1).toShort()
indices[index++] = (pointIndex + 1).toShort()
indices[index++] = (pointIndex + GRID_SIZE + 2).toShort()
}
}
// 创建网格线索引
// 水平线
for (y in 0..GRID_SIZE) {
for (x in 0 until GRID_SIZE) {
val startIndex = y * (GRID_SIZE + 1) + x
val endIndex = startIndex + 1
horizontalLineIndices.add(startIndex.toShort())
horizontalLineIndices.add(endIndex.toShort())
}
}
// 垂直线
for (x in 0..GRID_SIZE) {
for (y in 0 until GRID_SIZE) {
val startIndex = y * (GRID_SIZE + 1) + x
val endIndex = startIndex + (GRID_SIZE + 1)
verticalLineIndices.add(startIndex.toShort())
verticalLineIndices.add(endIndex.toShort())
}
}
}
fun resetDeformation() {
// 重置所有顶点到初始状态
System.arraycopy(originalVertices, 0, currentVertices, 0, originalVertices.size)
System.arraycopy(originalVertices, 0, deformedVertices, 0, originalVertices.size)
// 更新顶点缓冲区
vertexBuffer.clear()
vertexBuffer.put(deformedVertices)
vertexBuffer.position(0)
requestRender()
}
/**
* 参考C++版本实现的优化版向前液化变形效果
* 使用线段与点的距离计算方法优化性能和效果
*/
fun forwardDeform(startX: Float, startY: Float, endX: Float, endY: Float) {
// 归一化坐标到[-1, 1]范围
val x1 = startX * 2 - 1
val y1 = -(startY * 2 - 1)
val x2 = endX * 2 - 1
val y2 = -(endY * 2 - 1)
// 确保我们基于当前变形状态进行变形
System.arraycopy(currentVertices, 0, deformedVertices, 0, currentVertices.size)
// 计算方向向量
val dx = x2 - x1
val dy = y2 - y1
val distance = sqrt(dx * dx + dy * dy)
// 如果距离太小，不做处理
if (distance < 0.001f) {
return
}
// 归一化方向向量
val dirX = dx / distance
val dirY = dy / distance
// 计算直线方程 Ax + By + C = 0
val a: Float
val b: Float
val c: Float
if (abs(x2 - x1) < 0.001f) {
// 垂直线情况
a = 1f
b = 0f
c = -x1
} else {
// 一般情况：y = mx + c 转换为 ax + by + c = 0
a = (y1 - y2) / (x2 - x1)
b = -1f
c = y1 - a * x1
}
// 计算系数
val eqD2 = a * a + b * b
val eqD = sqrt(eqD2)
// 确定边界框，减少计算量
val v2MinX = min(x1, x2)
val v2MaxX = max(x1, x2)
val v2MinY = min(y1, y2)
val v2MaxY = max(y1, y2)
// 只处理边界框附近的顶点
val loopStartX = max(v2MinX - deformRadius, -1f)
val loopEndX = min(v2MaxX + deformRadius, 1f)
val loopStartY = max(v2MinY - deformRadius, -1f)
val loopEndY = min(v2MaxY + deformRadius, 1f)
// 应用变形到每个顶点
for (i in 0 until vertexCount) {
val vx = currentVertices[i * 2]
val vy = currentVertices[i * 2 + 1]
// 快速边界检查，提高性能
if (vx < loopStartX || vx > loopEndX || vy < loopStartY || vy > loopEndY) {
continue
}
// 计算点到直线的距离
val dis1 = abs(a * vx + b * vy + c) / eqD
// 如果距离超出半径，跳过
if (dis1 > deformRadius) {
continue
}
// 计算点到线段端点的距离
val dis2 = sqrt((vx - x1) * (vx - x1) + (vy - y1) * (vy - y1))
val dis3 = sqrt((vx - x2) * (vx - x2) + (vy - y2) * (vy - y2))
// 计算点在直线上的投影
val projX = (b * b * vx - a * b * vy - a * c) / eqD2
val projY = (a * a * vy - b * c - a * b * vx) / eqD2
// 确定实际使用的距离
val dis: Float
if (projX < v2MinX || projX > v2MaxX || projY < v2MinY || projY > v2MaxY) {
// 投影点不在线段上，使用点到端点距离
if (dis2 > deformRadius && dis3 > deformRadius) {
continue
} else {
dis = min(dis2, dis3)
}
} else {
// 投影点在线段上，使用点到直线距离
dis = dis1
}
// 计算平滑过渡的变形强度
val percent = (1.0f - dis / deformRadius)
val intensity = percent * percent * (3.0f - 2.0f * percent) * deformStrength
// 应用变形，在运动方向上产生偏移
deformedVertices[i * 2] = vx + dirX * intensity
deformedVertices[i * 2 + 1] = vy + dirY * intensity
}
// 更新顶点缓冲区
vertexBuffer.clear()
vertexBuffer.put(deformedVertices)
vertexBuffer.position(0)
}
var lastTouchX = 0F
var lastTouchY = 0F
fun updateDeformation(x: Float, y: Float, isNewTouch: Boolean) {
if (isNewTouch) {
// 记录开始触摸的位置
lastTouchX = x
lastTouchY = y
} else {
// 向前变形
forwardDeform(lastTouchX, lastTouchY, x, y)
// 更新最后触摸点
lastTouchX = x
lastTouchY = y
}
renderer?.commitDeformation()
requestRender()
}
fun commitDeformation() {
// 提交变形效果，更新当前变形状态
System.arraycopy(deformedVertices, 0, currentVertices, 0, deformedVertices.size)
}
fun setBitmap(bitmap: Bitmap) {
mBitmap = bitmap
}
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
GLES20.glClearColor(0f, 0f, 0f, 1f)
// 创建主着色器程序
mProgram = createProgram(vertexShaderCode, fragmentShaderCode)
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "aPosition")
mTextureCoordHandle = GLES20.glGetAttribLocation(mProgram, "aTextureCoord")
mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix")
// 创建网格线着色器程序
mGridProgram = createProgram(gridVertexShaderCode, gridFragmentShaderCode)
mGridPositionHandle = GLES20.glGetAttribLocation(mGridProgram, "aPosition")
mGridMVPMatrixHandle = GLES20.glGetUniformLocation(mGridProgram, "uMVPMatrix")
createTexture()
}
override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
GLES20.glViewport(0, 0, width, height)
// 计算投影和视图矩阵以保持图片居中且保持宽高比
val imageAspect = mBitmap?.width?.toFloat()?.div(mBitmap?.height?.toFloat() ?: 1f) ?: 1f
val viewAspect = width.toFloat() / height.toFloat()
if (imageAspect > viewAspect) {
// 图片较宽，以宽度为准
Matrix.orthoM(mProjectionMatrix, 0, -1f, 1f, -1f / viewAspect * imageAspect, 1f / viewAspect * imageAspect, -1f, 1f)
} else {
// 图片较高，以高度为准
Matrix.orthoM(mProjectionMatrix, 0, -1f / imageAspect * viewAspect, 1f / imageAspect * viewAspect, -1f, 1f, -1f, 1f)
}
Matrix.setLookAtM(mViewMatrix, 0, 0f, 0f, 1f, 0f, 0f, 0f, 0f, 1f, 0f)
Matrix.setIdentityM(mModelMatrix, 0)
}
override fun onDrawFrame(gl: GL10?) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)
// 绘制纹理
GLES20.glUseProgram(mProgram)
Matrix.multiplyMM(mMVPMatrix, 0, mViewMatrix, 0, mModelMatrix, 0)
Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mMVPMatrix, 0)
GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mMVPMatrix, 0)
GLES20.glActiveTexture(GLES20.GL_TEXTURE0)
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureId)
GLES20.glEnableVertexAttribArray(mPositionHandle)
GLES20.glEnableVertexAttribArray(mTextureCoordHandle)
GLES20.glVertexAttribPointer(mPositionHandle, 2, GLES20.GL_FLOAT, false, 0, vertexBuffer)
GLES20.glVertexAttribPointer(mTextureCoordHandle, 2, GLES20.GL_FLOAT, false, 0, textureBuffer)
GLES20.glDrawElements(GLES20.GL_TRIANGLES, indexCount, GLES20.GL_UNSIGNED_SHORT, indexBuffer)
GLES20.glDisableVertexAttribArray(mPositionHandle)
GLES20.glDisableVertexAttribArray(mTextureCoordHandle)
// 如果开启了网格显示，绘制变形后的网格线
if (showGrid) {
GLES20.glUseProgram(mGridProgram)
GLES20.glUniformMatrix4fv(mGridMVPMatrixHandle, 1, false, mMVPMatrix, 0)
GLES20.glEnableVertexAttribArray(mGridPositionHandle)
GLES20.glVertexAttribPointer(mGridPositionHandle, 2, GLES20.GL_FLOAT, false, 0, vertexBuffer)
// 启用混合以实现半透明效果
GLES20.glEnable(GLES20.GL_BLEND)
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA)
// 设置线宽
GLES20.glLineWidth(1.0f)
// 创建临时缓冲区绘制水平线
val horizontalBuffer = ShortArray(horizontalLineIndices.size)
for (i in horizontalLineIndices.indices) {
horizontalBuffer[i] = horizontalLineIndices[i]
}
val hBuffer = ByteBuffer.allocateDirect(horizontalBuffer.size * 2).order(ByteOrder.nativeOrder()).asShortBuffer()
.put(horizontalBuffer)
hBuffer.position(0)
GLES20.glDrawElements(GLES20.GL_LINES, horizontalBuffer.size, GLES20.GL_UNSIGNED_SHORT, hBuffer)
// 创建临时缓冲区绘制垂直线
val verticalBuffer = ShortArray(verticalLineIndices.size)
for (i in verticalLineIndices.indices) {
verticalBuffer[i] = verticalLineIndices[i]
}
val vBuffer = ByteBuffer.allocateDirect(verticalBuffer.size * 2).order(ByteOrder.nativeOrder()).asShortBuffer()
.put(verticalBuffer)
vBuffer.position(0)
GLES20.glDrawElements(GLES20.GL_LINES, verticalBuffer.size, GLES20.GL_UNSIGNED_SHORT, vBuffer)
GLES20.glDisable(GLES20.GL_BLEND)
GLES20.glDisableVertexAttribArray(mGridPositionHandle)
}
}
private fun createProgram(vertexSource: String, fragmentSource: String): Int {
val vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource)
val fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource)
val program = GLES20.glCreateProgram()
GLES20.glAttachShader(program, vertexShader)
GLES20.glAttachShader(program, fragmentShader)
GLES20.glLinkProgram(program)
return program
}
private fun loadShader(type: Int, shaderCode: String): Int {
val shader = GLES20.glCreateShader(type)
GLES20.glShaderSource(shader, shaderCode)
GLES20.glCompileShader(shader)
return shader
}
private fun createTexture() {
val textures = IntArray(1)
GLES20.glGenTextures(1, textures, 0)
mTextureId = textures[0]
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureId)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE)
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE)
mBitmap?.let {
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, it, 0)
}
}
}
override fun onTouchEvent(event: MotionEvent?): Boolean {
event ?: return super.onTouchEvent(event)
val x = event.x / width
val y = event.y / height
when (event.action) {
MotionEvent.ACTION_DOWN -> {
lastTouchPoint.set(event.x, event.y)
currentTouchPoint.set(event.x, event.y)
isDeforming = true
renderer?.updateDeformation(x, y, true)
}
MotionEvent.ACTION_MOVE -> {
currentTouchPoint.set(event.x, event.y)
val dx = currentTouchPoint.x - lastTouchPoint.x
val dy = currentTouchPoint.y - lastTouchPoint.y
val distance = sqrt(dx * dx + dy * dy)
// 只有移动距离超过阈值才进行变形，避免过度变形
if (distance > touchMovementThreshold) {
renderer?.updateDeformation(x, y, false)
lastTouchPoint.set(currentTouchPoint)
}
}
MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
isDeforming = false
renderer?.commitDeformation()
}
}
return true
}
}
上篇2024年度总结