【iOS produktiv】]Episode #037: WWDC Spekulationen • Gadget Time • App Tipps
Dida
2020-06-15 16:18:39
Responses</li>--> <!-- --> <!-- --> </div> </body> </html> <script type="text/javascript"> /** * 视频全屏播放旋转目前的逻辑 * 视频全屏，即锁定屏幕为横屏。 * 视频恢复，则解除屏幕方向的锁定。 * 具体的切换，根据自己的实际业务做相应的操作。 */ // Android平台的视频全屏旋转 var fullScreenOfAndroid = function() { if(true) { // 最新5+API的支持 var self = plus.webview.currentWebview(); self.setStyle({ videoFullscreen: 'landscape' }); } else { // 如果暂未更新sdk，可以先使用差量升级等方式，做出兼容处理； // 旧版本下的兼容处理 document.addEventListener('webkitfullscreenchange', function() { var el = document.webkitFullscreenElement; //获取全屏元素 if(el) { plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏 } else { plus.screen.unlockOrientation(); //解除屏幕方向的锁定 } }); } }; // iOS平台的视频全屏旋转 var fullScreenOfIos = function(videoElem) { // 监听的事件与Android平台有很大区别 videoElem.addEventListener('webkitbeginfullscreen', function() { plus.screen.lockOrientation('landscape'); //锁死屏幕方向为横屏 }); videoElem.addEventListener('webkitendfullscreen', function() { plus.screen.unlockOrientation(); //解除屏幕方向的锁定 }); }; // 涉及到5+API的内容，均在plusready事件后调用； document.addEventListener('plusready', function() { var osName = plus.os.name; if(osName === 'Android') { fullScreenOfAndroid(); } var videoElem = document.getElementById('video'); fullScreenOfIos(videoElem); }); </script> <script type="text/javascript"> function getSpeed(a, b) { a = a.toString(2); b = b.toString(2); a = a + b; a = parseInt(a, 2); return a; } /* 适应下列类型（都是16X16的）： 3.图片 4.动画 5.多屏图片 6.多屏动画 8.加密图片 9.加密动画 注意：后台给过来的数据x_count、y_count表示行列，但是本方法的x_count、y_count表示x、y轴，所以传参数的时候需要特殊理解它们的意义。 */ function runDivoomImage(type, speed=1000, frame_count, x_count, y_count, data, canvas, UserName, pic_size) { //设备每条边的像素大小 var dev_pixel_count = pic_size; //每个设备占用数据长度 var dev_data_length = dev_pixel_count * dev_pixel_count * 3; //每帧图像的总像素 var frame_pixel_count = x_count * y_count * dev_pixel_count * dev_pixel_count; //每帧图像的占用数据长度 var frame_data_length = frame_pixel_count * 3; //像素扩大倍数 var pixel_times = 1; //检测数据长度合法与否 if (data.length != (frame_data_length * frame_count)) { alert("data length error."); } else { //获取画布 var canvas_name = document.getElementById(canvas); //设置画布大小 canvas_name.width = x_count * 16 * pixel_times + 500; canvas_name.height = y_count * 16 * pixel_times; //操作画布的对象 var context = canvas_name.getContext('2d'); //当前帧 var curr_frame = 1; context.font="32px Arial"; //图片 if (type == 0) { //定义RGB值 var R = 0, G = 0, B = 0; //帧偏移 = 当前帧 * 每帧数据 var frame_offset = (curr_frame - 1) * frame_data_length; //定义当前帧的活动点 var curr_point = 0; //其它变量定义 var dev_id = 0; var x_base = 0; var y_base = 0; var dev_point = 0; var x = 0; var y = 0; //直接循环数据，由数据下标算出应该填充的[X,Y]位置 for (var i = frame_offset; i < frame_offset + frame_data_length; i = i + 3) { R = data[i]; G = data[i + 1]; B = data[i + 2]; //计算当前帧的活动点 curr_point = i - frame_offset; //根据活动点计算定位到第几个设备（0开头） = 活动点除每个设备点数再向下取整 dev_id = Math.floor(curr_point / dev_data_length); //根据设备号计算[X,Y]坐标的偏移 x_base = dev_id % x_count; y_base = Math.floor(dev_id / x_count);//向下取整 //根据活动点计算定位到设备的第几点 = 活动点对设备点数求余 dev_point = (curr_point / 3) % dev_data_length; //根据设备点计算出来设备的[X,Y] x = dev_point % dev_pixel_count; y = (Math.floor(dev_point / dev_pixel_count)) % dev_pixel_count; //设备[X,Y]分别加上偏移即可得到实际需要坐标 context.fillStyle = "rgb(" + R + "," + G + "," + B + ")"; context.fillRect((x_base * dev_pixel_count + x) * pixel_times, (y_base * dev_pixel_count + y) * pixel_times, pixel_times, pixel_times); } context.fillStyle = "rgb(" + 255 + "," + 255 + "," + 255 + ")"; context.textBaseline="middle"; context.font="10px Verdana"; context.fillText(UserName, x_count * 16 * pixel_times + 30, y_count * 16 * pixel_times/2); } //动画 if (type == 1) { //循环播放 setInterval(function () { //定义RGB值 var R = 0, G = 0, B = 0; //帧偏移 = 当前帧 * 每帧数据 var frame_offset = (curr_frame - 1) * frame_data_length; //定义当前帧的活动点 var curr_point = 0; //其它变量定义 var dev_id = 0; var x_base = 0; var y_base = 0; var dev_point = 0; var x = 0; var y = 0; //直接循环数据，由数据下标算出应该填充的[X,Y]位置 for (var i = frame_offset; i < frame_offset + frame_data_length; i = i + 3) { R = data[i]; G = data[i + 1]; B = data[i + 2]; //计算当前帧的活动点 curr_point = i - frame_offset; //根据活动点计算定位到第几个设备（0开头） = 活动点除每个设备点数再向下取整 dev_id = Math.floor(curr_point / dev_data_length); //根据设备号计算[X,Y]坐标的偏移 x_base = dev_id % x_count; y_base = Math.floor(dev_id / x_count);//向下取整 //根据活动点计算定位到设备的第几点 = 活动点对设备点数求余 dev_point = (curr_point / 3) % dev_data_length; //根据设备点计算出来设备的[X,Y] x = dev_point % dev_pixel_count; y = (Math.floor(dev_point / dev_pixel_count)) % dev_pixel_count; //设备[X,Y]分别加上偏移即可得到实际需要坐标 context.fillStyle = "rgb(" + R + "," + G + "," + B + ")"; context.fillRect((x_base * dev_pixel_count + x) * pixel_times, (y_base * dev_pixel_count + y) * pixel_times, pixel_times, pixel_times); } context.fillStyle = "rgb(" + 255 + "," + 255 + "," + 255 + ")"; context.textBaseline="middle"; context.font="10px Verdana"; context.fillText(UserName, x_count * 16 * pixel_times + 30, y_count * 16 * pixel_times/2); //遇到最后一帧，需要重置为初始帧。 if (curr_frame == frame_count) { curr_frame = 1; } //否则播放下一帧。 else { curr_frame++; } }, speed); } } } </script> <script type="text/javascript"> //var image_data = //; // //if (typeof(image_data) != "undefined" && image_data.constructor == Array && image_data.length > 0) { // for (var i = 0; i < image_data.length; i++) { // var type = image_data[i]['type']; // //单屏图片11*11 // if (type == 1) { // runDivoomImage(0, 0, 1, image_data[i]['y_count'], image_data[i]['x_count'], image_data[i]['data'], 'canvas_' + i,image_data[i]['UserName'], 11); // } // //单屏动画11*11 // else if (type == 2) { // runDivoomImage(1,image_data[i]['speed'], image_data[i]['frame_count'], image_data[i]['y_count'], image_data[i]['x_count'], image_data[i]['data'], 'canvas_' + i,image_data[i]['UserName'], 11); // } // //单屏动画或多屏动画 // else if (type == 3 || type == 5 || type == 8 || type == 17) { // runDivoomImage(0, 0, 1, image_data[i]['y_count'], image_data[i]['x_count'], image_data[i]['data'], 'canvas_' + i,image_data[i]['UserName'], 16); // } // //单屏动画或多屏动画 // else if (type == 4 || type == 6 || type == 9 ) { // runDivoomImage(1, image_data[i]['speed'], image_data[i]['frame_count'], image_data[i]['y_count'], image_data[i]['x_count'], image_data[i]['data'], 'canvas_' + i,image_data[i]['UserName'], 16); // } // //LED // else if (type == 7) { // //当单屏图片来显示 // runDivoomImage(0, 0, 1, image_data[i]['y_count'], image_data[i]['x_count'], image_data[i]['data'], 'canvas_' + i,image_data[i]['UserName'], 16); // }else { // //未知 // console.log("未知类型：" + type); // } // } //} </script>
