android-cloud-H5/static/screenIos/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; // -winHeight
//计算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;
var 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 pings = { type: 'getVsStatus' };
    wsss.send(JSON.stringify(pings));
    var bitRate = {
      data: {
        bitRate: 1243000,
      },
      type: 'bitRate',
    };
    wsss.send(JSON.stringify(bitRate));
    // 进入发起询问
    var pings2 = {
      type: 'forwardMsg',
      data: {
        code: '3000',
        desc: '询问是否有在控制', // 可选
      },
    };
    wsss.send(JSON.stringify(pings2));

    wsss.send(
      JSON.stringify({
        type: 'getPhoneSize',
      }),
    );
  };
  wsss.onerror = function () {
    wsss.close();
    throttle(doConnectDirectives, 100);
    if (errorTime > 1000) {
      quit();
    }
  };
  wsss.onmessage = function (res) {
    var result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
    console.log(
      '🚀 ~ file: WXdraw.js ~ line 78 ~ doConnectDirectives ~ result',
      result,
    );

    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;
        }
        default: {
          return;
        }
      }

      if (isAuth !== 'none') {
        if (
          String(result.data.code) === '4000' ||
          String(result.data.code) === '3000'
        ) {
          if (isAuth === 'huo') {
            $.confirm(
              '授权方已收回控制权，您进入观看屏幕模式',
              function () {
                //点击确认后的回调函数
                isControl = false;
              },
              function () {
                isControl = false;
                //点击取消后的回调函数
                quit();
              },
            );
          } else {
            $.confirm(
              '当前云手机正在授控，是否请求获取云手机控制权？',
              function () {
                //点击确认后的回调函数
                var ping = {
                  type: 'forwardMsg',
                  data: {
                    code: '5000',
                    desc: '控制权限收回', // 可选
                  },
                };
                wsss.send(JSON.stringify(ping));
                isControl = true;
              },
              function () {
                //点击取消后的回调函数
                isControl = false;
              },
            );
          }
          return;
        }
        return;
      }
      if (result.data.code === 'phoneSizeChange') {
        // console.log(result.data);
        window.currentPhoneSize = {
          id: result.data.id,
          width: result.data.width,
          height: result.data.height,
          pid: result.data.pid,
        };
        return;
      }
      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', this);
});
//剪切板
$('.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 cmd = {
    type: 'switchSharpness',
  };

  decodeWoker.postMessage(cmd); //通知解码器worker切换分辨率
  var buffer = makeSharpness(Number(id));
  webSocketWorker.postMessage(buffer);
});
var canDraw = false;
//画图形
var draw_graph = function (graphType) {
  //把蒙版放于画板上面
  $('#container').css('z-index', 30);
  $('#dedit').css('z-index', 20);
  // 先画在蒙版上 再复制到画布上
  //鼠标按下获取 开始xy开始画图
  // var ongoingTouches = [];
  var touchstart = function (e) {
    console.log('🚀 ~ file: WXdraw.js ~ line 244 ~ touchstart ~ e', 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);
            })(),
          },
        }),
      );
    });
    // var touchfor = e.originalEvent.changedTouches; //for 的手指数组
    // //是否横屏
    // for (var i = 0; i < touchfor.length; i++) {
    //   // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
    //   // var acrossHeightY =
    //   //   videoWidth - touchfor[i].pageX * (videoWidth / vowidth);
    //   // if (resolving) {
    //   //   var verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   var verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // } else {
    //   //   var verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   var verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // }
    //   var ping =
    //     // resolving == 0 ?
    //     //   { "data": { "action": 1, "count": ongoingTouches.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
    //     {
    //       data: {
    //         action: 1,
    //         count: ongoingTouches.length,
    //         pointerId: touchfor[i].identifier,
    //         x: (() =>
    //           (resolving
    //             ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
    //             : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
    //           ).toFixed(2))(),
    //         y: (() =>
    //           (resolving
    //             ? touchfor[i].pageY *
    //               (window.currentPhoneSize.height / voheight)
    //             : (vowidth - touchfor[i].pageX) *
    //               (window.currentPhoneSize.height / vowidth)
    //           ).toFixed(2))(),
    //       },
    //       type: 'event',
    //     };
    //   wsss.send(JSON.stringify(ping));
    //   ongoingTouches.forEach(function (item, index) {
    //     if (item.identifier === touchfor[i].identifier) {
    //       ongoingTouches.splice(index, 1);
    //     }
    //   });
    // }
    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 touchfor = e.originalEvent.targetTouches; //for 的手指数组
    // for (var i = 0; i < touchfor.length; i++) {
    //   // var acrossWidthX = touchfor[i].pageY * (videoHeight / voheight);
    //   // var acrossHeightY =
    //   //   videoWidth - touchfor[i].pageX * (videoWidth / vowidth);

    //   // let verticalWidthX = 0;
    //   // let verticalHeightY = 0;
    //   // if (resolving) {
    //   //   verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // } else {
    //   //   verticalWidthX =
    //   //     touchfor[i].pageX * (window.currentPhoneSize.width / vowidth);
    //   //   verticalHeightY =
    //   //     touchfor[i].pageY * (window.currentPhoneSize.height / voheight);
    //   // }
    //   var ping =
    //     // resolving == 0 ?
    //     //   { "data": { "action": 2, "count": touchfor.length, "pointerId": touchfor[i].identifier, "x": acrossWidthX.toFixed(2), "y": acrossHeightY.toFixed(2) }, "type": "event" } :
    //     {
    //       data: {
    //         action: 2,
    //         count: touchfor.length,
    //         pointerId: touchfor[i].identifier,
    //         x: (() =>
    //           (resolving
    //             ? touchfor[i].pageX * (window.currentPhoneSize.width / vowidth)
    //             : touchfor[i].pageY * (window.currentPhoneSize.width / voheight)
    //           ).toFixed(2))(),
    //         y: (() =>
    //           (resolving
    //             ? touchfor[i].pageY *
    //               (window.currentPhoneSize.height / voheight)
    //             : (vowidth - touchfor[i].pageX) *
    //               (window.currentPhoneSize.height / vowidth)
    //           ).toFixed(2))(),
    //       },
    //       type: 'event',
    //     };
    //   wsss.send(JSON.stringify(ping));
    // }
  };

  //鼠标离开区域以外 除了涂鸦 都清空
  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);
};

function GetRequest() {
  var url = location.search; // 获取url中"?"符后的字串
  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;
}