Android编程实现在Bitmap上涂鸦效果

本文实例讲述了Android编程实现在Bitmap上涂鸦效果。分享给大家供大家参考,具体如下:

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 <LinearLayout
  android:id="@+id/handwriteview"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="horizontal"
  android:gravity="center_horizontal" >
  <Button
   android:id="@+id/clear"
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="清屏" />
 </LinearLayout>
</LinearLayout>

重写的View文件:

public class HandWrite extends View
{
 private Paint paint = null;
 private Bitmap originalBitmap = null;
 private Bitmap new1Bitmap = null;
 private Bitmap new2Bitmap = null;
 private float clickX = 0,clickY = 0;
 private float startX = 0,startY = 0;
 private boolean isMove = true;
 private boolean isClear = false;
 private int color = Color.GREEN;
 private float strokeWidth = 2.0f;
 public HandWrite(Context context,Bitmap b)
 {
  super(context);
  originalBitmap = Bitmap.createBitmap(b).copy(Bitmap.Config.ARGB_8888, true);
  new1Bitmap = Bitmap.createBitmap(originalBitmap);
 }
 public void clear(){
  isClear = true;
  new2Bitmap = Bitmap.createBitmap(originalBitmap);
  invalidate();
 }
 public void setstyle(float strokeWidth){
  this.strokeWidth = strokeWidth;
 }
 @Override
 protected void onDraw(Canvas canvas)
 {
  super.onDraw(canvas);
  canvas.drawBitmap(HandWriting(new1Bitmap), 0, 0,null);
 }
 public Bitmap HandWriting(Bitmap originalBitmap)
 {
  Canvas canvas = null;
  if(isClear){
   canvas = new Canvas(new2Bitmap);
  }
  else{
   canvas = new Canvas(originalBitmap);
  }
  paint = new Paint();
  paint.setStyle(Style.STROKE);
  paint.setAntiAlias(true);
  paint.setColor(color);
  paint.setStrokeWidth(strokeWidth);
  if(isMove){
   canvas.drawLine(startX, startY, clickX, clickY, paint);
  }
  startX = clickX;
  startY = clickY;
  if(isClear){
   return new2Bitmap;
  }
  return originalBitmap;
 }
 @Override
 public boolean onTouchEvent(MotionEvent event)
 {
  clickX = event.getX();
  clickY = event.getY();
  if(event.getAction() == MotionEvent.ACTION_DOWN){
   isMove = false;
   invalidate();
   return true;
  }
  else if(event.getAction() == MotionEvent.ACTION_MOVE){
   isMove = true;
   invalidate();
   return true;
  }
  return super.onTouchEvent(event);
 }
}

Activity文件:

public class HandWritingActivity extends Activity
{
 /** Called when the activity is first created. */
 private LinearLayout handWrite = null;
 private Button clear = null;
 int requestWidth=116;
 int requestHeight=173;
 int inSampleSize;
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_hand_writing);
  handWrite = (LinearLayout)findViewById(R.id.handwriteview);
  clear = (Button)findViewById(R.id.clear);
  clear.setOnClickListener(new clearListener());
 }
 private class clearListener implements OnClickListener{
  public void onClick(View v)
  {
//   handWrite.clear();
   BitmapFactory.Options opts = new Options();
   opts.inJustDecodeBounds = true;// 让 bimapfactory假的解析这个位图,只获取位图的边框信息
   BitmapFactory.decodeResource(getResources(), R.drawable.cool, opts);
   if (opts.outHeight > requestHeight || opts.outWidth > requestWidth) {
    if (opts.outWidth > opts.outHeight) {
     inSampleSize = Math.round((float) opts.outHeight
       / (float) requestHeight);
    } else {
     inSampleSize = Math.round((float) opts.outWidth
       / (float) requestWidth);
    }
   }
    System.out.println("宽度:" + opts.outWidth);
    System.out.println("高度:" + opts.outHeight);
   opts.inSampleSize = inSampleSize;
   System.out.println(inSampleSize);
   opts.inJustDecodeBounds = false;// 由于已经得到了缩放比例 ,让位图工厂真正的解析这个位图
   // 由于前面 我们已经解析了这个输入流, 需要重新初始化这个输入流
   Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.cool, opts);
   HandWrite hw = new HandWrite(HandWritingActivity.this, b);
   System.out.println(b.getWidth());
   handWrite.addView(hw);
  }
 }
}

整合的一个涂鸦工具类:

