判断点是否在矩形内的算法


声明:想获取更多更详细的知识请移步:计算几何算法概览

需求描述:
有一个 4*4 的方格,用户可以选择起点和落点形成矩形,每次形成的矩形不能重叠,起点可以和落点坐标一样。现已知起点、未选点集合和已选点集合,求落点的集合。

算法重点:转换为判断点P是否在一个矩形内。


方法一:建立平面直角坐标系,根据横坐标和纵坐标判断点是否在矩形内。


/** * 判断点是否在矩形内(含边)。p1、p2是矩形的两个对角点。 * 该算法和平面直角坐标系怎么建立无关 * @param $rc * @param $p * @return bool */ function isInRect($rc, $p) { $xi = ($p->x - $rc->p1->x) * ($p->x - $rc->p2->x); $yi = ($p->y - $rc->p1->y) * ($p->y - $rc->p2->y); return ($xi <= 0) && ($yi <= 0); }

方法二:假设矩形左、右、上、下分别在直线 L1、L2、L3、L4 上,只需要证明点 P 同时在上下、左右直线之间即可。

过P作一条直线相交于 L1、L2 的 C1 、C2 ,向量PC1 、PC2 同向则P在 L1、L2 之外,反向则在 L1、L2 之内。同理可判断P是否在 L3、L4 之间。

$$ PC_1 = (C_1x - P_x , C_1y - P_y); PC_2 = (C_2x - P_x , C_2y - P_y);$$
$$ \frac{C_2x - P_x}{C_1x - P_x } > 0 或 \frac{C_2y - P_y}{C_1y - P_y } > 0 => PC_1、PC_2 同向 $$
$$(C_1x-P_x)^2 + (C_1y-P_y)^2 = 0 => PC_1为零向量 => PC_1、PC_2 同向$$
$$(C_2x-P_x)^2 + (C_2y-P_y)^2 = 0 => PC_2为零向量 => PC_1、PC_2 同向$$

如果:
$$ L_1: y = mx + t_1; $$
$$ L_2: y = mx + t_2; $$
$$ C_1C_2: y = (m+1)x; $$
$$ P_1:(P_1x, P_1y); P_2:(P_3x, P_3y) 是L_1上的两个矩形顶点;$$
$$ P_3:(P_3x, P_3y); P_4:(P_4x, P_4y) 是L_2上的两个矩形顶点;$$

则:

$$ 若点P和{P_1,P_2,P_3,P_4}中的某一点重合,则P在矩形内; $$

$$ 若 (t_2 - P_x)*(t_1 - P_x)>0, t_1=\frac{P_1yP_2x-P_1xP_2y}{P_2x-P_1x},t_2=\frac{P_3yP_4x-P_3xP_4y}{P_4x-P_3x} 则P在矩形内;$$

$$ 若 (t_2 - P_x)*(t_1 - P_x)>0, t_1=\frac{P_1yP_2x-P_1xP_2y}{P_2x-P_1x},t_2=\frac{P_3yP_4x-P_3xP_4y}{P_4x-P_3x} 则P在矩形内;$$

/**
 * 此处省略n行代码
 */

方法三:以点P为起点,向左作射线,如果射线和矩形的焦点个数是奇数,则P在矩形内。

PS:对以下特例不做考虑:1、对于矩形的水平边不作考虑;2、对于矩形的顶点和L相交的情况。

/**
 * 此处省略m行代码
 */

总结:方法一简单实用,方法三可以推广到判断点是否在任意多边形内。


RabbitMQ在项目中的使用方式+简略介绍

声明:文章写于2016-11-10,项目中RabbitMQ的使用方式在后面可能会发生变化。

消息队列(MessageQueue)的好处:

  • 简化业务流程
  • 异步处理消息
  • 减少组件耦合
  • 消减数据峰值

消息队列的应用场景:

  • 场景1:
    支付成功以后,给用户发送优惠券or红包;
  • 场景2:
    用户注册成功后发送通知邮件or短信;

  • 场景3:
    活动里面的站内信发送;
    . . . . . .
    总结起来就是,把单个业务简洁化,通过消息系统把不相关的业务连接起来,实现更复杂的业务链,降低整个系统的复杂度。

安装

安装方法自行google,如果要在生产环境中安装请先联系运维,涉及到安全问题。

项目中使用

//发布消息
use CI123\Shop\Tool\RabbitMq\Publisher;
Publisher::publish('routing_key', $message);

