扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
0.前言
成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站建设、高青网络推广、成都微信小程序、高青网络营销、高青企业策划、高青品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供高青建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
最近突发了很多事情，又跟康仔跳票了，无可奈何，不好意思了。最近生活上有很多感悟，一个男人的牛逼就在于平衡工作，学习和家庭，这个点很难把握，既要保证家庭和睦，又要保证自己价值的实现从而避免堕入平庸，每个人的状况都是不一样的，没有什么经验是可以照搬的，怎么说呢，不断摸索吧。
1.分析
整个效果是仿照微信来做的,效果如图所示：
整个效果就是从图库选取一张图片，并进行裁剪，从图库选取没什么好说的，就说说怎么做的裁剪控件吧，这个裁剪控件就是ClipImageView，可以看到它有一个阴影遮罩，一个透明的框，还有图片的显示，以及可以移动图片。
2.代码
class ClipImageView(context: Context, attributeSet: AttributeSet?) : ImageView(context, attributeSet)
{
private val paint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
var clipWidth = 300
set(value)
{
field = value
if (isAttachedToWindow)
{
postInvalidate()
}
}
var clipHeight = 300
set(value)
{
field = value
if (isAttachedToWindow)
{
postInvalidate()
}
}
var minScale = 1.0f
var maxScale = 1.0f
private var rectColor = Color.BLACK
private var lastTouchX = 0F
private var lastTouchY = 0F
private val transMatrix = Matrix()
private var isTouching = false
private var scale = 1.0f
var onsaveClipImageListener: OnSaveClipImageListsner? = null
private val scaleGestureDetectorListener = object : ScaleGestureDetector.SimpleOnScaleGestureListener()
{
override fun onScale(detector: ScaleGestureDetector?): Boolean
{
val curScaleFactor = detector?.scaleFactor ?: 1.0f
var curScale = scale * curScaleFactor
curScale = if (curScale >= 1.0f) Math.min(maxScale, curScale) else Math.max(minScale, curScale)
val scaleFactor = if (curScale > scale) 1 + (curScale - scale) / scale else 1.0f - (scale - curScale) / scale
transMatrix.postScale(scaleFactor, scaleFactor, detector?.focusX
?: 0f, detector?.focusY ?: 0f)
postInvalidate()
scale = curScale
return true
}
override fun onScaleEnd(detector: ScaleGestureDetector?)
{
super.onScaleEnd(detector)
}
}
private var scaleGestureDetector: ScaleGestureDetector
constructor(context: Context) : this(context, null)
init
{
paint.strokeJoin = Paint.Join.ROUND
scaleGestureDetector = ScaleGestureDetector(context, scaleGestureDetectorListener)
if (attributeSet != null)
{
pareseAttributeSet(attributeSet)
}
setBackgroundColor(Color.WHITE)
}
private fun pareseAttributeSet(attributeSet: AttributeSet)
{
val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.ClipImageView)
clipWidth = typedArray.getDimensionPixelOffset(R.styleable.ClipImageView_clip_width, clipWidth)
clipHeight = typedArray.getDimensionPixelOffset(R.styleable.ClipImageView_clip_width, clipHeight)
rectColor = typedArray.getColor(R.styleable.ClipImageView_rect_color, rectColor)
minScale = typedArray.getFloat(R.styleable.ClipImageView_min_scale, minScale)
maxScale = typedArray.getFloat(R.styleable.ClipImageView_max_scale, maxScale)
typedArray.recycle()
}
override fun layout(l: Int, t: Int, r: Int, b: Int)
{
super.layout(l, t, r, b)
if (clipWidth > measuredWidth)
{
clipWidth = measuredWidth
}
if (clipHeight > measuredHeight)
{
clipHeight = measuredHeight
}
}
override fun onTouchEvent(event: MotionEvent?): Boolean
{
if (event?.pointerCount ?: 1 >= 2)
{
isTouching = false
return scaleGestureDetector.onTouchEvent(event)
}
else
{
when (event?.action)
{
MotionEvent.ACTION_DOWN ->
{
isTouching = true
lastTouchX = event.x
lastTouchY = event.y
}
MotionEvent.ACTION_MOVE ->
{
if (isTouching && event.pointerCount == 1)
{
val offsetX = event.x - lastTouchX
val offsetY = event.y - lastTouchY
transMatrix.postTranslate(offsetX, offsetY)
lastTouchX = event.x
lastTouchY = event.y
postInvalidate()
}
}
MotionEvent.ACTION_UP ->
{
isTouching = false
}
}
return true
}
}
override fun onDraw(canvas: Canvas?)
{
canvas?.let {
val saveState = it.saveCount
it.save()
it.concat(transMatrix)
super.onDraw(canvas)
it.restoreToCount(saveState)
drawMask(it)
drawRect(it)
}
}
private fun drawMask(canvas: Canvas)
{
paint.style = Paint.Style.FILL
paint.color = Color.parseColor("#A0000000")
canvas.drawRect(0.0f, 0.0f, width.toFloat(), (height / 2 - clipHeight / 2).toFloat(), paint)
canvas.drawRect((width / 2 + clipWidth / 2).toFloat(), (height / 2 - clipHeight / 2).toFloat(), width.toFloat(), (height / 2 + clipHeight / 2).toFloat(), paint)
canvas.drawRect(0.0f, (height / 2 + clipHeight / 2).toFloat(), width.toFloat(), height.toFloat(), paint)
canvas.drawRect(0.0f, (height / 2 - clipHeight / 2).toFloat(), (width / 2 - clipWidth / 2).toFloat(), (height / 2 + clipHeight / 2).toFloat(), paint)
}
private fun drawRect(canvas: Canvas)
{
paint.style = Paint.Style.FILL_AND_STROKE
paint.color = rectColor
paint.strokeWidth = 4.0f
val offset = paint.strokeWidth / 2
val left: Float = (width / 2 - clipWidth / 2).toFloat() - offset
val top: Float = (height / 2 - clipHeight / 2).toFloat() - offset
val right: Float = (width / 2 + clipWidth / 2).toFloat() + offset
val bottom: Float = (height / 2 + clipHeight / 2).toFloat() + offset
canvas.drawLine(left, top, right, top, paint)
canvas.drawLine(right, top, right, bottom, paint)
canvas.drawLine(left, bottom, right, bottom, paint)
canvas.drawLine(left, top, left, bottom, paint)
}
interface OnSaveClipImageListsner
{
fun onImageFinishedSav()
}
inner class SaveTask(private val filePath: String) : AsyncTask()
{
override fun doInBackground(vararg params: Unit?): Unit
{
saveClipImage(filePath)
}
override fun onPostExecute(result: Unit?)
{
super.onPostExecute(result)
onsaveClipImageListener?.onImageFinishedSav()
}
}
fun clipAndSaveImage(filePath: String)
{
SaveTask(filePath).execute()
}
private fun saveClipImage(filePath: String)
{
val clipBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
val clipCanvas = Canvas(clipBitmap)
draw(clipCanvas)
try
{
val outputStream = FileOutputStream(filePath)
val bitmap = Bitmap.createBitmap(clipBitmap, width / 2 - clipWidth / 2, height / 2 - clipHeight / 2, clipWidth, clipHeight, transMatrix, true)
bitmap.compress(Bitmap.CompressFormat.JPEG, 80, outputStream)
outputStream.close()
}
catch (e: IOException)
{
e.printStackTrace()
}
}
} 可以发现这段代码是继承自ImageView。
先看代码段
private fun pareseAttributeSet(attributeSet: AttributeSet)
{
val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.ClipImageView)
clipWidth = typedArray.getDimensionPixelOffset(R.styleable.ClipImageView_clip_width, clipWidth)
clipHeight = typedArray.getDimensionPixelOffset(R.styleable.ClipImageView_clip_width, clipHeight)
rectColor = typedArray.getColor(R.styleable.ClipImageView_rect_color, rectColor)
minScale = typedArray.getFloat(R.styleable.ClipImageView_min_scale, minScale)
maxScale = typedArray.getFloat(R.styleable.ClipImageView_max_scale, maxScale)
typedArray.recycle()
}这里解析布局文件的里的属性，其中clipwidth和clipheight分别代表裁剪框的宽度和高度，minScale和maxScale是最小和最大的缩放程度。
override fun layout(l: Int, t: Int, r: Int, b: Int)
{
super.layout(l, t, r, b)
if (clipWidth > measuredWidth)
{
clipWidth = measuredWidth
}
if (clipHeight > measuredHeight)
{
clipHeight = measuredHeight
}
}在layout方法里设置clipWidth和clipHeight，防止设置值大于控件大小。
drawMask方法和drawRect方法是用来绘制遮罩层和裁剪框的，其中遮罩层就是四个方形，而裁剪框就是一个矩形的外框。
private fun drawMask(canvas: Canvas)
{
paint.style = Paint.Style.FILL
paint.color = Color.parseColor("#A0000000")
canvas.drawRect(0.0f, 0.0f, width.toFloat(), (height / 2 - clipHeight / 2).toFloat(), paint)
canvas.drawRect((width / 2 + clipWidth / 2).toFloat(), (height / 2 - clipHeight / 2).toFloat(), width.toFloat(), (height / 2 + clipHeight / 2).toFloat(), paint)
canvas.drawRect(0.0f, (height / 2 + clipHeight / 2).toFloat(), width.toFloat(), height.toFloat(), paint)
canvas.drawRect(0.0f, (height / 2 - clipHeight / 2).toFloat(), (width / 2 - clipWidth / 2).toFloat(), (height / 2 + clipHeight / 2).toFloat(), paint)
}
private fun drawRect(canvas: Canvas)
{
paint.style = Paint.Style.FILL_AND_STROKE
paint.color = rectColor
paint.strokeWidth = 4.0f
val offset = paint.strokeWidth / 2
val left: Float = (width / 2 - clipWidth / 2).toFloat() - offset
val top: Float = (height / 2 - clipHeight / 2).toFloat() - offset
val right: Float = (width / 2 + clipWidth / 2).toFloat() + offset
val bottom: Float = (height / 2 + clipHeight / 2).toFloat() + offset
canvas.drawLine(left, top, right, top, paint)
canvas.drawLine(right, top, right, bottom, paint)
canvas.drawLine(left, bottom, right, bottom, paint)
canvas.drawLine(left, top, left, bottom, paint)
}接着看如何让图片随手指移动和缩放，这里说一下transMatrix，这个是Matrix类，通过它应用到Canvas来实现缩放和移动。
override fun onTouchEvent(event: MotionEvent?): Boolean
{
if (event?.pointerCount ?: 1 >= 2)
{
isTouching = false
return scaleGestureDetector.onTouchEvent(event)
}
else
{
when (event?.action)
{
MotionEvent.ACTION_DOWN ->
{
isTouching = true
lastTouchX = event.x
lastTouchY = event.y
}
MotionEvent.ACTION_MOVE ->
{
if (isTouching && event.pointerCount == 1)
{
val offsetX = event.x - lastTouchX
val offsetY = event.y - lastTouchY
transMatrix.postTranslate(offsetX, offsetY)
lastTouchX = event.x
lastTouchY = event.y
postInvalidate()
}
}
MotionEvent.ACTION_UP ->
{
isTouching = false
}
}
return true
}
}当两个手指触摸时，由移动事件有ScaleGestureDetector处理缩放，否则进行移动。
先看移动：
将移动的距离应用到transMatrix，并调用postInvalidate（）重新绘制。
再看缩放处理
private val scaleGestureDetectorListener = object : ScaleGestureDetector.SimpleOnScaleGestureListener()
{
override fun onScale(detector: ScaleGestureDetector?): Boolean
{
val curScaleFactor = detector?.scaleFactor ?: 1.0f
var curScale = scale * curScaleFactor
curScale = if (curScale >= 1.0f) Math.min(maxScale, curScale) else Math.max(minScale, curScale)
val scaleFactor = if (curScale > scale) 1 + (curScale - scale) / scale else 1.0f - (scale - curScale) / scale
transMatrix.postScale(scaleFactor, scaleFactor, detector?.focusX
?: 0f, detector?.focusY ?: 0f)
postInvalidate()
scale = curScale
return true
}
override fun onScaleEnd(detector: ScaleGestureDetector?)
{
super.onScaleEnd(detector)
}
}在SimpleOnScaleGestureListener的onScale方法处理缩放，将缩放因子应用到transMatrix，并调用postInvalidate（）重新绘制。
接下重点就是onDraw方法：
override fun onDraw(canvas: Canvas?)
{
canvas?.let {
val saveState = it.saveCount
it.save()
it.concat(transMatrix)
super.onDraw(canvas)
it.restoreToCount(saveState)
drawMask(it)
drawRect(it)
}
}先调用save，保存当前画布状态，之后应用transMatrix，缩放和移动画布，然后调用ImageView的onDraw（）方法，也就是父类的方法，用来绘制图片，因为绘制遮罩层和裁剪框不移动，所以恢复画布状态后进行绘制。
最后就是裁剪图片了