实训第一周（1）

实训项目：研发一个可以通过键盘和语音实现输入个性化手写字体的聊天应用，并添加多点触控交互技术。

组员各自工作：

李晨晨：

我本周的任务是：根据触摸位置与中心位置的偏置实现相应的字体局部变形。

这个功能的主要作用是实现异形文字，即同一文字的不同外形。比如即使是同一个人把一个字母写两遍，它们也不会完全相同。

1.文字手写绘入及保存：

绘制我们使用了canvas画布，实现非常简单，主要在ImageView的监听器中定义如下

showBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),
                                iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);
                        show_canvas = new Canvas(showBitmap);
                        show_canvas.drawColor(Color.WHITE);

图片的保存

/*
* 保存图片到SD卡上
*/
protected void saveBitmap() {
    try {
        // 保存图片到SD卡上
        File file = new File(Environment.getExternalStorageDirectory(), System.currentTimeMillis() + ".png");
        FileOutputStream stream = new FileOutputStream(file);
        baseBitmap.compress(CompressFormat.PNG, 100, stream);
        Toast.makeText(MainActivity.this, "保存图片成功", Toast.LENGTH_LONG).show();


        // Android设备Gallery应用只会在启动的时候扫描系统文件夹
        // 这里模拟一个媒体装载的广播，用于使保存的图片可以在Gallery中查看
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_MEDIA_MOUNTED);
        intent.setData(Uri.fromFile(Environment.getExternalStorageDirectory()));
        sendBroadcast(intent);
    } catch (Exception e) {
        Toast.makeText(MainActivity.this, "保存图片失败", Toast.LENGTH_LONG).show();
        e.printStackTrace();
    }

}

2.交互式变形

一开始我们从网上找各种方法，一个比较好的是canvas的drawBitmapMesh网格变形方法。但经过大量的实验发现没法把变形后的bitmap提取出来，但我们必须要保存它，所以最后放弃了。

之后我自己写了一个比网格变形粗糙的方法，但因为效果比较显著且简单，所以就用了这个方法

方法如图所示：中间圆点为触摸点，根据它与图片中心的偏置来相应的拉扯图片（将每行、每列像素放大），然后将新图片每个点的颜色反向映射到原图像对应点的颜色。

 protected int[][] distort(int[][] pixels_copy, int dx, int dy, int row, int col) {
        int[][] result_pixels1 = new int[row][col];
        int[][] result_pixels2 = new int[row][col];

        int currentY, currentX;//当前要拉伸的行数
        int xAdd1, yAdd1, xAdd, yAdd;

        //逐行拉伸
        for (currentY = 0; currentY < row; currentY++) {
            //对于每一行要扩展的像素数
            if (currentY <= dy) {
                xAdd = currentY * Math.abs(dx - col / 2) / dy;
            } else {
                xAdd = (row - currentY) * Math.abs(dx - col / 2) / (row - dy);
            }
            //判断往左还是往右拉伸
            if (dx <= (col / 2)) {
                //往左拉伸
                xAdd1 = xAdd;
            } else {
                xAdd1 = 0;
            }
            //反向映射当前像素点的颜色
            for (int x = 0; x < col; x++) {
                int x0 = (x + xAdd1) * col / (col + xAdd);//对应的原图x坐标
                result_pixels1[currentY][x] = pixels_copy[currentY][x0];
            }
        }

        //逐列拉伸
        for (currentX = 0; currentX < col; currentX++) {
            //对于每一列要扩展的像素数
            if (currentX <= dx) {
                yAdd = currentX * Math.abs(dy - row / 2) / dx;
            } else {
                yAdd = (col - currentX) * Math.abs(dy - row / 2) / (col - dx);
            }
            //判断往上还是往下拉伸
            if (dy <= row / 2) {
                yAdd1 = yAdd;
            } else {
                yAdd1 = 0;
            }
            //反向映射颜色值
            for (int y = 0; y < row; y++) {
                int y0 = (y + yAdd1) * row / (row + yAdd);
                result_pixels2[y][currentX] = result_pixels1[y0][currentX];
            }
        }
        return result_pixels2;
    }

