博客 (56)

前往活动页面>>>

一、活动时间
2023年10月31日0点0分0秒至2026年3月31日23点59分59秒

二、活动对象
同时满足以下全部条件的阿里云用户:
1、阿里云注册会员用户;
2、完成阿里云实名认证;
3、符合活动规则的新老用户,均可参与。

三、活动权益参与规则
1、云服务器ECS经济型e实例(简称“99实例”或“99元e实例”)活动范围:
个人认证或者企业认证的用户购买指定配置“e实例2核2G,3M固定带宽,40G ESSD Entry 系统盘”可享受包1年99元,活动地域包含北京,杭州,上海,张家口,呼和浩特,深圳,成都,河源,乌兰察布,广州。
2、云服务器通用算力型u1实例(简称“199实例”或“199元u1实例”)活动范围:
企业认证的用户购买指定配置“u1实例2核4G,5M固定带宽,80G ESSD Entry 系统盘”可享受包1年199元,活动地域包含青岛,北京,杭州,上海,深圳,成都,河源,乌兰察布,广州,中国香港,日本(东京),新加坡,美国(硅谷),英国(伦敦),德国(法兰克福)。
3、活动说明:
在活动期间内,同一个人认证主体只可保有1个“99元e实例”;同一企业认证主体最多可同时保有1个“99元e实例”和1个“199元u1实例”,实例到期后在活动时间范围内可持续以低价续费保有,另购使用官网价。本次优惠不可与优惠券叠加使用。同一用户同一时间只能保有一个“99实例”或者“199实例”。

四、购买场景
1、新购场景:
在符合参与规则的情况下,直接低价购买指定配置产品,有效期1年。若无法购买,请确认是否存在同人或其他实例已占用等情况。
2、续费场景:
在活动时间内,指定配置每年最多可以以优惠价格续费1次,1次1年,直到活动时间结束持续享受续费优惠。
备注:若续费其他实例时使用了低价权益,原低价产品实例将无法再享受低价权益。
根据以上规则,常见场景有以下几种:

场景1:若您在2023年10月31日新购“99元e实例”,您可在2023年10月31日至2024年10月30日(即新购后的一年内)完成第一次续费(此时服务器到期时间为2025年10月30日);可在2024年10月31日至2025年10月30日完成第二次续费(此时服务器到期时间为2026年10月30日);可在2025年10月31日至2026年3月31日完成第三次续费(此时服务器到期时间为2027年10月30日);
即连续以99元1年的价格续费3年,可以使用“99元e实例”至2027年10月30日,该服务器总保有时长4年。

场景2:若您在2026年3月31日(活动截止前最后一天)新购“99元e实例”/“199元u1实例”,您可在2026年3月31日当天完成一次续费(此时服务器到期时间为2028年3月31日);
即以99元/199元1年的价格续费1年,可以使用“99元e实例”/“199元u1实例”至2028年3月31日,该服务器总保有时长2年。

场景3:若您在2024年4月1日新购“99元e实例”/“199元u1实例”,您可在2024年4月1日至2025年3月31日完成第一次续费(此时服务器到期时间为2026年3月31日);您可在2025年4月1日至2026年3月31日完成第二次续费(此时服务器到期时间为2027年3月31日);
即连续以99元/199元1年的价格续费2年,可以使用“99元e实例”/“199元u1实例”至2027年3月31日,服务器总保有时长3年。

3、退订场景:
支持五天无理由退款,退款后保留“低价长效”优惠资格,在活动时间范围内可再次使用低价购买活动配置;
4、变配场景:
变配至“低价长效优惠”指定配置时当前付费周期不享受低价权益,续费时可享受包1年99元/199元优惠;“低价长效优惠”指定配置发生变配/升级/降配操作后,变配需按照官网价补差价,请仔细阅读变配页面引导及相关资费说明,但仍占用权益资格直到该实例释放,购买相同规格产品不能再享受低价,同时续费时也不再享受包1年99元/199元优惠;
5、如用户账号有欠费,需先补足欠费再进行购买。
6、低价权益产品仅供账号本人使用,不允许过户转让。
7、如在参与“低价长效”优惠过程中,使用其他收费产品/功能,则需按照产品/功能标准资费支付超额产生的费用。
8、其他规则:
阿里云有权根据业务需求,随时调整提供给用户低价购买的产品范围、产品数量、产品配置、购买规则等,用户应以购买时相关页面的展示内容为准,但不影响用户在活动规则调整前已经获得的权益。
9、禁止使用产品来挖掘货币,如您使用产品来挖掘货币,可能会被收取费用及取消权益资格。
10、为保证活动的公平公正,如用户在活动中存在隐瞒、虚构、作弊、欺诈或通过其他非正常手段规避活动规则、获取不当利益的行为,例如:作弊领取、恶意套现、网络攻击、虚假交易等,阿里云有权收回相关权益、取消用户的活动参与资格,撤销违规交易,必要时追究违规用户的法律责任。
您应确保您对云服务器的使用不侵犯他人著作权,不会用于私服架设服务、私服程序、私服网站、私服源码、私服服务器和空间等。

