APICloud中自定义相机UI的实现

        在使用APICloud进行开发时，我们有时会需要调用拍照功能，并且需要在定义相机UI界面，此时我们就需要想办法怎样能够实现，在云控项目中我们需要在身份认证时，进行身份证认证的时候调用相机功能并且在相机界面上加上我们需要的UI元素，我们可以使用FNPhotograph模块来实现我们想要的效果。

        实现思路：

                      1.打开相机界面  

                      2.一个自定义UI的frame页面，背景透明，显示在相机页面上面  

                      3.自定义frame层会挡住底部相机页面（导致点击、聚焦等功能没法实现） 

                      4.在自定义UI页面上使用execScript调用相机页面的方法

        1.相机页面：

          apiready = function(){
            // 监听手机home键
            api.addEventListener({
                name: 'resume'
            }, function(ret, err) {
                // alert('按了Home键');
                // 重新打开相机
                test_closeCamera();
                if(flag==0){
                    test_openCameraView();
                }else if(flag==1){
                    test_openCameraView2();
                }else {
                    console.log('123');
                }

            });
      };
      
      // 2.openCameraView:打开纯相机页面(正面)
      function test_openCameraView(){
          flag=0;
          // console.log(flag);
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.openCameraView({
            rect: {
               x: 0,
               y: 0,
               w: api.frameWidth,
               h: api.frameHeight
            },
            orientation: 'portrait',
            fixedOn: api.frameName,
            fixed: true
          }, function(ret){
              window_idcard1();
              // 1.拍照后
              // if (ret && ret.eventType == 'takePhoto') {
              //     FNPhotograph.close();
              //     api.closeFrame({
              //         name: 'window_idcard.html'
              //     });
              //     alert('拍照成功，关闭当前相机');
              // }

          });
      }
      // 2.openCameraView:打开纯相机页面(反面)
      function test_openCameraView2(){
          flag=1;
          // console.log(flag);
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.openCameraView({
            rect: {
               x: 0,
               y: 0,
               w: api.frameWidth,
               h: api.frameHeight
            },
            orientation: 'portrait',
            fixedOn: api.frameName,
            fixed: true
          }, function(ret){
              window_idcard2();
         });
      }

      // 拍照
      function test_take(){
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.takePhoto({
            quality: 'high',
            path: 'fs://FNPhotograph/01.png',
            album: true
          }, function(ret){
            alert("拍照成功");
          });
      }

      // 对焦
      function test_focus(){
        var FNPhotograph = api.require('FNPhotograph');
        FNPhotograph.setFocusMode({
            focusMode: 'continue'
        });
        test_focusBox();
        test_focusRegion();
      }
      // 对焦提示框
      function test_focusBox(){
        var FNPhotograph = api.require('FNPhotograph');
        FNPhotograph.setFocusBox({
            box: {
                width: 1,
                color: '#ff0',
                maxSize: 100,
                minSize: 60
            }
        });
      }
      // 对焦焦点
      function test_focusRegion(){
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.setFocusRegion({
              region: {
                  x: api.frameWidth/2,
                  y: api.frameHeight/2.1,
                  w: 60,
                  h: 60
              },
              animation :true
          });
          // alert('对焦区域');
      }
      // 关闭相机(正面)
      function test_closeCamera(){
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.closeCameraView(
          function(ret) {
                  api.closeFrame({
                      name: 'frame_idcard1.html'
                  });
                  FNPhotograph.close();
                  // alert('关闭相机');
          });
      }
      // 关闭相机(正面)
      function test_closeCamera(){
          var FNPhotograph = api.require('FNPhotograph');
          FNPhotograph.closeCameraView(
          function(ret) {
                  api.closeFrame({
                      name: 'frame_idcard1.html'
                  });
                  api.closeFrame({
                      name: 'frame_idcard2.html'
                  });
                  FNPhotograph.close();
                  // alert('关闭相机');
          });
      }

      // 身份证认证遮盖层（正面）
      function window_idcard1(){
          api.openFrame({
              name : 'frame_idcard1.html',
              url : './frame_idcard1.html',
              rect : {
                  x : 0,
                  y : 0,
                  w : 'auto',
                  h : 'auto'
              },
              bounces : false,
              bgColor : 'transparent',
              vScrollBarEnabled : true,
              hScrollBarEnabled : true
          });
      }
      // 身份证认证遮盖层(反面)
      function window_idcard2(){
          api.openFrame({
              name : 'frame_idcard2.html',
              url : './frame_idcard2.html',
              rect : {
                  x : 0,
                  y : 0,
                  w : 'auto',
                  h : 'auto'
              },
              bounces : false,
              bgColor : 'transparent',
              vScrollBarEnabled : true,
              hScrollBarEnabled : true
          });
      }

        2.自定义相机UI frame层

      // 点击拍照
      function window_idcardBox(){
        var jsfun = 'test_take();';
        api.execScript({
          name: 'root',
          script: jsfun
        });

      }
      // 点击图片聚焦
      function window_frameImg(){
        var jsfun = 'test_focus();';
        api.execScript({
          name: 'root',
          script: jsfun
        });
      }

      // 关闭相机
      function window_close(){
        var jsfun = 'test_closeCamera();';
        api.execScript({
          name: 'root',
          script: jsfun
        });
      }