当前位置: 秋叶网络博客
查找闭合线条和非闭合线条
作者: 秋了秋 发表时间: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条评论 2628次阅读
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间: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条评论 15729次阅读
用Javascript给文本段落加上p标签实现换行
作者: 秋了秋 发表时间:2017年08月05日
mysql数据库迁移导入到mongodb详细教程
近在用node重写我的博客(憔悴了许多),既然从wordpress转过来的,wordpress基本功能还是不能变的,无形中加大了开发难度。比如说加密算法,数据表关系串联,数据库高并发IO性能优化。。。等等一大堆需要解决的问题,要做就要做最好的,用最优的方法,最快的算法,最安全的code来以太阳肩并肩。起初以为增删改查就完事了,其实没那么简单。就连读取文章看似很简单的事情其实并不是想象那样,直接从数据库里面读取出来的文章内容是不会换行的,尤其是没有标签的内容但是又换行了,这着实有点尴尬。 起初在分析换行的种种情况,思来想去突然明白...
目录: 前端编程 标签: 内容换行 2条评论 16365次阅读
网站流量计算及限额优化
作者: 秋了秋 发表时间:2016年08月26日
mysql数据库迁移导入到mongodb详细教程
缓存之类的。每天的pv在250左右,每个月将产生250x30=7G流量的空间,每天的pv在500左右,每个月将产生500x30=15G流量的空间,每天pv在1000的话30G,每天pv在2000的话60G,访问数据越大优化显得越来越重要。每一个图片,每一个资源多1kb都会产生巨大影响,这就是大数据的魅力。可以尽量压缩网页大小,采取服务器缓存页面进行优化...
目录: 网站建设 标签: 网站流量 10条评论 8277次阅读
我对js开发程序语言的理解
作者: 秋了秋 发表时间:2016年04月10日
mysql数据库迁移导入到mongodb详细教程
的一些公司,你说的只是切图。 发表下我的看法,就算是切图也是一门技术活,你认为很简单,是因为你没做到位,不是说实现了效果就行,还有很多方面都要考虑到,布局方法和技巧,兼容性,seo,命名,语义化,简化,维护成本等等,设计是图层操作,前端是代码操作,从切图上来说,前端要比设计累人。 前端也是设计,只是基于代码的设计,在js上尤为如此,同一个效果实现方法可能千重万种,你要如何实现,你代码写的质量如何,细腻度如何,该怎样构思你的代码? 关于js的算法和逻辑,交互和体验,你懂的,大部分人都卡在这js里面,技术是个无底洞,永远都有你学...
目录: 前端编程 标签: 1条评论 4182次阅读
论canonical的厉害
作者: 秋了秋 发表时间:2016年03月13日
mysql数据库迁移导入到mongodb详细教程
加规则,然而一不小心就留下了后患。 当时我只是在文章页面上加上了<link rel="canonical" href="<?php the_permalink(); ?>" /> 这段代码是很久很久以前加的,两个月之前优化代码为了节约代码运行效率不小心把判断语句删了,导致博客所有的页面都加了这句代码。然而<?php the_permalink(); ?>在首页是会癫狂的,它输出的url是最新文章的url而非首页url,导致我博客的seo状况日渐消怠。短短两个月时间,从以前200多ip降到几乎为0。从以前关键词库几十降到现在几乎为0。起初以为是我换空间备案的问题,也纠结了许久,一直认为不可能是空...
目录: SEO优化 标签: canonical 3条评论 6095次阅读
自写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条评论 5133次阅读
全新换域名在搜索引擎的影响跟踪记录
作者: 秋了秋 发表时间:2015年12月06日
mysql数据库迁移导入到mongodb详细教程
他那个不算是换域名,只能说换网址,域名还是同一个域名,参考性和可靠度偏差。而我的才是实实在在完完全全的换域名,从上到下,从里到外彻彻底底更换。 先简单说说更换域名前我的网站的seo状况吧,权1,每天200左右非常稳定的ip,每个时段的访问ip曲线几乎都一样。90%左右是百度搜索来量,维持了几个月了。以下是站长工具记录的收录情况和5118大数据记录的关键词收录数量的曲线图: p p 可能会有人说,虽然权重不是特别高,但也不是特别低,这seo水平在博客界还算过得去吧。为什么要把两年的老域名抛弃而奉养一个刚出生的小娃娃,不怕权重尽失,流量远去吗?...
目录: SEO优化 标签: 换域名 15条评论 10180次阅读
Wordpress更换域名需要注意的事项
作者: 秋了秋 发表时间:2015年12月05日
mysql数据库迁移导入到mongodb详细教程
tp://www.wuover.com'pre div 通过这种语句也可以批量修改某个评论者的链接,比如说去除死链接,更换新链接等。 5.到百度站长平台提交新链接,以及制定改版规则,也就是链接的替换。在优化与维护那个左菜单栏下的“网站改版”: p 我的显示部分改版中是由于有些链接它打不开,所以才这么提示的,这没关系,打不开的就由301来让它慢慢生效就好了。 6.外链这种东西你要有这个时间和精力也最好去修改下吧~挑重要的,否则你会吃不消~比如说多说的修改,只要修改个人资料就能达到整体多说外链的修改...
目录: WP教程 标签: 换域名 3条评论 9439次阅读
响应式全屏无缝滚动式幻灯片
作者: 秋了秋 发表时间:2015年11月13日
mysql数据库迁移导入到mongodb详细教程
'#prenext .pre').click(function() { clearInterval(qiuye_interval); i -= 2; qiuye_bo(); qiuye_interval = setInterval(qiuye_bo, 3000); }) //鼠标移入移出事件span $('#cgw').mouseover(function() {clearInterval(qiuye_interval);}) $('#cgw').mouseout(function() {qiuye_interval = setInterval(qiuye_bo, 3000);}) });pre div 特别特点: 1.RT 2.响应式 3.宽屏 4.无缝 5.滚动式 其他功能 1.焦点点击 2.hover 3.前进后退点击按钮 效果如下: p...
目录: 前端编程 标签: 幻灯片 6条评论 6491次阅读