博客 (4)

设置缩放级别：

map.centerAndZoom(new T.LngLat(108.95, 34.27), 4); // 默认显示整个中国地图、省级边界线
map.setMinZoom(2); // 世界地图
map.setMaxZoom(8); // 区/县/市

自 2023 年 4 月起，Windows 11 已经重新支持显示“秒”，无需第三方工具来实现，点击查看详情。

ElevenClock 下载地址：GitHub，开源软件放心使用

效果：

* 该软件不会影响右下角的显示桌面和系统通知功能。

v3.3 设置方法：

√ 在主屏幕上时钟区显示本程序的时钟样式

    ElevenClock 不直接修改任务栏上的时钟区域，而是将时钟覆盖在系统时钟区域的上方。

√ 不要在辅助监视器上显示时钟

    此项按实际需求勾选

√ 时间与日期设置 - Set a custom date and time format (for advanced users only)

    填写以下内容并 Apply

    %H:%M:%S

    %Y/%#m/%#d %a

    如果不想显示星期，把 %a 去掉即可。

√ 使用自定义字体大小

    因分辨率缩放设置不同可能导致显示的字体大小与系统时钟不同，会导致覆盖面过大或过小，从而使系统托盘中的其它图标显示不完整。所以应选择一个与系统时间差不多的字体大小。当显示“周序号”时 ElevenClock 时钟区域可能会远宽于系统时钟区域，可以设置系统时钟显示“星期”（方法见文末）。

v3.2 设置方法：

√ 在主屏幕上时钟区显示本程序的时钟样式

    ElevenClock 不直接修改任务栏上的时钟区域，而是将时钟覆盖在系统时钟区域的上方。

√ 不要在辅助监视器上显示时钟

    此项按实际需求勾选

√ 显示秒数

    这是我们的最终目的。

√ 使用自定义字体大小

    因分辨率缩放设置不同可能导致显示的字体大小与系统时钟不同，会导致覆盖面过大或过小，从而使系统托盘中的其它图标显示不完整。所以应选择一个与系统时间差不多的字体大小。当显示“周序号”时 ElevenClock 时钟区域可能会远宽于系统时钟区域，可以设置系统时钟显示“星期”（方法见文末）。

如何显示系统时间“星期”：

打开“更改日期和时间”，在“日期”选项卡的“短日期”中添加“ddd”。

iPhone 或安卓上传的照片，可能因横向或纵向拍摄，导致上传后照片显示成 90 度、180 度、270 度角旋转，使用 C# 处理该照片时同样会遇到相同的问题。

解决的方案：

客户端使用 base64 显示图片，可按正常方向显示，且不通过服务端即时显示。关键代码：

$('#file_input').change(function (e) {
    if (e.target.files.length == 0) { return; }
    // file 转换为 base64
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = function (event) {
        $('#myImg').attr('src', event.target.result).css({ width: 'auto', height: 'auto' });
    }
});
$('#myImg').on('load', function () {
    console.log('图片加载完成')
});

但 base64 字符串传递到服务端受请求大小限制（一般比直接 POST 文件要小）。所以显示图片的同时应即时使用 POST 方式上传图片（如 jquery.fileupload.js）。

当然如果是在微信中打开网页，使用 JS-SDK 的 wx.chooseImage() 返回的 localId 也可以在 <img /> 中正常显示，然后使用 wx.uploadImage() 上传到微信服务器并获取 serverId，在通过获取临时素材接口取回图片文件。

服务端如果需要处理该图片（缩放、裁切、旋转等），需要先读取照片的拍摄角度，旋正后，再进行处理，相关 C# 代码：

/// <summary>
/// 调整照片的原始拍摄旋转角度
/// </summary>
/// <param name="img"></param>
/// <returns></returns>
private Image ImageRotateFlip(Image img)
{
    foreach (var prop in img.PropertyItems)
    {
        if (prop.Id == 0x112)
        {
            switch (prop.Value[0])
            {
                case 6: img.RotateFlip(RotateFlipType.Rotate90FlipNone); break;
                case 3: img.RotateFlip(RotateFlipType.Rotate180FlipNone); break;
                case 8: img.RotateFlip(RotateFlipType.Rotate270FlipNone); break;
            }
            prop.Value[0] = 1;
        }
    }
    return img;
}

本文讲述使用网页开发适用于宴会、活动、年会现场 LED 大屏幕显示抽奖、抢楼、游戏、视频等互动界面，通过在浏览器中打开后 F11 全屏投影到大银幕上。

设计思路：

1. 为了保证最佳的显示效果，设计稿的尺寸按大屏幕的“宽高比”来做（本文以4米*3米的大银幕为例，设计稿以800*600像素为例）。

2. 由于电脑的视频输出分辨率很有可能与大银幕的宽高比不同，那么我们全屏投影后会界面会有变形，但是投影设备接收到电脑视频信号后再全屏显示到大银幕时，界面又会变回正常。

3. 按设计稿的尺寸开发网页，并使用 CSS3 的 scale 实现整体伸缩，目的是自适应窗口尺寸来全屏显示内容，无留白、无裁切。整体拉伸的要求是文字、图片、背景、间距、iframe 等所有元素以统一的比例拉伸，无错位。

4. 网页上通过 JS 设置一些快捷键来实现页面展示内容的切换。

5. 若投影设备功能有限或操作员水平有限等原因导致无法顺利设置输入输出分辨率时，网页可设置 x 轴和 y 轴两个方向的伸缩系数、定位偏移量等，更灵活地实现完美投影需求。
   

开发要点：

• 网页尺寸按设计稿来定（以 800x600 为例）。

• 使用 CSS3 的 transform 的 scale 来实现缩放，以电脑显示器分辨率 1920x1080，宽放大 1920/800 倍，高放大 1080/600 倍，即可将设计稿全屏展示到电脑显示器上。为了更灵活，我们使用窗口大小来代替显示器分辨率，这样不管怎么改变窗口大小或者全屏，设计稿都能完整地显示在窗口上。

• 在页面初始化和窗口尺寸变化时重新调整设置上述比例。

代码参考：

• jQuery 示例

• Vue3 示例