效果如下：

仝心：

 这几天主要在实现录音功能。

        首先自定义了一个音频记录管理器AudioRecordManager用于录音，定义prepareAudio方法，用于设置输出路径，音频源、麦克风，输出格式和音频编码。

[java]  view plain  copy

1. public void prepareAudio(){  
2.         try {  
3.             hasPrepare = false;  
4.             File dir = new File(mAudioDir);  
5.             if (!dir.exists()){  
6.                 dir.mkdirs();  
7.             }  
8.             mMediaRecorder = new MediaRecorder();  
9.             String fileName = UUID.randomUUID().toString() + ".arm";  
10.             File file = new File(dir,fileName);  
11.             mCurrentFilePath = file.getAbsolutePath();  
12.             // 设置输出路径  
13.             mMediaRecorder.setOutputFile(mCurrentFilePath);  
14.             // 设置音频源,麦克风  
15.             mMediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);  
16.             // 设置输出格式  
17.             mMediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.AMR_NB);  
18.             // 设置音频编码  
19.             mMediaRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);  
20.             // 准备  
21.             mMediaRecorder.prepare();  
22.             mMediaRecorder.start();  
23.             hasPrepare = true;  
24.   
25.             if (mStateListener != null){  
26.                 mStateListener.prepareFinish(mCurrentFilePath);  
27.             }  
28.         } catch (IOException e) {  
29.             if (mStateListener != null){  
30.                 mStateListener.prepareError(e.getMessage());  
31.             }  
32.             e.printStackTrace();  
33.         }  
34.   
35.     }  

    接下来获取音量等级，等级上限作为参数传入

[java]  view plain  copy

1. public int getVoiceLevel(int maxLevel){  
2.         try {  
3.             if (hasPrepare){  
4.                 // getMaxAmplitude = 0 - 32767  
5.                 return maxLevel * mMediaRecorder.getMaxAmplitude() / 32768 + 1;  
6.             }  
7.         }catch (Exception e){  
8.             return 1;  
9.         }  
10.         return 1;  
11.     }  

[java]  view plain  copy

1. public void releaseAudio(){  
2.         mMediaRecorder.stop();  
3.         mMediaRecorder.release();  
4.         mMediaRecorder = null;  
5.         hasPrepare = false;  
6.     }  
7.   
8.     public void cancelAudio(){  
9.         releaseAudio();  
10.         if (mCurrentFilePath != null){  
11.             File file = new File(mCurrentFilePath);  
12.             file.delete();  
13.         }  
14.     }      

      接下来定义音频对话管理器AudioDialogManager类用于在和好友的对话中发送录音。

[java]  view plain  copy

1.     private Context mContext;  
2.     private Dialog mDialog;  
3.     private LayoutInflater mInflater;  
4.     private ImageView mIvRecord;  
5.     private ImageView mIvVoiceLevel;  
6.     private TextView mTvTip;  
7.   
8.     public RecordDialogManager(Context context){  
9.         mContext = context;  
10.         mInflater = LayoutInflater.from(mContext);  
11.     }  

    显示之前的消息记录中的录音的方法：

[java]  view plain  copy

1. public void showDialogRecord(){  
2.         View view = mInflater.inflate(R.layout.dialog_audio_record_button,null);  
3.         mDialog = new Dialog(mContext, R.style.Theme_Audio_Record_Button);  
4.         mDialog.setContentView(view);  
5.         mIvRecord = (ImageView) mDialog.findViewById(R.id.iv_record);  
6.         mIvVoiceLevel = (ImageView) mDialog.findViewById(R.id.iv_voice_level);  
7.         mTvTip = (TextView) mDialog.findViewById(R.id.tv_dialog_tip);  
8.         mDialog.show();  
9.     }  

    在聊天中发送录音的操作指示，包括取消发送、提示录音时间过短、取消发送

[java]  view plain  copy

