Android — 判断点是否位于多边形内

最近参与一个室内AP定位的项目做Android客户端的开发。

自己写了一个静态地图控件,遇到了需要判断触摸点是否位于多边形指定区域内的问题。

网上资料很多,主流方法是利用光投射算法。Point in polygon - Wikipedia

CSDN上有一篇文章把原理讲的非常详细 点在多边形内算法——判断一个点是否在一个复杂多边形的内部

参考 StackOverFlow 上一个回答的写法,翻译成 JAVA 如下:

/**
 * 利用光投射算法计算点是否在多边形内
 * 
 * @param point 需要判断的点的坐标
 * @param vertices 多边形按顺时针或逆时针顺序的顶点坐标集合
 * @return 点是否在多边形内
 */
public static boolean isPointInPolygon(PointF point, List<PointF> vertices) {
    boolean contains = false;
    for(int i = 0, j = vertices.size() - 1; i < vertices.size(); j = i++) {
        if(((vertices.get(i).y >= point.y) != (vertices.get(j).y >= point.y)) &&
           (point.x <= (vertices.get(j).x - vertices.get(i).x) * (point.y - vertices.get(i).y) / (vertices.get(j).y - vertices.get(i).y) + vertices.get(i).x))
            contains = !contains;
    }
    return contains;
}

继续阅读Android — 判断点是否位于多边形内

微信小程序 canvas 动画踩坑——requestAnimationFrame 帧渲染

在浏览器上绘制 canvas 动画的时候经常使用 window.requestAnimationFrame 这个 Api 的回调来进行循环的帧渲染。

使用 requestAnimationFrame 将会把动画帧渲染周期交给浏览器统一调度,实现更好的性能优化。

可是微信小程序并没有支持这个 Api,在模拟器上测试可以正常运行,可在真机上运行时会报错,没有这个方法。

所以我们只得想办法自己来模拟这个 Api 所做的工作。

requestAnimationFrame 能够将原本零散的帧渲染序列进行梳理,使得页面上所有动画帧都在同一周期进行渲染,以最大化利用系统资源。

一般浏览器的渲染周期为 60 次每秒,即每次间隔大约 16 毫秒。因此我们只需要写一段代码,来将渲染周期控制在 16 毫秒,就能够模拟出 requestAnimationFrame 的效果了。

var lastFrameTime = 0;
// 模拟 requestAnimationFrame
var doAnimationFrame = function (callback) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
    var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
    lastFrameTime = currTime + timeToCall;
    return id;
};
// 模拟 cancelAnimationFrame
var abortAnimationFrame = function (id) {
    clearTimeout(id)
}

现在就可以像使用 requestAnimationFrame 和 cancelAnimationFrame 一样使用 doAnimationFrame 和 abortAnimationFrame 了。

微信小程序 Canvas 动画踩坑——棘手的椭圆

最近正在给我的微信小程序开发一个天气预报的页面,页面的效果如下:

最终效果

计划页面有两个 canvas,一个用来实时绘制上半部分的天气动画,一个用来绘制中间的气温趋势折线图。

上半部分天气动画在不同的天气下有不同的效果,比如不同强度的降雨会有相应的雨滴从上面落下,阴天多云的时候顶部会有云朵在漂浮,多云转晴的话后面再加上个太阳。

降雨的动画不难,无非就是随机生成一些雨滴对象,每一帧实时更新位置即可。

关键在云朵的动画上,我们需要生成随机宽高的椭圆形云朵,并且云朵沿着随机椭圆轨迹运动。

继续阅读微信小程序 Canvas 动画踩坑——棘手的椭圆