应用场景

我们的项目中有个功能是,canvas上的某个图片选中后可以再这个图片上用鼠标拖拽绘制画笔线条。

当然绘制的边界要控制在图片大小范围内的,那么鼠标是可以随意动的,怎么能控制只在图片上的时候才绘制呢?

Canvas 2D API 有直接提供的方法:CanvasRenderingContext2D.isPointInPath() 用于判断在当前路径中是否包含检测点的方法

isPointInPath介绍

语法:

boolean ctx.isPointInPath(x, y);
boolean ctx.isPointInPath(x, y, fillRule); boolean ctx.isPointInPath(path, x, y);
boolean ctx.isPointInPath(path, x, y, fillRule);

参数:

x 检测点的X坐标  
y 检测点的Y坐标  
fillRule 用来决定点在路径内还是在路径外的算法。
  • "nonzero": 非零环绕规则,缺省值。
  • "evenodd": 奇偶环绕原则 。

返回值:

一个Boolean值,当检测点包含在当前或指定的路径内,返回 true;否则返回 false。

非零环绕原则

规则是从点引出任意一条射线,与路径交点结果计算,如果计数不为0,那么此点就在路径范围里面,在调用fill()方法时,浏览器就会对其进行填充。如果最终值是0,那么此区域就不在路径范围内,浏览器就不会对其进行填充。

首先,我们得给图形确定一条路径,只要“一笔画”并且“不走重复路线”就可以了。如图,标出的是其中的一种路径方向。我们先假定路径的正方向(逆时针)为1,那么反方向(顺时针)就是其相反数-1。(整个定义可以反过来的,正方向为顺时针,反方向为逆时针)

接下来,我们就来判断了。

点P1中引出的任意一条射线L1,与一条正方向路径相交,那么我们就给计数器+1,结果为+1,所以点P1在外面。

点P2中引出的任意一条射线L2,与两条子路径的正方向相交,计数器+2,结果为+2,所以点P2在外面。

点P3中引出的任意一条射线L3,与两条子路径相交,但是其中有一条的反方向,计数器+1-1,结果为0,所以点P3在里面。

点P4中引出的任意一条射线L4,与一条子路径相交,路径为反方向,计数器-1,结果为-1,所以点P4在外面。

只要结果不为0,判断的点就在区域的外面。结果为0,点在区域里面(绿色区域)

奇偶环绕原则

奇偶环绕原则理解为:

平面内的任何一点P,引出一条射线,注意不要经过多边形的顶点,如果射线与多边形的交点的个数为奇数,则点P在多边形的内部;如果交点的个数为偶数,则点P在多边形的外部。

我们用这个方法判断的结果是:

P1,P4与路径交点为1,所以是在里面

P2,P3与路径交点为2,所以实在外面

参考:https://www.jianshu.com/p/ce72c4402f7a

canvas判断点是否在路径内的更多相关文章

  1. canvas路径剪切和判断是否在路径内

    1.剪切路径 clip() var ctx=mycanvas.getContext('2d'); ctx.beginPath(); // 建一个矩形路径 ctx.moveTo(20,10) ctx.l ...

  2. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...

  3. 【Unity3D自学记录】判断物体是否在镜头内

    判断物体是否在镜头内. 其实很简单的方法 代码如下: using UnityEngine; using System.Collections; public class DJH_IsRendering ...

  4. hrbustoj 1429:凸多边形(计算几何,判断点是否在多边形内,二分法)

    凸多边形 Time Limit: 2000 MS    Memory Limit: 65536 K Total Submit: 130(24 users)   Total Accepted: 40(1 ...

  5. C# 判断点是否在多边形内

    /// <summary>/// 判断点是否在多边形内/// </summary>/// <param name="pnt">点</par ...

  6. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  7. js 日期比较大小,js判断日期是否在区间内,js判断时间段是否在另外一个时间段内

    /** * 日期解析,字符串转日期 * @param dateString 可以为2017-02-16,2017/02/16,2017.02.16 * @returns {Date} 返回对应的日期对 ...

  8. JS判断元素是否在数组内

    //判断元素是否在数组内 function contains(arr, obj) { var i = arr.length; while (i--) { if (arr[i] === obj) { r ...

  9. C#路径的八种相关操作,判断字符串是否为路径等

    原文:C#路径的八种相关操作,判断字符串是否为路径等 1.判定一个给定的C#路径是否有效,合法 通过Path.GetInvalidPathChars或Path.GetInvalidFileNameCh ...

随机推荐

  1. macOS & wifi & ip

    macOS & wifi & ip mac show wifi ip # wireless ipconfig getifaddr en1 # ethernet ipconfig get ...

  2. Flutter:发布包

    [package] 生成包含模块化Dart代码的可共享Flutter项目 [plugin] 生成一个可共享的Flutter项目, 在Dart代码中包含带有API的API, 针对Android的平台特定 ...

  3. NGK——更好的数据与网络

    对于NGK而言,帐本是不可或缺的,所以NGK有独立的共识层,共识层有单独的参与的共识节点.而其余计算都丢给其他的计算资源计算,共识层汇总一个正确的结果即可. 进行大量计算过程的资源是另一种节点,在NG ...

  4. 精密进近OCH的计算

    一.计算步骤 以I类精密进近为例,运行标准的制定大致分为以下几个步骤: 1)确定精密航段的超高障碍物. 2)计算当量高 3)计算高度损失 4)当量高与高度损失相加得到超障高OCH 5)对复飞段障碍物进 ...

  5. vue中v-model的学习

    v-model在表单元素input.radio.checkBox.textarea创建双向数据绑定,他会根据类型选取正确的方法来更新元素,本质不过是语法糖,负责监听用户的输入操作以更新数据并对一些极端 ...

  6. eclipse中将项目加载到tocat报错:Tomcat version 6.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 Web modules

    第一种解决方法:只需要找到导入项目的配置文件即可,举个栗子:D:\公司\iptv_gx\iptv_gx\.settings\org.eclipse.wst.common.project.facet.c ...

  7. Mysql训练:两个表中使用 Select 语句会导致产生 笛卡尔乘积 ,两个表的前后顺序决定查询之后的表顺序

    力扣:超过经理收入的员工 Employee 表包含所有员工,他们的经理也属于员工.每个员工都有一个 Id,此外还有一列对应员工的经理的 Id. +----+-------+--------+----- ...

  8. C#日志使用

    本文参考链接 日志框架 框架选择:NLog 安装方法,Nuget命令行:Install-Package NLog 常用规则 尽量不要在循环中打印日志. 应输出错误的堆栈信息:e.Message仅为异常 ...

  9. Portainer中文汉化

    一.概述 Portainer是Docker的图形化管理工具,提供状态显示面板.应用模板快速部署.容器镜像网络数据卷的基本操作(包括上传下载镜像,创建容器等操作).事件日志显示.容器控制台操作.Swar ...

  10. Git 命令将电脑上的文件上传到 Github

    1.在电脑上安装 Windows 版 Git下载地址:https://git-scm.com/downloads2.使用 Git GUI 生成 SSH Key 3.将 SSH Key 添加到 Gith ...