/**
 * 使用方法:
 * 1. 创建TuYaView类实例
 * 2. 调用drawTuya方法
 * 3. 参数1:context
 * 4. 参数2:图像的byte[]字节数组
 * 5. ImageView实例
 * 6. 画笔定义
 * **/
import com.ziipin.lhdc.utils.ToastUtil;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.BitmapFactory.Options;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
public class TuYaView {
 // 原始图片
 private Bitmap mOrignBitmap;
 private Bitmap mEditBitmap;
 private int inSampleSize;
 private int requestWidth = 500;
 private int requestHeight = 700;
 /** 编辑图片的画布 */
 private Canvas mCanvas;
 private ImageView image;
 private Paint mPaint;
 public Bitmap drawTuya(Context context, byte[] _data, ImageView image,
   Paint mPaint) {
  this.image = image;
  this.mPaint = mPaint;
  mOrignBitmap = BitmapFactory.decodeByteArray(_data, 0, _data.length);
  return showEditBitmap(context, _data, image);
 }
 /**
  * 显示编辑的图片
  */
 private Bitmap showEditBitmap(Context context, byte[] _data, ImageView image) {
  mOrignBitmap = getScaleBitmap(_data, image);
  if (mOrignBitmap == null) {
   ToastUtil.show(context, "编辑出错");
  }
  mEditBitmap = mOrignBitmap.copy(mOrignBitmap.getConfig(), true);
  mCanvas = new Canvas(mEditBitmap);
  mCanvas.drawBitmap(mOrignBitmap, new Matrix(), new Paint());
  image.setImageBitmap(mEditBitmap);
  image.setOnTouchListener(mTouchListener);
  return mEditBitmap;
 }
 /**
  * 获取结果缩放放后的图片
  *
  * @return
  */
 private Bitmap getScaleBitmap(byte[] _data, ImageView image) {
  BitmapFactory.Options opts = new Options();
  opts.inJustDecodeBounds = true;// 让 bimapfactory假的解析这个位图,只获取位图的边框信息
  BitmapFactory.decodeByteArray(_data, 0, _data.length, opts);
  if (opts.outHeight > requestHeight || opts.outWidth > requestWidth) {
   if (opts.outWidth > opts.outHeight) {
    inSampleSize = Math.round((float) opts.outHeight
      / (float) requestHeight);
   } else {
    inSampleSize = Math.round((float) opts.outWidth
      / (float) requestWidth);
   }
  }
  opts.inSampleSize = inSampleSize;
  opts.inJustDecodeBounds = false;// 由于已经得到了缩放比例 ,让位图工厂真正的解析这个位图
  // 由于前面 我们已经解析了这个输入流, 需要重新初始化这个输入流
  Bitmap bmp = BitmapFactory
    .decodeByteArray(_data, 0, _data.length, opts);
  return bmp;
 }
 // touch事件
 private OnTouchListener mTouchListener = new OnTouchListener() {
  int startx = 0;
  int starty = 0;
  @Override
  public boolean onTouch(View v, MotionEvent event) {
   switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:// 手指第一次触摸屏幕
    startx = (int) event.getX();
    starty = (int) event.getY();
    break;
   case MotionEvent.ACTION_MOVE: // 手指在imageview上中移动
    int x = (int) event.getX();
    int y = (int) event.getY();
    mCanvas.drawLine(startx, starty, x, y, mPaint);
    startx = (int) event.getX();
    starty = (int) event.getY();
    image.invalidate();
    break;
   }
   return true;
  }
 };
}

希望本文所述对大家Android程序设计有所帮助。

时间: 2015-12-01

Android高手进阶教程(二十六)之---Android超仿Path菜单的功能实现!

Hi~大家好,出来创业快3个月了,一切还不错,前一段时间用了业余时间搞了个问答类网站YQMA.想做中国的stackoverflow,哈哈,只是YY下,希望大家多多支持! 好了,今天给大家分享的是Path菜单的简单实现,可以支持自定义方向(左上,右上,右下,左下),并且可以自定义菜单的个数,难点就是菜单的摆放位置(动态设置margin),还有动画的实现,其实动画只是简单用了个TranslateAnimation,N个菜单一起移动的时候感觉很cool~ 这里也用到了自定义标签,这里不懂的童鞋可以看我

Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

Android 开发实例简单涂鸦板