五、常见FAQ:
1.用户在购买完99实例/199实例后,如果因某些原因导致需要退款或者释放实例,还可以再以99元/199元的优惠价格重新购买吗?
答:可以,99实例/199实例支持五天无理由退款,退款后仍然保留优惠资格,用户在活动时间范围内可再次使用低价购买活动配置;
2.活动规则里写的1年续费1次中,“1年”指的是自然年吗?
答:“1年”指的是云服务器购买1年的付费周期,即两次续费时间必须间隔1年以上;
3.99实例/199实例优惠套餐最多可以享受几年的优惠?
答:若您在24年3月31日前首次新购99实例/199实例优惠套餐,最多可以享受4年优惠(包含新购1次,续费3次,1次1年);

六、相关名词及解释
1、“阿里云官网”,是指包含域名为 www.aliyun.com/ 的网站以及阿里云客户端,如APP,但阿里云国际站,包括alibabacloud.com以及所有下属页面和jp.aliyun.com以及所有下属页面除外。
2、“同一用户”,是指根据不同阿里云账号在注册、登录、使用中的关联信息,阿里云判断其实际为同一用户。关联信息举例:同一手机号、同一邮箱、同一证件等。
3、“同人账号”,是指同一用户拥有多个阿里云账号的,各个账号之间互为同人账号。
4、“新用户”,是指在阿里云官网没有收费云产品购买记录的阿里云会员用户。新用户在进行首次云产品购买行为时,也被称为“首购用户”。
5、“老用户”,是指在阿里云官网已有收费云产品购买记录的阿里云会员用户。
6、“云产品”,是指阿里云官网售卖的中国大陆节点的产品和服务,但不包括域名、虚拟主机、云市场产品、专有云产品,云通信产品。
7、“指定云产品”,是指某场具体活动页面列举的活动云产品。
8、活动中涉及“打折”、“折扣”、“×折”或“省××元”,是指将本活动期间的某款产品的活动价格,与无任何活动期间的相同产品的日常最小单位售价(例如:月价),按相同购买时长进行比较后,所获得的比较结果。
9、活动涉及的“划线价”、“日常价”,通常是指该产品曾经展示过的销售价,并非原价,仅供参考。具体活动页面单独对“划线价”、“日常价”进行说明的,以其表述为准。
10、除非有相反证据证明外,用户参与活动所获得的全部权益和相应责任,均归属于参与活动的该阿里云账号所对应的实名认证主体。
11、活动中的“天”、“日”、“工作日”等均指该日的0点至24点(北京时间)。
12、阿里云可以根据活动的实际情况对活动规则进行变动或调整,相关变动或调整将公布在活动页面上,并于公布时即时生效;但不影响用户在活动规则调整前已经获得的权益。您购买阿里云单项产品时,亦应遵守该产品法律服务协议。
13、活动页面提到的“核” ,均指vcpu。

xoyozo 27 天前
431

如果手机开启了自动横屏,那么网页就会跟着旋转,导致网页宽度变大,高度变小,页面布局不友好,我们可以通过判断屏幕方向 api,用 css 设置旋转。


HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>保持竖屏示例</title>
</head>
<body>
    <div id="app">
        <div class="page">
            <div>把手机横过来试试</div>
            <div>页面永远保持竖屏方向</div>
        </div>
    </div>
</body>
</html>

CSS:

body { margin: 0; }
.page { text-align: center; padding-top: 100px; }

@media screen and (orientation: landscape) {
    body { width: 100vh; height: 100vw; overflow: hidden; }
    .page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
    .page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}

JS:

