基于SVG的绘制多边形jQuery插件

需求：用户在图片上点击选择绘制一个多边形区域，双击停止绘制，在结束绘制后给后台返回这组多边形顶点的位置

参考了百度地图提供的绘制多边形方法，但百度地图只提供了API可以调用，所以只能自己写方法了

//以svg的jquery对象调用DrawPloygon(),svg内的图片需要设置为background；
//因为jquery的append方法和原生js的creactElement方法只能创建双标签，但path标签无法再双标签下输出样式，所以每次图形完成后讲svg内的path存储，再次绘制时以jquery的html方法创建新的path标签，再读取存储的path添加到svg内部
//返回的顶点参数是相对于svg的top和left的百分比
//在双击取消绘制时可能会触发user-select属性，需自行设置取消
$.extend({stopDefault:function(e) {//阻止默认浏览器动作(W3C)if (e && e.preventDefault){e.preventDefault();} else{window.event.returnValue = false;return false;}},//阻止浏览器的默认行为stopDefault:function (e) {if (e && e.preventDefault ){e.preventDefault();}else{window.event.returnValue = false;return false;}},// 讲顶点的坐标换算成相对应的百分比并存入PointPosition中DealArr:function(arr,origin,ContainerWidth,ContainerHeight){var arr=arr;var Oarr=$.PercentPoint(origin.split(' ').splice(1,2),ContainerWidth,ContainerHeight);var Larr=$.PercentPoint(arr,ContainerWidth,ContainerHeight);var Last=Oarr.concat(Larr)$.PointPosition.push(Last);},//计算百分比函数PercentPoint:function(arr,ContainerWidth,ContainerHeight){for(var i=0;i<arr.length;i++){if(i%2==1){arr[i]=(arr[i]/ContainerHeight).toFixed(3);}else {arr[i]=(arr[i]/ContainerWidth).toFixed(3);}};return arr},//储存点坐标的数组PointPosition:[],//每次双击后酱svg内的path存入数组cloneDOMcloneDOM:[]
})$.fn.extend({DrawPloygon:function(color,FillColor,StrokeWidth){var ClickTimes=0;  //记录是否是第一次点击var self=$(this);var origin;var ClickPoint;var color='red' || color;   //线条颜色var StrokeWidth='3' || StrokeWidth;     //线条宽度var FillColor='red' || FillColor;       //填充颜色var arr;var length;var ContainerWidth=self.width();var ContainerHeight=self.height();//设置默认属性var DefaultValue="stroke='"+color+"' stroke-width='"+StrokeWidth+"' stroke-linejoin='round'stroke-linecap='round'fill-rule='evenodd'stroke-opacity='0.8'stroke-dasharray='none'fill-opacity='0.4' fill='"+FillColor+"'stroke-dasharray='none'";self.on('click',function(e){ClickTimes++;if(ClickTimes == 1){origin=' '+e.offsetX+' '+e.offsetY+' ';self.html('<path d="M -9999 -9999"'+DefaultValue+' />');if($.cloneDOM.length){$.cloneDOM.map(function(v,i){self.prepend(v)})}}else{arr=self.find('path').last().attr('d').split(' ');length=arr.length;ClickPoint=arr.slice(3,length-3).join(' ');};});self.on('mousemove',function(e){if(ClickTimes>=1){$.stopDefault(e);var path=self.find('path').last();var MovePoint=' '+e.offsetX+' '+e.offsetY;if(ClickTimes == 1){path.attr('d','M'+origin+'L'+MovePoint+origin);} else{path.attr('d','M'+origin+ ClickPoint+MovePoint+origin);};}});self.dblclick(function(e){if(ClickTimes>=1){$.stopDefault(e);self.unbind();$.DealArr(arr.slice(4,length-3),origin,ContainerWidth,ContainerHeight);$.cloneDOM.push(self.find('path').last().clone())self.unbind();self.DrawPloygon()}});}
})//$('#svg').DrawPloygon()

基于SVG的绘制多边形jQuery插件相关推荐

基于svg开发绘制地铁图
中国地铁图中国地铁图,基于svg开发,支持PC.移动端多种浏览器.覆盖北上广多个城市. 线上开源地址 https://github.com/StavinLi/the-subway-of-china ...
转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
200个 jquery插件
引用:http://paranimage.com/jquery-plugin-list/ jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其te ...
241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
基于HTML5 SVG可互动的3D标签云jQuery插件
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件.该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观. 效果演示 ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
1. 概述--从零起步实现基于Html5的WEB设计器Jquery插件
当一个软件为了达到一定的业务扩展性时(产品上线后限定范围内的用户需求无需变更代码,通过简单的配置可满足用户的要求),必然要求软件是可配置的. 笔者过去开发过很多配置型的管理软件,从可配置的表单设计(F ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
html画流程图插件,基于SVG的流程图插件Flowchart.js
Flowchart.js基于SVG的流程图插件,它仅需几行代码即可在 Web 上完成流程图的构建.可以从文字表述中画出简单的 SVG 流程图,也可以画出彩色的图表. var diagram = flo ...

基于SVG的绘制多边形jQuery插件

需求：用户在图片上点击选择绘制一个多边形区域，双击停止绘制，在结束绘制后给后台返回这组多边形顶点的位置

参考了百度地图提供的绘制多边形方法，但百度地图只提供了API可以调用，所以只能自己写方法了

基于SVG的绘制多边形jQuery插件相关推荐

最新文章

热门文章