在Android上开发一些小应用既可以积累知识又可以增加乐趣,与任务式开发不同,所以想到在Android系统上实现一个简单的涂鸦板,这是我们练手的一种好的方法.   涂鸦板应用的代码实现 新建工程MyWall,修改/res/layout/main.xml文件,在里面添加一个SurfaceView和两个Button,用到了RelativeLayout布局,完整的main.xml文件如下: XML/HTML代码 <?xml version="1.0" encoding="u

Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

Android 使用Path实现涂鸦功能

今天实现一个涂鸦效果,会分几步实现,这里有一个重要的知识点就是图层,要理解这个,不然你看这篇博客,很迷茫,迷茫的苍茫的天涯是我的爱,先从简单的需求做起,绘制一条线,代码如下: package com.tuya; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.util

Android通过Path实现搜索按钮和时钟复杂效果

在Android中复杂的图形的绘制绝大多数是通过path来实现,比如绘制一条曲线,然后让一个物体随着这个曲线运动,比如搜索按钮,比如一个简单时钟的实现: 那么什么是path呢! 定义:path  就是路径,就是图形的路径的集合,它里边包含了路径里边的坐标点,等等的属性.我们可以获取到任意点的坐标,正切值. 那么要获取Path上边所有点的坐标还需要用到一个类,PathMeasure; PathMesure: PathMeasure是一个用来测量Path的类,主要有以下方法: 构造方法 公共方法 可

Android自定义View系列之Path绘制仿支付宝支付成功动画

前言 使用支付宝付款时,我们可以看到成功或者失败都会有个动画提示,如果我们需要做这样的效果的话,当然,你可以让设计师给你做个GIF,但是我们知道图像比较耗内存的,我们自己可以用代码实现还是代码实现好点吧. 效果 实现方法 首先我们需要了解PathMeasure这个类,这个类我们可以理解为用来管理Path.我们主要看几个方法. PathMeasure(): 构造方法 ,实例化一个对象 PathMeasure(Path path,boolean isClosed):传入Path对象和是否闭合,pat

Android自定义View实现shape图形绘制

概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解

首先声明本文是基于GitHub上"baoyongzhang"的SwipeMenuListView修改而来,该项目地址: https://github.com/baoyongzhang/SwipeMenuListView 可以说这个侧滑删除效果是我见过效果最好且比较灵活的项目,没有之一!!! 但是在使用它之前需要给大家提两点注意事项: 1,该项目支持Gradle dependence,但是目前作者提供的依赖地址对应的项目不是最新的项目,依赖过后的代码与demo中使用的不一致,会提示没有B

Android自定义View之继承TextView绘制背景

本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

Android中PathMeasure仿支付宝支付动画

前言 在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20

Android自定义View实现仿GitHub的提交活跃表格

说明 本文可能需要一些基础知识点,如Canvas,Paint,Path,Rect等类的基本使用,建议不熟悉的同学可以学习GcsSloop安卓自定义View教程目录,会帮助很大. 上图就是github的提交表格,直观来看可以分为几个部分进行绘制: (1)各个月份的小方格子,并且色彩根据提交次数变化,由浅到深 (2)右下边的颜色标志,我们右对齐就可以了 (3)左边的星期,原图是从周日画到周六,我们从周一画到周日 (4)上面的月份,我们只画出1-12月 (5)点击时候弹出当天的提交情况,由一个小三角和

Android自定义View实现仿驾考宝典显示分数效果(收藏)

小编最近发现,一些炫酷的view效果,通过需要自定义view和属性动画结合在一起,才能更容易的实现. 实现的效果图如下: 所用的知识有: (1)自定义View中的 path ,主要用来绘制指示块. (2)属性动画-ValueAnimator,并设置属性动画的监听器. (3)根据属性动画是否结束的标志,决定是否绘制分数对应的描述文本内容. 实现步骤: 继承自View,在构造函数中获取自定义属性和初始化操作(初始化画笔) private void obtainAttrs(Context contex

Android开发使用自定义View将圆角矩形绘制在Canvas上的方法

本文实例讲述了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法.分享给大家供大家参考,具体如下: 前几天,公司一个项目中,头像图片需要添加圆角,这样UI效果会更好看,于是写了一个小的demo进行圆角的定义,该处主要是使用BitmapShader进行了渲染(如果要将一张图片裁剪成椭圆或圆形显示在屏幕上,也可以使用BitmapShader来完成). BitmapShader类完成渲染图片的基本步骤如下: 1.创建BitmapShader类的对象 /** * Call this

Android自定义View 仿QQ侧滑菜单的实现代码

先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来