function fn_set_orientation() {
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
    const div = document.querySelector('.page');
    console.log(orientation.type)
    switch (orientation.type) {
        case 'landscape-primary': {
            div.classList.remove('landscape-secondary');
            div.classList.add('landscape-primary');
            break;
        }
        case 'landscape-secondary': {
            div.classList.remove('landscape-primary');
            div.classList.add('landscape-secondary');
            break;
        }
        default: {
            div.classList.remove('landscape-primary');
            div.classList.remove('landscape-secondary');
            break;
        }
    }
}
window.addEventListener("orientationchange", function () {
    fn_set_orientation();
});
fn_set_orientation();

示例:

https://xoyozo.net/Demo/Orientation


xoyozo 4 个月前
335

判断一下类型:

if (p.PropertyType == typeof(uint))
{
    p.SetValue(t, Convert.ToUInt32(row[p.Name]), null);
}
else
{
    p.SetValue(t, row[p.Name], null);
}


xoyozo 9 个月前
592

原生判断

window.addEventListener('scroll', scroll)

function scroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      
      if (scrollTop === 0) {
        console.log('滚动到顶了');
      }
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        console.log('滚动到底了');
      }
}

window.removeEventListener('scroll', scroll) // 移除滚动事件

scrollTop:文档在可视区上沿的位置距离文档顶部的距离

clientHeight:可视区的高度

scrollHeight:文档总高度

100:用于在滚动到底部之前提前加载内容(如瀑布流),提高用户体验,请自行修改数值(建议不小于 2 像素,以规避在部分浏览器上因获得值为小数时可能无法触发的问题)


jQuery 判断

window.addEventListener('scroll', scroll)

function scroll() {
    const doc_height = $(document).height();
    const scroll_top = $(document).scrollTop();
    const window_height = $(window).height();
    
    if (scroll_top === 0) {
      console.log('滚动到顶了');
    } else if (scroll_top + window_height >= doc_height - 100) {
      console.log('滚动到底了');
    }
}


xoyozo 2 年前
1,208

User-Agent 字符串不会进行更新以区分 Windows 11 和 Windows 10。

但我们可以使用 JS 进行客户端判断是否为 Windows 11:

navigator.userAgentData.getHighEntropyValues(["platformVersion"])
 .then(ua => {
   if (navigator.userAgentData.platform === "Windows") {
     const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
     if (majorPlatformVersion >= 13) {
       console.log("Windows 11 or later");
      }
      else if (majorPlatformVersion > 0) {
        console.log("Windows 10");
      }
      else {
        console.log("Before Windows 10");
      }
   }
   else {
     console.log("Not running on Windows");
   }
 });

支持客户端提示 User-Agent 浏览器:

浏览器通过客户端提示 User-Agent 区别?
Microsoft Edge 94 及以上
Chrome 95 及以上
Opera
Firefox
Internet Explorer 11


M
转自 MSEdgeTeam 2 年前
1,669

本文使用 ASP.NET 6 版本 Senparc.Weixin.Sample.MP 示例项目改造。


第一步 注册多公众号

方法一:打开 appsettings.json 文件,在 SenparcWeixinSetting 节点内添加数组节点 Items,该对象类型同 SenparcWeixinSetting。

//Senparc.Weixin SDK 设置
"SenparcWeixinSetting": {
  "IsDebug": true,
  "Token": "",
  "EncodingAESKey": "",
  "WeixinAppId": "",
  "WeixinAppSecret": "",
  "Items": [
    {
      "IsDebug": true,
      "Token": "a",
      "EncodingAESKey": "a",
      "WeixinAppId": "a",
      "WeixinAppSecret": "a"
    },
    {
      "IsDebug": true,
      "Token": "b",
      "EncodingAESKey": "b",
      "WeixinAppId": "b",
      "WeixinAppSecret": "b"
    }
  ]
}

方法二:修改 Program.cs 文件,在 UseSenparcWeixin 方法中注册多个公众号信息。

