vue+d3.js计算任意多边形面积
生活随笔
收集整理的這篇文章主要介紹了
vue+d3.js计算任意多边形面积
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>arbitraryPolygon</title><script src="js/jquery-3.3.1.js" type="text/javascript"></script><script src="js/vue.js" type="text/javascript"></script><script src="js/d3.js"></script><style>*{/*占據(jù)整個頁面*/margin: 0 0;padding: 0 0;}</style> </head> <body> <div id="app" ><div v-bind:style="titleAppStyle" class="appClick" id="area"><h1>{{titleApp}}</h1><svg xmlns="http://www.w3.org/2000/svg" id="svg" v-bind:style="svgStyle" v-on:click="addPoints"> </svg><div v-bind:style="tipDiv"><p style="height: 50px;line-height: 50px; text-align: center">提示板</p><p v-for="(item,key) in pointChange" v-bind:style="tipDivP">point{{key+1}} <span>x:{{item.x}}</span> <span>y:{{item.y}}</span> </p><p v-bind:style="areaTip" v-if="polygonArea?true:false"> 多邊形的面積為：<br>{{polygonArea}}</p><button v-bind:style="drawButton" v-if="dDutton" v-on:click="drawArbitraryPolygonArea">畫多邊形</button><button v-bind:style="resetButton" v-if="dDutton" v-on:click="removeSvg">重畫</button></div></div> </div> <script type="text/javascript">const app=new Vue({el:"#app",data: {titleApp: "計算任意多邊形面積,請在下面區(qū)域內(nèi)執(zhí)行",titleAppStyle: {//設置樣式'text-align': 'center','font-weight': 'lighter','backgroundColor': '#A9A9A9','overflow': 'hidden','margin': '0'},svgStyle: {'width': '100%','height': '100%','backgroundColor': '#D3D3D3'},tipDiv: {'width': '250px','position': 'absolute','right': '1rem','top': '3rem','background-color': 'rgba(105,105,105,0.8)','text-align': 'left','color': 'black'},tipDivP: {'padding': '0.5rem 2.5rem'},resetButton: {'position': 'absolute','right': '0','bottom': '0','background-color': 'black','border-radius': '3px','border-width': '0','margin': '0','outline': 'none','font-size': '15px','font-weight': 'lighter','text-align': 'center','cursor': 'pointer','width': '100px','height': '25px','color': 'aliceblue'},drawButton: {'position': 'absolute','left': '0','bottom': '0','background-color': 'black','border-radius': '3px','border-width': '0','margin': '0','outline': 'none','font-size': '15px','font-weight': 'lighter','text-align': 'center','cursor': 'pointer','width': '100px','height': '25px','color': 'aliceblue'},areaTip:{'position': 'absolute','top': '.1rem'},arbitraryPolygonPoint: [],//存儲多邊形的點arbitraryPolygonPointLength: null,dDutton: false,polygonArea:"",//三角形面積joinPoint:''//連接點},methods:{settingHW:function () {//該函數(shù)用于掛載時，頁面大小初始化$("#area").height(window.innerHeight);$("#area").width(window.innerWidth);},addPoints:function (event){//用于添加點this.arbitraryPolygonPoint.push({x:event.clientX,y:event.clientY});//把獲取的點推入數(shù)組中this.arbitraryPolygonPointLength=this.arbitraryPolygonPoint.length;//得到數(shù)組的長度this.drawArbitraryPolygonPoint(this.arbitraryPolygonPoint);//每點擊一次就向數(shù)組中添加點if(this.arbitraryPolygonPointLength>=3){this.dDutton=true;}},drawArbitraryPolygonPoint:function(arbitraryPolygonPoint){//用于畫動態(tài)點const dSvg=d3.select("#svg");dSvg.selectAll("circle").data(arbitraryPolygonPoint).enter().append("circle").attr('cx',function (d,i) {return d.x;}).attr('cy',function (d,i) {return d.y;}).attr('r',function (d) {return '2';}).attr("fill", "red").transition().duration(2000).ease(d3.easeBackIn).attr('r','20').transition().duration(500).ease(d3.easeBack).attr('r','5');//向svg中添加圓節(jié)點},drawArbitraryPolygonArea:function(){//用于把動態(tài)點連接起來const dSvg=d3.select("#svg");//得到畫布for(var i=0;i<this.arbitraryPolygonPoint.length;i++){this.joinPoint+=this.arbitraryPolygonPoint[i].x+" "+this.arbitraryPolygonPoint[i].y+" ";//拼接點}const polygon=dSvg.append('polygon').attr("class","triangle-svg").attr("points",this.joinPoint).attr("fill", "transparent").attr("stroke", "red").attr("stroke-width", 2);const polygonLength = document.querySelector(".triangle-svg").getTotalLength();//獲取 triangle-svg路徑總長度polygon.attr("stroke-dasharray",polygonLength ).attr("stroke-dashoffset",polygonLength ).transition().ease(d3.easeLinear).duration(6000).attr("stroke-dashoffset",0);this.computeArbitraryArea();},computeArbitraryArea:function(){//計算多邊形面積var j;for(var i=0;i<this.arbitraryPolygonPoint.length;i++){j = (i + 1) % this.arbitraryPolygonPoint.length;//通過取模來構(gòu)造循環(huán)數(shù)字this.polygonArea += this.arbitraryPolygonPoint[i].x * this.arbitraryPolygonPoint[j].y;this.polygonArea -= this.arbitraryPolygonPoint[i].y * this.arbitraryPolygonPoint[j].x;}this.polygonArea/=2;this.polygonArea=Math.abs(this.polygonArea);},removeSvg:function () {//移除節(jié)點，設置初始值$("#svg").empty();this.arbitraryPolygonPoint=[];this.arbitraryPolygonPointLength=null;this.dDutton=false;this.polygonArea="";}},mounted:function () {//掛載初始化this.settingHW();},computed:{//計算屬性,實時動態(tài)監(jiān)聽pointChange:function () {return this.arbitraryPolygonPoint;}}}) </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的vue+d3.js计算任意多边形面积的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于android7.0源码修改
- 下一篇： vue 组件名 下划线_团队Vue组件规