Canvas判断线段是否重叠

比如我们,想画一个完整的闭合的矩形,那我们就不能让线段进行重叠

那线段重叠了,判断的方法呢

 canvas.onmouseup = function (e) {e = e || window.event;//let gx = e.clientX - canvas.getBoundingClientRect().left;//let gy = e.clientY - canvas.getBoundingClientRect().top;// 这个是画点的位置的 小矩形,方便 好看一些//ctx.clearRect(0,0,canvas.width,canvas.height);//ctx.drawImage(tc,0,0,canvas.width,canvas.height);//ctx.beginPath();//ctx.fillStyle = "rgb(255,255,255)";//ctx.fillRect(gx - 4, gy - 4, 8, 8);//ctx.moveTo(points[0].x,points[0].y);//for (let i = 0; i < points.length; i++) {//if (i >= 0) ctx.lineTo(points[i].x , points[i].y);//}//if(flag) ctx.closePath();//ctx.stroke();// points 存的是每个点的位置// const points = [//     {x: 344, y: 210.875},//     {x: 751, y: 138.875},//     {x: 710, y: 333.875},//     {x: 417, y: 401.875},//     {x: 416, y: 166.875}// ];for(let i=0,j=points.length; i< j; i++) {if(i>=1 && i<j-1) {let data = [];//这个的意思是把 每个点 都变成线段 看有没有重叠的data[0] = points[i-1];data[1] = points[i-0];data[2] = points[j-2];data[3] = points[j-1];if(intersects(data)) {// 有数据 说明已经有交叉的线段了// 你可以写相应的 报错提示信息//...}}}};// 确定是否有交叉口function intersects(seg) {let p = intersection(seg); p = p.split(",");let Boole = p[0] > Math.min(seg[0].x, seg[1].x) && p[0] < Math.max(seg[0].x, seg[1].x) && p[0] > Math.min(seg[2].x, seg[3].x) && p[0] < Math.max(seg[2].x, seg[3].x);if(Boole){return p;  }};function intersection(seg) {let x1 = seg[0].x,y1 = seg[0].y,x2 = seg[1].x,y2 = seg[1].y,x3 = seg[2].x,y3 = seg[2].y,x4 = seg[3].x,y4 = seg[3].y,nx, ny, d;d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);return Math.round(nx / d)+","+ Math.round(ny / d);};

Canvas判断线段是否重叠相关推荐

java判断线段是否相交函数_计算几何-判断线段是否相交
计算几何-判断线段相交判断两线段是否相交: 快速排斥跨立实验(这两个词也是我看博客的时候看到的,觉得挺高大上的就拿过来用了,哈哈哈) 1. 快速排斥:就是初步的判断一下,两条线段是不是相交,以两条 ...
1091 线段的重叠
基准时间限制:1 秒空间限制:131072 KB 分值: 5 难度:1级算法题 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 25]的重叠部分为[12 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
POJ 1410 Intersection 判断线段交和点在矩形内【计算几何】
ACM博客_kuangbin POJ 1410 Intersection(判断线段交和点在矩形内) Intersection Time Limit: 1000MS Memory Limit: 10 ...
判断线段相交(hdu1558 Segment set 线段相交+并查集)
先说一下题目大意:给定一些线段,这些线段顺序编号,这时候如果两条线段相交,则把他们加入到一个集合中,问给定一个线段序号,求在此集合中有多少条线段. 这个题的难度在于怎么判断线段相交,判断玩相交之后就是 ...
判断线段相交 + vector. erase迭代指针的使用 poj 2653 Pick-up sticks
题目来源:http://poj.org/problem?id=2653 分析: 题意:按顺序给出一些木棍,输出在最上面的木棍标号. 用vector 存储木棍标号, 当前木棍与 vector 中的木棍 ...
判断线段和直线相交 POJ 3304
1 // 判断线段和直线相交 POJ 3304 2 // 思路: 3 // 如果存在一条直线和所有线段相交,那么平移该直线一定可以经过线段上任意两个点,并且和所有线段相交. 4 5 #include ...
51Nod 1091 线段的重叠(贪心+区间相关,板子题)
1091 线段的重叠基准时间限制:1 秒空间限制:131072 KB 分值: 5 难度:1级算法题 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 2 ...
几何常用算法与判断线段相交【转】
下面这个函数在我写的计算几何库函数里面有,那个库可以在http://algorithm.126.com/的资源中心 - 代码角找到. 算法简单说明: 首先判断以两条线段为对角线的矩形是否 ...

Canvas判断线段是否重叠

Canvas判断线段是否重叠相关推荐

最新文章

热门文章