1. public void showRecording(){  
2.         if (mDialog != null && mDialog.isShowing()){  
3.             mIvRecord.setImageResource(R.drawable.recorder);  
4.             mIvVoiceLevel.setVisibility(View.VISIBLE);  
5.             mTvTip.setText(mContext.getString(R.string.move_up_cancel));  
6.         }  
7.     }  
8.   
9.     public void showDialogToShort(){  
10.         if (mDialog != null && mDialog.isShowing()){  
11.             mIvRecord.setImageResource(R.drawable.voice_to_short);  
12.             mIvVoiceLevel.setVisibility(View.GONE);  
13.             mTvTip.setText(mContext.getString(R.string.record_to_short));  
14.         }  
15.     }  
16.   
17.     public void showDialogWantCancel(){  
18.         if (mDialog != null && mDialog.isShowing()){  
19.             mIvRecord.setImageResource(R.drawable.cancel);  
20.             mIvVoiceLevel.setVisibility(View.GONE);  
21.             mTvTip.setText(mContext.getString(R.string.release_cancel));  
22.         }  
23.     }  

    根据音量大小更新音量图标高度

[java]  view plain  copy

1. public void updateVoiceLevel(int level){  
2.         if (mDialog != null && mDialog.isShowing()){  
3.             int resId = mContext.getResources().getIdentifier("v"+level,  
4.                     "drawable",mContext.getPackageName());  
5.             mIvVoiceLevel.setImageResource(resId);  
6.         }  
7.     }  

张静：

1.初始化画布并记录用户手指动作，完成绘画

[java]  view plain  copy

1. private View.OnTouchListener touch = new OnTouchListener() {  
2.        // 定义手指开始触摸的坐标  
3.        float startX;  
4.        float startY;  
5.   
6.        @Override  
7.        public boolean onTouch(View v, MotionEvent event) {  
8.            switch (event.getAction()) {  
9.                // 用户按下动作  
10.                case MotionEvent.ACTION_DOWN:  
11.                    // 第一次绘图初始化内存图片，指定背景为白色  
12.                    if (baseBitmap == null) {  
13.                        baseBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),  
14.                                iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);  
15.                        canvas = new Canvas(baseBitmap);  
16.                        canvas.drawColor(Color.WHITE);  
17.                    }  
18.                    // 记录开始触摸的点的坐标  
19.                    startX = event.getX();  
20.                    startY = event.getY();  
21.                    break;  
22.                // 用户手指在屏幕上移动的动作  
23.                case MotionEvent.ACTION_MOVE:  
24.                    // 记录移动位置的点的坐标  
25.                    float stopX = event.getX();  
26.                    float stopY = event.getY();  
27.   
28.                    //根据两点坐标，绘制连线  
29.                    paint.setARGB(255, 0, 0, 0);  
30.                    canvas.drawLine(startX, startY, stopX, stopY, paint);  
31.   
32.                    // 更新开始点的位置  
33.                    startX = event.getX();  
34.                    startY = event.getY();  
35.   
36.                    // 把图片展示到ImageView中  
37.                    iv_canvas.setImageBitmap(baseBitmap);  
38.                    break;  
39.                case MotionEvent.ACTION_UP:  
40.                    break;  
41.                default:  
42.                    break;  
43.            }  
44.            return true;  
45.        }  
46.    };  

2. 保存图片到SD卡上

[java]  view plain  copy

1. protected void saveBitmap() {  
2.         try {  
3.             // 保存图片到SD卡上  
4.             File file = new File(Environment.getExternalStorageDirectory(), System.currentTimeMillis() + ".png");  
5.             FileOutputStream stream = new FileOutputStream(file);  
6.             baseBitmap.compress(CompressFormat.PNG, 100, stream);  
7.             Toast.makeText(MainActivity.this, "保存图片成功", Toast.LENGTH_LONG).show();  
8.   
9.             // Android设备Gallery应用只会在启动的时候扫描系统文件夹  
10.             // 这里模拟一个媒体装载的广播，用于使保存的图片可以在Gallery中查看  
11.             Intent intent = new Intent();  
12.             intent.setAction(Intent.ACTION_MEDIA_MOUNTED);  
13.             intent.setData(Uri.fromFile(Environment.getExternalStorageDirectory()));  
14.             sendBroadcast(intent);  
15.         } catch (Exception e) {  
16.             Toast.makeText(MainActivity.this, "保存图片失败", Toast.LENGTH_LONG).show();  
17.             e.printStackTrace();  
18.         }  
19.     }  