var registerService = app.UseSenparcWeixin(app.Environment,
    null /* 不为 null 则覆盖 appsettings  中的 SenparcSetting 配置*/,
    null /* 不为 null 则覆盖 appsettings  中的 SenparcWeixinSetting 配置*/,
    register => { /* CO2NET 全局配置 */ },
    (register, weixinSetting) =>
    {
        //注册公众号信息(可以执行多次,注册多个公众号)
        //register.RegisterMpAccount(weixinSetting, "【盛派网络小助手】公众号");
        foreach (var mp in 从数据库或配置文件中获取的公众号列表)
        {
            register.RegisterMpAccount(new SenparcWeixinSetting
            {
                //IsDebug = true,
                WeixinAppId = mp.AppId,
                WeixinAppSecret = mp.AppSecret,
                Token = mp.Token,
                EncodingAESKey = mp.EncodingAeskey,
            }, mp.Name);
        }
    });

完成后,我们可以从 Config.SenparcWeixinSetting.Items 获取这些信息。


第二步 接入验证与消息处理

打开 WeixinController 控制器,将构造函数改写为:

public WeixinController(IHttpContextAccessor httpContextAccessor)
{
    AppId = httpContextAccessor.HttpContext!.Request.Query["appId"];
    var MpSetting = Services.MPService.MpSettingByAppId(AppId);
    Token = MpSetting.Token;
    EncodingAESKey = MpSetting.EncodingAESKey;
}

示例中 Services.MPService.MpSettingByAppId() 方法实现从 Config.SenparcWeixinSetting.Items 返回指定 appId 的公众号信息。

为使 IHttpContextAccessor 注入生效,打开 Program.cs,在行

builder.Services.AddControllersWithViews();

下方插入

builder.Services.AddHttpContextAccessor();

这样,我们就可以在构造函数中直接获取地址栏中的 appId 参数,找到对应的公众号进行消息处理。


第三步 消息自动回复中的 AppId

打开 CustomMessageHandler.cs,将 

private string appId = Config.SenparcWeixinSetting.MpSetting.WeixinAppId;
private string appSecret = Config.SenparcWeixinSetting.MpSetting.WeixinAppSecret;

替换为:

private string appId = null!;
private string appSecret = null!;

并在构造函数中插入

appId = postModel.AppId;
appSecret = Services.MPService.MpSettingByAppId(postModel.AppId).WeixinAppSecret;

这样,本页中使用的 appId / appSecret 会从 postModel 中获取,而非默认公众号。postModel 已在 WeixinController 中赋值当前的 appId。

改造后,我们可以在 OnTextRequestAsync() 等处理消息的方法中可以判断 appId 来处理不同的消息。


第四步 其它功能和接口

其它功能和接口均可用指定的 AppId 和对应的 AppSecret 进行调用。

xoyozo 2 年前
1,868

在 Windows 11 电脑为例,通过无线网络连接 Wifi 网络,该网络是由多台路由器通过 AP 的方式连接,查看电脑连接的是哪台路由器,首先打开设置 - 网络和 Internet

image.png

点击属性,可以看到当前连接的网络频带和网络通道

image.png

图中可见,当前使用 149 信道连接网络。

打开 Vistumbler,点击 Scan APs,可以看到附近所有的 Wifi 信号

image.png

图中红框标出的是使用了相同 SSD 和密码的 AP 路由器,其中,我的电脑连接的是 149 信道对应的路由器,根据 MAC 地址、生产厂商等信息就可以判断是哪一台路由器了。

xoyozo 2 年前
3,411

判断是否为数字

if isNumeric(id) then
else
	response.End
end if


强制转换为数字

ii = clng(ii)


转义单引号

replace(xxx, "'", "\'")


判断一个字符串是否包含另一个字符串

if instr(str, "s")>0 then
	response.Write(1)
else
	response.Write(0)
end if


xoyozo 2 年前
1,518
功能主动推送方式主动拉取方式
接口规范由数据终端提供接口,数据源端调用接口推送数据由数据源端提供接口,数据终端调用接口拉取数据
定时器由推送方(数据源端)实现由拉取方(数据终端)实现
缓存在不影响正常运行的情况下,数据源端可不做缓存,实时获取并推送数据,消耗资源过大时做缓存数据源端需要做缓存,以避免终端频繁拉取。若因参数值过多而致缓存过大时,应按调用方标识限制接口调用频次
截断标志数据源端记录最后一次推送的数据ID,并在下一次推送时判断此标识往后推送数据数据终端记录最后一次拉取的数据ID,并在下次一拉取时传递给数据源端
日志与故障排查双方都需要保留日志双方都需要保留日志
在有一个数据源端和多个数据终端的系统中

优点:无

