需求:用户在图片上点击选择绘制一个多边形区域,双击停止绘制,在结束绘制后给后台返回这组多边形顶点的位置
参考了百度地图提供的绘制多边形方法,但百度地图只提供了API可以调用,所以只能自己写方法了
$.extend({
stopDefault:function(e) {
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;
}
},
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:[],
cloneDOM:[]
})
$.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()
}
});
}
})