android-cloud-H5/static/screenAndroid/WXdraw.js

//蒙版
var canvas_bak = document.getElementById('box');

var winHeight = window.screen.height - window.innerHeight;
var vowidth = window.screen.width;
var topwinHeightDraw = window.screen.height - window.innerHeight + 30; // 计算title top 头部
var numse = window.screen.height;

// 计算title top 头部 连接断开，是否准备重连？
if (numse <= 70) {
  var voheight = window.screen.height - winHeight - 34 - 20;
} else {
  var voheight = window.screen.height - topwinHeightDraw - 20;
}

// 画笔大小
var resolving = 1; // 1: 竖屏；2：横屏；

var url = window.location.href;
url = url.split('/');

var parameters = GetRequest();
var videoWidth, videoHeight;
var isControl = true; // 是否是观看模式
var isAuth = parameters['authPhone']; // 是否是获取的云手机

var wsss,
  errorTime = 0;
var first = true;
function throttle(fn, delay) {
  var flag = true;
  errorTime += delay;
  return () => {
    if (!flag) return;
    flag = false;
    timer = setTimeout(() => {
      fn();
      flag = true;
    }, delay);
  };
}

function doConnectDirectives() {
  videoWidth = Number(resolvingPower) ? Number(resolvingPower) : 720;
  videoHeight = videoWidth === 720 ? 1280 : 1920;
  wsss = new WebSocket(cUrl);
  wsss.binaryType = 'arraybuffer';

  wsss.onopen = function () {
    // 进入发起询问
    var pings2 = {
      type: 'forwardMsg',
      data: {
        code: '3000',
        desc: '询问是否有在控制', // 可选
      },
    };
    wsss.send(JSON.stringify(pings2));
    wsss.send(
      JSON.stringify({
        type: 'getPhoneSize',
      }),
    );
  };
  wsss.onerror = function (evt) {
    wsss.close();
    throttle(doConnectDirectives, 100);
    if (errorTime > 1000) {
      quit();
    }
  };
  wsss.onmessage = function (res) {
    console.log('res', res);
    var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
    console.log('result.type', result.type);
    if (result.type === 'cutting') {
      if (result.data.status === 0) {
        $.toast('复制成功', 'text');
      } else {
        $.toast(result.msg, 'text');
      }
      return;
    }
    if (result.type === 'forwardMsg') {
      switch (String(result.data.code)) {
        case '3000': {
        }
        case '4000': {
          if (isAuth === 'huo') {
            $.confirm(
              '授权方已收回控制权，您进入观看屏幕模式',
              function () {
                //点击确认后的回调函数
                isControl = false;
              },
              function () {
                isControl = false;
                //点击取消后的回调函数
                quit();
              },
            );
            return;
          }
          $.confirm(
            '当前云手机正在授控，是否请求获取云手机控制权？',
            function () {
              //点击确认后的回调函数
              var ping = {
                type: 'forwardMsg',
                data: {
                  code: '5000',
                  desc: '控制权限收回', // 可选
                },
              };
              wsss.send(JSON.stringify(ping));
              isControl = true;
            },
            function () {
              //点击取消后的回调函数
              isControl = false;
            },
          );
          return;
        }
        case '5000': {
          console.log(result);
          $.confirm(
            '授权方已收回控制权，您进入观看屏幕模式',
            function () {
              //点击确认后的回调函数
              isControl = false;
            },
            function () {
              isControl = false;
              //点击取消后的回调函数
              quit();
            },
          );
          return;
        }
        case 'phoneSizeChange': {
          window.currentPhoneSize = {
            id: result.data.id,
            width: result.data.width,
            height: result.data.height,
            pid: result.data.pid,
          };
          return;
        }
        default: {
          return;
        }
      }
    }
    if (result.type === 'payInitiateEvent') {
      var url = window.location.href;
      url = url.split('/');
      var baseUrl = url[0] + '//' + url[2];
      $.ajax({
        url: baseUrl + '/api/pay/third/order',
        data: JSON.stringify({
          orderNum: result.data.orderNum,
          orderAmount: result.data.orderAmount,
          appKey: result.data.appKey,
        }),
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        success: function (res) {
          if (result.data.payType === 1) {
            // 微信
            if (window.__wxjs_environment === 'miniprogram') {
              // 小程序
              // copyUrl(result.data.payUrl);
            } else {
              window.location.href = result.data.payUrl;
            }
          } else {
            window.location.href = result.data.payUrl;
          }
        },
      });
      return;
    }
    if (result.type === 'getPhoneSize') {
      // console.log(result);
      const data = window.phoneSizeList.find(function (v) {
        return (
          v.width === result.data.width &&
          v.height === result.data.height &&
          v.pid === result.data.pid
        );
      });
      window.currentPhoneSize = data || {
        width: result.data.width,
        height: result.data.height,
        pid: result.data.pid,
      };
      return;
    }
  };
}
$('body').on('click', function () {
  draw_graph('pencil');
});
//剪切板
$('.upload').on('click', function () {
  var texts = $(this).attr('data-text');
  if (texts == 'uploads') {
    $('.mainbox').css({
      display: 'block',
    });
    $('.sbox').css({
      display: 'none',
    });
  }
});

