<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<svg id="svg" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #ccc;"></svg>
</body>
</html>
<script>
//以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存入數組cloneDOM
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()
}
});
}
})
$('#svg').DrawPloygon();
</script>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)