缺点:数据源端需要依据不同的数据终端提供的接口规范推送数据,若这些数据终端要求的推送间隔时间不致,则会使用定时器和缓存实现更为复杂

优点:所有终端使用统一的接口规范,数据拉取间隔时间由终端自由决定

缺点:无

在有多个数据源端和一个数据终端的系统中

优点:所有数据源端使用统一的接口规范,数据推送间隔时间由数据源端自由决定

缺点:无

优点:无

缺点:数据终端需要依据不同的数据源端提供的接口规范拉取数据


xoyozo 2 年前
2,765

前言:本文源于前几天看到的一条微博:

微博

对于这种言论我并不赞同。我大学学的是化学,没有学习过计算机专业的课程,但我认为至少这个问题并不需要多么高端的计算机专业知识,只要中学数学没有全还给老师,就应该能给出至少一种解法。比如说,我就随便涂了一个多边形和一个点,现在我要找出一种通用的方法来判断这个点是不是在多边形内部(别告诉我用肉眼观察……)。

问题

首先想到的一个解法是从这个点做一条射线,计算它跟多边形边界的交点个数,如果交点个数为奇数,那么点在多边形内部,否则点在多边形外。

思路

这个结论很简单,那它是怎么来的?其实,对于平面内任意闭合曲线,我们都可以直观地认为,曲线把平面分割成了内、外两部分,其中“内”就是我们所谓的多边形区域。

多边形

基于这一认识,对于平面内任意一条直线,我们可以得出下面这些结论:

  1. 直线穿越多边形边界时,有且只有两种情况:进入多边形或穿出多边形。

  2. 在不考虑非欧空间的情况下,直线不可能从内部再次进入多边形,或从外部再次穿出多边形,即连续两次穿越边界的情况必然成对。

  3. 直线可以无限延伸,而闭合曲线包围的区域是有限的,因此最后一次穿越多边形边界,一定是穿出多边形,到达外部。

穿越

现在回到我们最初的题目。假如我们从一个给定的点做射线,还可以得出下面两条结论:

  1. 如果点在多边形内部,射线第一次穿越边界一定是穿出多边形。

  2. 如果点在多边形外部,射线第一次穿越边界一定是进入多边形。

首次穿越

把上面这些结论综合起来,我们可以归纳出:

  1. 当射线穿越多边形边界的次数为偶数时,所有第偶数次(包括最后一次)穿越都是穿出,因此所有第奇数次(包括第一次)穿越为穿入,由此可推断点在多边形外部。

    外部

  2. 当射线穿越多边形边界的次数为奇数时,所有第奇数次(包括第一次和最后一次)穿越都是穿出,由此可推断点在多边形内部。

    内部

到这里,我们已经了解这个解法的思路了,下面接着看算法实现的一些具体问题和边界条件的处理。

  1. 点在多边形的边上

    上面我们讲到,这个解法的主要思路就是计算射线穿越多边形边界的次数,那么对于点在多边形的边上这种特殊情况,射线出发的这一次,是否应该算作穿越呢?

    边

    看了上面的图就会发现,不管算不算穿越,都会陷入两难的境地——同样落在多边形边上的点,可能会得到相反的结果。这显然是不正确的,因此对这种特殊情况需要特殊处理。

  2. 点和多边形的顶点重合

    这其实是第一种情况的一个特例。

    顶点

  3. 射线经过多边形顶点

    射线刚好经过多边形顶点的时候,应该算一次还是两次穿越?这种情况比前两种复杂,也是实现中的难点。

    边

  4. 射线刚好经过多边形的一条边

    这是上一种情况的特例,也就是说,射线连续经过了多边形的两个相邻顶点。

    经过边

解决方案:

  1. 判断点是否在线上的方法有很多,比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等,中学数学都学过。

  2. 点和多边形顶点重合的情况更简单,直接比较点的坐标就行了。

  3. 顶点穿越看似棘手,其实我们换一个角度,思路会大不相同。先来回答一个问题,射线穿越一条线段需要什么前提条件?没错,就是线段两个端点分别在射线两侧。只要想通这一点,顶点穿越就迎刃而解了。这样一来,我们只需要规定被射线穿越的点都算作其中一侧。

    两侧

    如上图,假如我们规定射线经过的点都属于射线以上的一侧,显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧,所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧,所以射线 Y 和 BC 发生了穿越,由此我们可以断定点 Y 在多边形内。同理,射线 X 分别与 AD 和 CD 都发生了穿越,因此点 X 在多边形外,而射线 Z 没有和多边形发生穿越,点 Z 位于多边形外。

  4. 解决了第三点,这一点就毫无难度了。根据上面的假设,射线连续经过的两个顶点显然都位于射线以上的一侧,因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例,因此不需要再做特别的处理。