3. 清除画板

[java]  view plain  copy

1. protected void resumeCanvas() {  
2.         // 手动清除画板的绘图，重新创建一个画板  
3.         if (showBitmap != null) {  
4.             showBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),  
5.                     iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);  
6.             show_canvas = new Canvas(showBitmap);  
7.             show_canvas.drawColor(Color.WHITE);  
8.             new_canvas.setImageBitmap(showBitmap);  
9.             //Toast.makeText(MainActivity.this, "清除画板成功，可以重新开始绘图", Toast.LENGTH_LONG).show();  
10.         }  
11.         if (baseBitmap != null) {  
12.             baseBitmap = Bitmap.createBitmap(iv_canvas.getWidth(),  
13.                     iv_canvas.getHeight(), Bitmap.Config.ARGB_8888);  
14.             canvas = new Canvas(baseBitmap);  
15.             canvas.drawColor(Color.WHITE);  
16.             iv_canvas.setImageBitmap(baseBitmap);  
17.             Toast.makeText(MainActivity.this, "清除画板成功，可以重新开始绘图", Toast.LENGTH_LONG).show();  
18.         }  
19.     }  

4.我们要实现的功能是基于一个聊天app,因此我了解并学习了一下相关的聊天软件开发基础知识

张雨薇：

 创新实训第一周

实训开始的第一周，我上网查询了许多有关多点触控的论文和资料，为今后的代码编写做准备。

论文中提到多点触摸技术的引入使得以触摸屏为代表的人机交互方式更加便利和自然，但同时也带来了如何识别基于多点触摸双手交互手势的问题，多点触摸原理的不同也导致了对双手手势识别方法的不同。此外,常见商用多点触摸设备提供的手势交互语义主要面向日常生活使用，缺乏针对军用，特别是针对指挥所应用的交互语义。在指挥所应用中,需要多点触摸自然手势的环境主要是基于地理信息系统的图上操作，如何将自然手势映射到地理信息系统的图上操作，是自然手势识别的一个重要问题。

针对指挥所应用背景,利用自然交互手势完成轨迹相对比较单调的特点，基于指挥所图上作业应用的交互手势语义定义和触摸信号采集，文中提出了一整套简捷可适应指挥所作业的多点触摸自然手势定义与识别方法，并基于红外多点触摸设备实现了上述方法，进行了实验验证。

指挥所中基于多点触摸的自然手势交互的实现主要包括指挥所自然手势的定义、触摸信号采集、手势识别三部分。根据指挥所作业中的人机交互任务及对人手自然张开与平面触摸时的触点位置关系特征，定义静态和动态两类触摸手势，建立手势集合数据库，包括静态触摸手势集合和动态触摸手势集合。动态触摸手势集合包括平移手势、弧移手势、双手旋转手势、单手旋转手势、缩放手势、捏取释放手势和撮取手势，其中平移手势、弧移手势、捏取释放手势和撮取手势默认为单手手势，缩放手势默认为双手手势。识别方法的设计需基于上述定义的交互手势集合中手势的特点进行，这样才能保证较高的识别正确率和识别效率。对于静态手势而言,人手自然张开触摸时,由于手指长度和位置的不同，触点两两之间的距离有所不同且触点所构成多边形各顶角的角度也呈现一定的特征。经过对不同身高个体手指自然张开触摸平面时触点间距离的测量数据进行统计，确定单手触点间的最大距离，以此为依据将触点分为左右手两个集合。动态手势识别流程。首先判断移动触点间在一个计算周期内有无相对运动，若移动触点间有任意两点之间的相对运动距离大于阈值，则判断为有相对运动；否则，判断为无相对运动，将相对无运动的移动触点模糊处理为一个触点，触点位置取其几何中心值，单移动触点的位置取原值。