//监听消息
use Api\Tool\RabbitMq\Subscriber;
Subscriber::subscribe('routing_key', function ($msgObj)    {
            $message = $msgObj->body;
            Subscriber::ack($msgObj);
});

以上是对RabbitMQ极其简陋的介绍,下面是重点:

一、我们项目中怎么设置RabbitMQ的:

1. 持久化

真正的持久保存消息,需要设置三个地方:
1.1 将交换机设置成durable;
1.2 将队列设置成durable;
1.3 将消息的delivery_mode设置成2;

PS:
缺少任何一个设置,都无法真正持久化;
持久化会消耗额外的性能;

2. 自动删除

2.1 消息在队列里存在时间是5分钟;
2.2 队列本身存在时间是30分钟;
2.3 过期的消息会被移出到“死信队列”;
2.4 死信队列里的消息存在7天;
2.5 死信队列本身存在10天;

3. 消费者应答机制(ack/nack机制)

3.1 如果消息已经被正确消费了,你可以通过ack方法告诉rabbitmq,rabbitmq会删除这条消息;
3.2 反之,你可以调用nack告诉RabbitMQ消费失败,rabbitmq会立马将消息移到“死信队列”;
3.3 或者什么都不做,等待消息过期后被移动到“死信队列”。

4. 生产者确认机制(Confirm机制)

4.1 发布消息后,发送者可以通过异步的回调知道消息是否发送成功;

PS:目前项目中基本没有使用。

二、初步理解RabbitMQ

1. 四个比较重要的概念

  • 虚拟主机(vhost):每个vhost都有单独一套交换器、队列、绑定规则
  • 交换器(exchange):将消息发送到队列
    常见相关名词:
    + 名称(exchange):交换器名字,不能重复
    + 类型(type):fanout/direct/topic/headers
    + 持久化(durable):服务重启后是否要恢复
    + 自动删除(auto-delete):没有队列使用交换器时自动删除
  • 队列(queue):存取消息
    常见相关名词:
    + 名称(queue):队列名字,不能重复
    + 持久化(durable):服务重启后是否要恢复
    + 自动删除(auto-delete):没有消费者时自动删除
    + 声明(arguments): 消息存在时间(x-message-ttl)、队列存在时间(x-expires)
  • 绑定(binding):将队列和交换机绑定,以通过routing_key来收发消息;

2. 四种Exchange

  • fanout :广播
  • direct:routing_key全部匹配
  • topic:可以理解为在direct的基础上给routing_key增加了正则匹配,当然肯定不是正则;
  • headers:消息里包含headers,如果消息的headers和队列能匹配上就将消息投递到该headers,可以指定是完全匹配(all)还是只需要匹配单个(one);

3. 其他概念和结论

  • 消息的获取有主动拉取、被动接收,发布/订阅模式是被动接收;
  • 交换器、队列的属性一旦声明就不可更改,但是绑定是可以解绑的(unbind);
  • 当一个 message 被路由到多个 queue 中时,在某个 queue 中的某个 message 的“死亡”不会对相同 message 在其他 queue 中的生存状况;
  • 同时设置了队列生存时间T1和消息生存时间T2后,消息在队列中的存在时间是T1/T2之中的最小值;
  • 如果没有设置死信队列,即便你设置了durable,消息到期后也会被丢弃;

4.目前的使用状况

  • 按照普通的消息队列来使用:佣金、理财、保险;
  • 改造为延时队列:微信模板消息,通过延时队列来重发上次发送失败的消息;
  • 可以改造为任务队列使用:待定;

禁止用户滑动屏幕的js设置

整   理:晋 哲

时   间:2017-01-06

说   明:弹出框弹出后,当用户滑动屏幕时主体页面应该设置为不能滚动的

一、移动端
禁止滚动设置
$('body').bind('touchmove',function(){return false;});

恢复滚动设置
$('body').unbind('touchmove');

二、PC端
禁止滚动设置
$('body').css({overflow:"hidden"});

恢复滚动设置
$('body').css({overflow:"auto"});

深入理解CI框架:框架如何运转起来(原理篇)

标签(空格分隔): codeigniter 源码

一、核心

index.php:入口文件

入口文件主要定义路径和环境,包括BASEPATHFCPATHAPPPATH等常量表示的路径和applicationsystem等变量表示的路径;

index.php通过$_SERVER['CI_ENV']来分辨当前的执行环境,目前支持developmenttestingproduction三种(默认development),如果你在apache里配置CI_ENV为其他值(比如mytest),项目会输出错误信息并停止执行;

core/CodeIgniter.php:分派请求