//home 控制home
$('.botmat1img').on('click', function () {
  var codes = $(this).attr('data-text');
  if (codes == 'home' && isControl) {
    wsss.send(ExexuteKeyBoard(3));
  } else if (codes == 'return' && isControl) {
    wsss.send(ExexuteKeyBoard(4));
  } else if (codes == 'gengduo' && isControl) {
    wsss.send(ExexuteKeyBoard(187));
  }
});
// 高清控制
$('.PictureQuality').on('click', function () {
  if (!isControl) {
    return;
  }
  $(this).addClass('avit').siblings().removeClass('avit');
  var id = $(this).attr('data-id');
  var buffer = makeSharpness(Number(id));
  ws.send(buffer);
});
//画图形
var draw_graph = function (graphType, obj) {
  //把蒙版放于画板上面
  $('#container').css('z-index', 30);
  $('#dedit').css('z-index', 20);
  var canDraw = false;
  //鼠标按下获取 开始xy开始画图
  // var ongoingTouches = [];
  var touchstart = function (e) {
    if (!isControl) {
      return;
    }
    $('.control-right-img').attr({
      'data-id': '1',
    });
    $('.leftmains').css({
      right: '-4rem',
    });
    const action = 0;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.width / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.height / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
    canDraw = true;
  };

  //鼠标离开 把蒙版canvas的图片生成到canvas中
  var touchend = function (e) {
    if (!isControl) {
      return;
    }
    const action = 1;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.width / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.height / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
    canDraw = false;
  };

  //清空层 云手机超出屏幕的开关
  var clearContext = function () {
    canDraw = false;
  };

  // 鼠标移动
  var touchmove = function (e) {
    e.preventDefault();
    if (!isControl) {
      return;
    }
    const action = 2;
    Array.from(e.originalEvent.changedTouches).forEach(function (item, index) {
      const x = item.clientX - item.target.getBoundingClientRect().x;
      const y = item.clientY - item.target.getBoundingClientRect().y;
      return wsss.send(
        JSON.stringify({
          type: 'event',
          data: {
            action,
            count: e.originalEvent.touches.length,
            pointerId: item.identifier,
            x: (function () {
              return (
                resolving
                  ? x * (window.currentPhoneSize.width / vowidth)
                  : y * (window.currentPhoneSize.width / voheight)
              ).toFixed(2);
            })(),
            y: (function () {
              return (
                resolving
                  ? y * (window.currentPhoneSize.height / voheight)
                  : (vowidth - x) * (window.currentPhoneSize.height / vowidth)
              ).toFixed(2);
            })(),
          },
        }),
      );
    });
  };

  //鼠标离开区域以外 除了涂鸦 都清空
  var mouseout = function () {
    if (graphType != 'handwriting') {
      clearContext();
    }
  };

  $(canvas_bak).off();
  $(canvas_bak).on('touchstart', touchstart);
  $(canvas_bak).on('touchmove', touchmove);
  $(canvas_bak).on('touchend', touchend);
  $(canvas_bak).on('mouseout', mouseout);
};

// 获取url中"?"符后的字串
function GetRequest() {
  var url = location.search;
  var obj = new Object();
  if (url.indexOf('?') != -1) {
    var str = url.substr(1);
    strs = str.split('&');
    for (var i = 0; i < strs.length; i++) {
      obj[strs[i].split('=')[0]] = strs[i].split('=')[1];
    }
  }
  return obj;
}