当前位置: 秋叶网络博客
查找闭合线条和非闭合线条
作者: 秋了秋 发表时间:2018年08月29日
mysql数据库迁移导入到mongodb详细教程
如果你有这样的场景: 1.在一堆的线段或者折线段内找出闭合折线段或者闭合边框。strong span li 2.把端点相连(相距安全距离之内)的多个线段合成一条折线段。strong span li 3.合成后的线段基础上闭合边框和非闭合边框进行分类。strong span li 4.收集它们的坐标信息加以利用。strong span li ul 那么你要好好看这篇文章,这篇文章专门解决了上述所有问题。 /*span * 【寻找闭合边框】by 秋叶博客 http://www.mizuiren.com/497.htmlspan * linesPoints可以是线条坐标点集[[{x:1,y:2},{x:2,y:3}],[{x:4,y:2},{x:6,y:7},{x:4,y:2}]]span * linesPoints也可以是线条的dom对象集合[document.querySelectorAll('polyline/line')];span * tolerance:安全间距span * */span function findCloseLine(linesPoints, tolerance) { var pointArrs = linesPoints; tolerance = tolerance || 0;//间隔,两个点相距多远以内算可以连接span if (!Array.isArray(linesPoints[0])) {//如果数组元素不是个对象就按照dom对象来处理span pointArrs = []; if(!Array.isArray(linesPoints )) {//如果是个dom集合,要把它转成数组span linesPoints = [].slice.call(linesPoints); } if (!tolerance) { tolerance = linesPoints[0].getAttribute('stroke-width');//间隔取第一条线条的宽度span } var points, match, xy, xys; linesPoints.forEach(function (line) {//把它们的路径转成坐标对象span points = line.getAttribute('points') || line.getAttribute('d'); if (!points) { return; } match = points.match(/\-?\d+(\.\d+)?.*?\d+(\.\d+)?/g); xys = []; match.forEach(function (item) { xy = item.match(/(\-?\d+(\.\d+)?).*?(\-?\d+(\.\d+)?)/); xys.push({ x: +xy[1], y: +xy[3] }); }); pointArrs.push(xys); }); } var closed = [], hadSearchIndexs = [], notClosed = [], combinePoint = [], hadCombinePoint; pointArrs.forEach(function (_points, index) { if (getDistance(_points[0], _points[_points.length - 1]) <= tolerance) { closed.push(_points); hadSearchIndexs.push(index); return; } combinePoint = []; hadCombinePoint = findNextConect(index, _points[0], 'begin');//查找线头的连接点span if (!hadCombinePoint) { hadCombinePoint = findNextConect(index, _points[_points.length - 1], 'end');//查找线尾的连接点span } if (hadCombinePoint) {//如果找到了连接点span if (getDistance(hadCombinePoint[0], hadCombinePoint[hadCombinePoint.length - 1]) <= tolerance) { closed.push(hadCombinePoint); } else { notClosed.push(hadCombinePoint); } } else {//如果没有找到了连接点span hadCombinePoint === '' || notClosed.push(_points);//hadCombinePoint为‘’(就是已经被连接了或当前线段)的时候不算在非闭合集合里面 } hadSearchIndexs.push(index); }); //拿一个端点去与其它线段的端点算距离判断是否相连,若相连把它们的坐标合并在一起组成一个完整线条span function findNextConect(currentIndex, point, beginOrEnd) { var hadConected, connectPoint, currentLine, _thisLinePoints; var combinePoint = []; _infun(currentIndex, point, beginOrEnd); function connectAction(beginOrEnd1, beginOrEnd2, waitConnectLine, index) { if (beginOrEnd1 === beginOrEnd2) { _thisLinePoints = _thisLinePoints.reverse(); } _action(beginOrEnd1, waitConnectLine); hadConected = true; hadSearchIndexs.push(index); _infun(currentIndex, connectPoint, beginOrEnd1); function isRepeatPoint(begin, end) { var endLastIndex = end.length - 1; return end[endLastIndex].x === begin[0].x && end[endLastIndex].y === begin[0].y; } function _action(beginOrEnd, waitConnectLine) { if (beginOrEnd === 'begin') { if (isRepeatPoint(waitConnectLine, _thisLinePoints)) { _thisLinePoints.pop(); } combinePoint = _thisLinePoints.concat(waitConnectLine); pointArrs[currentIndex] = combinePoint; connectPoint = combinePoint[0]; } else { if (isRepeatPoint(_thisLinePoints, waitConnectLine)) { _thisLinePoints.shift(); } combinePoint = waitConnectLine.concat(_thisLinePoints); pointArrs[currentIndex] = combinePoint; connectPoint = combinePoint[combinePoint.length - 1]; } } } function _infun(currentIndex, point, beginOrEnd) { var waitConnectLine = pointArrs[currentIndex]; if (waitConnectLine) { for (var i = 0; i < pointArrs.length; i++) { _thisLinePoints = JSON.parse(JSON.stringify(pointArrs[i]));//克隆对象,因为后面需要删改它span if (i === currentIndex) { continue; } if (hadSearchIndexs.indexOf(currentIndex) > -1) { currentLine = ''; continue; } if (hadSearchIndexs.indexOf(i) > -1) { continue; } if (getDistance(_thisLinePoints[0], point) <= tolerance) { connectAction(beginOrEnd, 'begin', waitConnectLine, i); break; } else if (getDistance(_thisLinePoints[_thisLinePoints.length - 1], point) <= tolerance) { connectAction(beginOrEnd, 'end', waitConnectLine, i); break; } } } } if (combinePoint.length) { return combinePoint; } else { return currentLine; } } //计算两个点的距离span function getDistance(p1, p2) { return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y)); } var category = {//返回闭合边框和非闭合边框的分类坐标点集合span closed: closed, notClosed: notClosed } return category; } //调用:span findCloseLine([document.querySelectorAll('polyline')], 10);pre div 注意: 1.只支持线段和折线段的查找组合,不支持圆弧、圆、曲线的参与查找;span strong 2.不支持两个闭合区域共线情况,如需支持,请自主融合后再查找;span strong 3.多个多边形相交,是可以找出来,但不会融合,同2,建议先融合;span strong 在线测试体验(按f12打开控制台查看结果):http://resource.mizuiren.com/查找闭合边框.htmla ...
目录: 前端编程 标签: 边框算法, 闭合边框 1条评论 3390次阅读
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间:2017年10月22日
mysql数据库迁移导入到mongodb详细教程
上一张按钮事件span $('.prev',$contaner).click(function() { clearInterval(interval); i -= 2; slide(); interval = setInterval(slide, speed); }); //鼠标移入移出事件span $ul.mouseover(function() { clearInterval(interval); }); $ul.mouseout(function() { interval = setInterval(slide, speed); }) }pre div 使用上一定要遵循以下html结构: <div id="banner"> <div class="banner"> <ulspan class="partsspan "> <li><img src="img/banner1.jpg"></a></li> <li><img src="img/banner2.jpg"&...
目录: 前端编程 标签: 轮播特效 10条评论 16811次阅读
智取百度、谷歌分词技术实现智能模糊搜索
作者: 秋了秋 发表时间:2017年08月27日
mysql数据库迁移导入到mongodb详细教程
所周知,wordpress的搜索相当糟糕,它是硬性(完全)匹配,为了实现博客智能模糊搜索功能,为了尽可能达到百度等各大搜索引擎的搜索效果,就要分词准确与分词扩展。用户输入一段话,如何将这句话根据词组切割成一段一段,通过这一段一段再去数据库匹配内容就是搜索技术的核心所在。 所谓智取就是爬虫技术,通过服务端发请求到第三方网站(跨域只在浏览器上独有的特性,在服务端发请求就不受任何限制了),我这里以百度为例...
目录: 前端编程 标签: 分词搜索, 搜索引擎 10条评论 19612次阅读
用Javascript给文本段落加上p标签实现换行
作者: 秋了秋 发表时间:2017年08月05日
mysql数据库迁移导入到mongodb详细教程
近在用node重写我的博客(憔悴了许多),既然从wordpress转过来的,wordpress基本功能还是不能变的,无形中加大了开发难度。比如说加密算法,数据表关系串联,数据库高并发IO性能优化。。。等等一大堆需要解决的问题,要做就要做最好的,用最优的方法,最快的算法,最安全的code来以太阳肩并肩。起初以为增删改查就完事了,其实没那么简单。就连读取文章看似很简单的事情其实并不是想象那样,直接从数据库里面读取出来的文章内容是不会换行的,尤其是没有标签的内容但是又换行了,这着实有点尴尬。 起初在分析换行的种种情况,思来想去突然明白...
目录: 前端编程 标签: 内容换行 3条评论 17452次阅读
网站流量计算及限额优化
作者: 秋了秋 发表时间:2016年08月26日
mysql数据库迁移导入到mongodb详细教程
缓存之类的。每天的pv在250左右,每个月将产生250x30=7G流量的空间,每天的pv在500左右,每个月将产生500x30=15G流量的空间,每天pv在1000的话30G,每天pv在2000的话60G,访问数据越大优化显得越来越重要。每一个图片,每一个资源多1kb都会产生巨大影响,这就是大数据的魅力。可以尽量压缩网页大小,采取服务器缓存页面进行优化...
目录: 网站建设 标签: 网站流量 10条评论 8744次阅读
我对js开发程序语言的理解
作者: 秋了秋 发表时间:2016年04月10日
mysql数据库迁移导入到mongodb详细教程
的一些公司,你说的只是切图。 发表下我的看法,就算是切图也是一门技术活,你认为很简单,是因为你没做到位,不是说实现了效果就行,还有很多方面都要考虑到,布局方法和技巧,兼容性,seo,命名,语义化,简化,维护成本等等,设计是图层操作,前端是代码操作,从切图上来说,前端要比设计累人。 前端也是设计,只是基于代码的设计,在js上尤为如此,同一个效果实现方法可能千重万种,你要如何实现,你代码写的质量如何,细腻度如何,该怎样构思你的代码? 关于js的算法和逻辑,交互和体验,你懂的,大部分人都卡在这js里面,技术是个无底洞,永远都有你学...
目录: 前端编程 标签: 1条评论 4476次阅读
论canonical的厉害
作者: 秋了秋 发表时间:2016年03月13日
mysql数据库迁移导入到mongodb详细教程
直以为canonical标签都不会被百度所重视,记得以前在哪看过百度的这样一段介绍:如果你滥用canonical标签的话,搜索引擎将会忽视canonical的存在而按照自己的原则来判断页面的重要性。 从此之后我就不太重视canonical的作用,认为即使错误的使用了也没多大关系,蜘蛛会自行判断。虽然这样想,但我还是对我网站的canonical用法做了严格模式。具体详情可看这篇文章《新版WordPress出现canonical问题的修复方法a 》...
目录: SEO优化 标签: canonical 3条评论 6470次阅读
自写JS模拟滚动条实现插件(支持触摸)
作者: 秋了秋 发表时间:2016年03月10日
mysql数据库迁移导入到mongodb详细教程
crollbar){ $scrollbar.style.top=$percent*$scrolllength+"px"; } e.preventDefault(); return false; } //滑块滚动span if(scrollbar){ $scrollbar.style.opacity=0.8; $iframe.onmouseover=function(){ $scrollbar.style.opacity=1; } $iframe.onmouseout=function(){ $scrollbar.style.opacity=0.8; } $scrollbar.onmousedown=function(e){ var objY=this.offsetTop; var e=e||window.event; var y=e.clientY; var realY=y-objY; var _this=this; $scrollHeight=$scrollContent.offsetHeight; document.onmousemove=function(e){ var e=e||window.event...
目录: 前端编程 标签: 滚动条 3条评论 5703次阅读
全新换域名在搜索引擎的影响跟踪记录
作者: 秋了秋 发表时间:2015年12月06日
mysql数据库迁移导入到mongodb详细教程
站名称搭配,我觉得完全没必要。 看重这域名就下手了,凭借我熟练的建站技术,注册域名,博客更换域名都是分分钟的事情。当然有很多注意的地方,这里就不细说了。这里来说说更换域名在搜索引擎里有啥反应。写这篇文章已经是换域名三天后了,但变化我还是依稀记在心中。主要是刚看到卢松松曾经的曾经也写过他换域名的跟踪记录,从www.lusongsong.com更换到lusongsong.com。想想我也忘了写个跟踪记录,也并不是模仿他,只是觉得写个跟踪记录让大家明白换域名有什么影响,了却大家的提心吊胆与顾虑。实际上他那个不算是换域名,只能说换网址,域名还是同一个...
目录: SEO优化 标签: 换域名 16条评论 10920次阅读
Wordpress更换域名需要注意的事项
作者: 秋了秋 发表时间:2015年12月05日
mysql数据库迁移导入到mongodb详细教程
ordpress更换域名意味着链接的整站全新更换,包括网址,图片链接,附件链接等等所有的链接。只有做好了这些链接的整体更换才能减少对搜索引擎的不良影响。 1.除了域名解析外和服务器绑定之外,在wp后台设置站点链接,这是首要更改的地方,如: p 修改管理员的个人资料中的url,设置之后,如果wp采用了缓存插件,还需手动清除缓存。 2.设置全站301,所谓全站301,千万不要用主机控制面板的301设置,有的主机会害死人,据我了解,很多主机控制面板的301重定...
目录: WP教程 标签: 换域名 3条评论 9839次阅读