这种简单直观的算法通常叫做射线法奇偶法,下面给出 JavaScript 的算法实现。

/**
 * @description 射线法判断点是否在多边形内部
 * @param {Object} p 待判断的点,格式:{ x: X 坐标, y: Y 坐标 }
 * @param {Array} poly 多边形顶点,数组成员的格式同 p
 * @return {String} 点 p 和多边形 poly 的几何关系
 */function rayCasting(p, poly) {
  var px = p.x,
      py = p.y,
      flag = false

  for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
    var sx = poly[i].x,
        sy = poly[i].y,
        tx = poly[j].x,
        ty = poly[j].y

    // 点与多边形顶点重合
    if((sx === px && sy === py) || (tx === px && ty === py)) {
      return 'on'
    }

    // 判断线段两端点是否在射线两侧
    if((sy < py && ty >= py) || (sy >= py && ty < py)) {
      // 线段上与射线 Y 坐标相同的点的 X 坐标
      var x = sx + (py - sy) * (tx - sx) / (ty - sy)

      // 点在多边形的边上
      if(x === px) {
        return 'on'
      }

      // 射线穿过多边形的边界
      if(x > px) {
        flag = !flag
      }
    }
  }

  // 射线穿过多边形边界的次数为奇数时点在多边形内
  return flag ? 'in' : 'out'}

除了射线法还有很多其他的方法,下面再介绍一种回转数法

平面中的闭合曲线关于一个点的回转数(又叫卷绕数),代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念:图中红色曲线关于点(人所在位置)的回转数为 2。

回转数

回转数是拓扑学中的一个基本概念,具有很重要的性质和用途。本文并不打算在这一点上展开论述,这需要具备相当的数学知识,否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了:当回转数为 0 时,点在闭合曲线外部(回转数大于 0 时所代表的含义,大家可以自己想一想,还是很有趣的)。

对于给定的点和多边形,回转数应该怎么计算呢?

  1. 用线段分别连接点和多边形的全部顶点。

    顶点连线

  2. 计算所有点与相邻顶点连线的夹角。

    内部

  3. 计算所有夹角和。注意每个夹角都是有方向的,所以有可能是负值。

    外部

  4. 最后根据角度累加值计算回转数。看过前面的介绍,很容易理解 360°(2π)相当于一次回转。

思路介绍完了,下面两点是实现中需要留意的问题。

  1. JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数,浮点数计算不可避免会造成一些误差,因此在最后计算回转数时需要做取整操作。

  2. 通常情况下,平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间,这也是 JavaScript 三角函数 Math.atan2() 返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角,我们只能先计算两条线与 X 正轴夹角,再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间,因此我们还需要处理差值超出取值区间的情况。

这里也给出回转数法的 JavaScript 实现。

/**
 * @description 回转数法判断点是否在多边形内部
 * @param {Object} p 待判断的点,格式:{ x: X 坐标, y: Y 坐标 }
 * @param {Array} poly 多边形顶点,数组成员的格式同 p
 * @return {String} 点 p 和多边形 poly 的几何关系
 */function windingNumber(p, poly) {
  var px = p.x,
      py = p.y,
      sum = 0

  for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
    var sx = poly[i].x,
        sy = poly[i].y,
        tx = poly[j].x,
        ty = poly[j].y

    // 点与多边形顶点重合或在多边形的边上
    if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
      return 'on'
    }

    // 点与相邻顶点连线的夹角
    var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)

    // 确保夹角不超出取值范围(-π 到 π)
    if(angle >= Math.PI) {
      angle = angle - Math.PI * 2
    } else if(angle <= -Math.PI) {
      angle = angle + Math.PI * 2
    }

    sum += angle
  }

  // 计算回转数并判断点和多边形的几何关系
  return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}

也有人问到像下面这种复杂多边形有没有办法?答案是肯定的。至于为什么,就留给大家思考吧。

Complex Polygon

本文示例:https://xoyozo.net/Demo/IsThePointInsideThePolygon

d
转自 dg 3 年前
6,681