CodeIgniter.php加载了各种各样的类和方法,它解析用户的请求(URI类),判断请求对应哪个控制器的哪个方法(Router类),创建控制器对象,执行方法,得到结果并输出(Output类),期间还会加载并执行预先设置好的各种钩子(Hooks类)。

  1. 很显然,CodeIgniter.php是CI框架最重要的文件之一,它根据用户请求调用不同类处理并输出结果。
  2. CI框架解析用户请求时,主要依据$_SERVER这个变量($_SERVER['REQUEST_METHOD']
  3. 除了各种类,CodeIgniter.php还加载了很多公共方法,详见core/Common.phpcore/compat

二、提取核心代码

$RTR =& load_class('Router', 'core');
$class = ucfirst($RTR->class);
require_once BASEPATH.'core/Controller.php';
$CI = new $class();

三、细枝末节

core/Common.php:公共方法

Common Functions——这是Common.php定位,用来存放各种公共方法,比如is_phpis_httpsis_clishow_404function_usable等等。

core/compat目录下也存放有很多公共方法文件,比如hash.phpmbstring.phppassword.phpstandard.php,我们经常用的array_column函数就是在standard.php里定义的。

四、黑科技

extract:从数组中将变量导入到当前的符号表

//index.php
$vars = array('name' => 'jane', 'age' => 20);
extract($vars);
var_dump($name);

ob_xxx函数:把输出放到缓冲区、从缓冲区获取内容

ob_start:打开输出控制缓冲
ob_end_flush:冲刷出(送出)输出缓冲区内容并关闭缓冲
ob_end_clean:清空(擦除)缓冲区并关闭输出缓冲

//index2.php
//将一个php文件保存到文本文件里
//load->view 如何实现的
ob_start();
include('./index.php');
$buffer = ob_get_contents();
file_put_contents('index.php.txt', $buffer);
@ob_end_clean();
ob_end_flush();

ReflectionMethod:反射类

//检查方法是否可以访问
//如何在访问一个private方法或不存在的方法的时候显示404
$reflection = new ReflectionMethod($class, $method);
if ( ! $reflection->isPublic() OR $reflection->isConstructor())
{
    $e404 = TRUE;
}

弹性布局Flexbox

整   理:晋 哲

时   间:2017-01-06

说   明:使用弹性布局,设置自适应布局、水平垂直居中等样式

弹性布局很早就出来了,但之前一直没有使用Flexbox主要还是考虑兼容性,且兼容性写法太冗余。目前,旧版的属性都已被重新修改,所有浏览器的兼容性也得到很大支持,移动端可以放心使用了,当然浏览器前缀还是要加上的。

能够被运用到的布局结构,如响应式布局、选项卡分布、水平垂直居中等,优先考虑使用flex,代替之前一些特殊布局所使用的传统解决方案:使用display属性或position属性或float属性。

flex常用属性

display:将元素设置为内联或者块flexbox容器元素
flex:复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
justify-content:控制flex容器内item的水平对齐方式
align-items:控制flex容器内item的垂直对齐方式
flex-direction:定义弹性盒子元素的排列方向

其属性值:

display:flex | inline-flex
flex:none | < flex-grow > | < flex-shrink > | < flex-basis >
justify-content:flex-start | flex-end | center | space-between | space-around
align-items:    flex-start | flex-end | center | baseline | stretch
flex-direction:row | row-reverse | column | column-reverse

常见用法:
一、自适应布局

<!-- HTML -->
<div class="box">
    <div class="subnav"></div>
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.subnav{
    width: 100px;
    height: 100px;
    background: #000;
}
.content{
    background: #f60;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

解释:subnav固定宽度,content自适应撑满剩余空间

二、使用 Flexbox 的水平垂直居中布局

<!-- HTML -->
<div class="box">
    <div class="content"></div>
</div>

<!-- CSS -->
.box{
    height: 200px;
    background: #eee;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.content{
    width: 100px;
    height: 100px;
    background: #f60;
}

Sass mixin制作水平垂直居中

整   理:晋 哲

时   间:2017-01-06

说   明:使用Sass mixin 的方式将一些固定样式用法封装起来,能够提高样式复用性。

如水平垂直居中的示例:
常用的水平垂直居中方式是使用CSS transform属性或负向margin的方式,将这两种方法集成起来,通过判断是否有宽高值生成对应的样式。

/*定义mixin*/
@mixin center($width: null, $height: null){
     position: absolute;
     top: 50%;
     left: 50%;

     @if not $width and not $height{
          transform: translate(-50%, -50%);
     }
     @else if $width and $height{
          width: $width;
          height: $height;
          margin: -($height/2) #{0 0} -($width/2);
     }
     @else if not $height{
          width: $width;
          margin-left: -($width/2);
          transform: translate(0, -50%);
     }
     @else{
          height: $height;
          margin-top: -($height/2);
          transform: translate(-50%, 0);
     }
}

/*使用*/
.box1{
     @include center;
}
.box2{
     @include center(200px);
}
.box3{
     @include center(null, 300px);
}
.box4{
     @include center(200px, 300px);
}

CSS3 Animation steps()函数属性运用

整   理:晋 哲

时   间:2017-01-06

说   明:利用steps()函数的特效可以制作类gif动画的动态效果,搭配sprite图使用。

作用优势:代替gif动图的繁琐制作,调整动画便捷,较gif更清晰,图片进行压缩,文件可更小。

使用说明:animation的steps()函数内部的第一个参数设置为正整数,可以计算等分@keyframes规则内from到to的差值,最终进行动画切换。

如示例代码:

.dragon{
    width: 178px;
    height: 188px;
    background: url(images/dragon.png) 0 0 no-repeat;
    animation: run_dragon 2s steps(10) infinite;
}
@keyframes run_dragon{
    0%  {background-position: 0 0;}
    100%{background-position: -1780px 0;}
}

dragon

IOS键盘弹出导致fixed定位错位

整   理:晋 哲

时   间:2017-01-06

说   明:主要是input的焦点事件触发弹出键盘导致fixed定位失效,安卓没有该bug

方法一:使用absolute模拟fixed
1、当触发事件时,将固定定位的元素设置为【position:absolute;top:0;】
若页面高度一屏之内,则事件结束后还原样式即可;若页面很长则继续下一步

2、当页面滚动时,添加滚动事件,更新top值,使其看似一直在顶部

window.onscroll=function(){
    $(".fixed").css("top",$(window).scrollTop());
}

缺点:因为top值时实时计算的,页面滚动时,会有缓冲时间。

方法二:将溢出内容部分设置内部滚动,设置样式【…height:100vh;overflow:auto;】
因为键盘弹出时fixed失效,元素的位置自动根据scrollTop滚动的距离去定位,所以当页面高度为屏幕高度时,系统自动的定位也就在顶部了。

优点:该方法不需要再去设置复杂的js,仅设置样式即可,也是最常用的方法。

缺点:正常情况下是没有问题的,需注意的是商品列表中商品图片使用了lazyload.js,当内容部分设置overflow后,懒加载就失效了,因为它默认是整段body进行滚动监听的。解决方法:lazyload.js有参数【container】可以设置内部框架懒加载的。

解决前:
pic1

解决后:
pic2

网页返回事件监听

一、为什么要监听返回事件
个人中心改版后,用户进入个人中心,从个人中心进入我的资料,在我的资料里面可以修改昵称,头像,邮寄地址等信息。在修改完信息之后,会跳转到我的资料页面,代码中是直接指定了我的资料页面地址。于是,在修改完信息后的我的资料页面点返回按钮,会返回到修改信息的页面,而不会返回到个人中心。如下图历史记录。
image
二、监听返回事件方法
1、监听返回按钮的方法:
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
2、如果这样写,还是会返回到上一页,所以还需要使用pushstate增加一个本页的url。
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
3、完整的写法:
pushHistory();
window.addEventListener("popstate", function(e) {
window.location.href="./wx_grzx.html";
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}

在实践中,这个方法是会有bug的。如果修改昵称页面不点击保存按钮,直接返回的话会返回到我的资料后立即跳转到个人中心。
于是呢,就出现了使用定时器来解决的方法。
    pushHistory();
    var bool=false;
    setTimeout(function(){
        bool=true;
    },1500);//1.5秒后将bool设置为true
    window.addEventListener("popstate", function(e) {
        if(bool) {
            window.location.href="./wx_grzx.html";
        } else {
            bool = true;//如果在1.5秒内触发了一次,则直接将bool设置为true
        }
        pushHistory();

    }, false);

    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }

三、拓展知识
1、popstate用法:
popstate, 是HTML5新标准, 产生的目的就是做客户端前进后退。
每当处于激活状态的历史记录条目发生变化时,popstate事件就会被触发。如果当激活状态的历史记录条目是由history.pushState()方法创建的或者由history.replaceState()方法修改过的,则popstate事件的state属性包含了这条历史记录条目的state对象的一个拷贝。
需要注意的是调用pushState或者replaceState并不会触发popstate事件,只有点击浏览其回退按钮才回触发。

2、pushState和replaceState的异同。
    相同:用法相同
    以pushState来做说明:
    格式:pushState(state, title, url)
    参数说明:
    state:是一个javaScript对象或者json字符串,它关系到由pushState()方法创建出来的新的history实体。用来存储插入到历史记录条目的相关信息。
    title:一个暂时被某些浏览器忽略的参数,不过它在将来可能会被用上。现在的话可以传一个空字符串,也可以传一个简短的标题。
    url:用来传递新的history实体的url。即显示在地址栏的url。
    不同:pushState用于向history添加当前页面的记录,而replaceState是修改当前页面在history中的记录。
3、参考文档
    http://blog.csdn.net/tianyitianyi1/article/details/7426606

四、现有程序中如何使用
现在程序中使用的是,修改信息后,不指定跳转路径,而是使用window.history.go(-1);,这样在修改了信息之后返回到我的资料,我的资料再返就是到个人中心了。

微信公众平台,开放平台等相关基础知识

开放平台
释意:开放互联
平台提供:创建移动应用、创建网站应用、绑定公众帐号、创建公众号第三方平台
核心作用:提供UnionID,可以作为一个userCenter来管理所有渠道汇集过来的微信用户,识别用户唯一性。

一、简要描述和已开放功能
1、移动应用
接入微信开放平台,让你的移动应用支持微信分享、微信收藏和微信支付。
1.1、微信登录
1.2、微信分享与收藏
1.3、微信支付
1.4、微信智能接口(图像识别,语音设别,语音合成,语义理解)
2、网站应用
接入微信开放平台,让你的网站支持使用微信帐号来登录
2.1、微信扫码登录
2.2、微信智能接口(语义理解)
3、绑定公众帐号
接入微信开放平台公众帐号开发,为亿万微信用户提供轻便的服务。
(另翻一篇详说)
4、公众号第三方平台
成为公众号第三方平台,为广大公众号提供运营服务和行业解决方案
(暂无研究)

二、网站应用实践的相关记录
1、创建过程

1.1.1、填写基本信息
附件:微信开放平台网站信息登记表
1.1.2、填写网站信息,即授权回调域
只需要填写域名即可。
1.1.3、提交审核
1.2、据了解,之前起名,不受限制,现在对名字要求严格,尽量保持唯一性。所以对于已经出现过的名字,要求提供证明材料,证明对此名字有绝对的使用权。也许不久的将来,微信也会出一个商标名注册类似的东西吧。。。
1.3、审核提示是7个工作日,实际非常快,两三个小时可能就通过了审核。

2、程序实践
2.1、请求code
2.1.1、跳转方式获取code

2.1.2、jssdk方式获取code





测试网站应用,jssdk方式的登录




2.2、通过code获取access_token
<?php
$appid = 'wx597628e7e8fdbd47'; // 公众平台下,网站应用, 孕期提醒
$appsecret = 'fc02648b9f7698733b0bb45dbe1fcb88';
$state = $_GET['state'];

if ($state != $session_state) {
// die("授权终止");
}
$code = $_GET['code'];

$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code";
$r = curlRequest($url);
var_dump($r);

3、各类功能接口汇总
3.1、请求code
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
3.2、通过code获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
3.3、刷新access_token有效期
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
3.4、检验授权凭证(access_token)是否有效
https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID
3.5、获取用户个人信息(UnionID机制)
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

公众平台
释意:微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台,而公众平台开发接口则是提供服务的基础,开发者在公众平台网站中创建公众号、获取接口权限后,可以通过阅读本接口文档来帮助开发。
平台提供:订阅号,服务号,企业号,小程序
核心说明:微信公众平台开发是指为微信公众号进行业务开发;不要跟开放平台弄混淆。
其他说明,详见官方文档。https://mp.weixin.qq.com/wiki

一、简要描述和已开放、可申请功能 https://mp.weixin.qq.com/wiki
1、权限(开始前必读——公众号接口权限说明)
2、接口测试号申请:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
3、接口在线调试:http://mp.weixin.qq.com/debug/
4、其他先看看官方文档吧。。。。。

二、微信内网页授权登录以及指定内容分享
1、授权登录
https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.46117882231840723#1
2、指定分享内容
https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9996787578927169#fxjk
关于指定分享内容,之前尝试过,在非绑定域名下调起绑定域名下的资源,指定分享内容,结果是失败了。(有接触过,深究过的,一起探讨下,有没有其他可以绕过去的办法)

之前在专题那边封装的一个微信分享