vue+d3.js计算任意多边形面积
2024-06-11 02:11:46
效果图
代码
<!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>*{/*占据整个页面*/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: "计算任意多边形面积,请在下面区域内执行",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 () {//该函数用于挂载时，页面大小初始化$("#area").height(window.innerHeight);$("#area").width(window.innerWidth);},addPoints:function (event){//用于添加点this.arbitraryPolygonPoint.push({x:event.clientX,y:event.clientY});//把获取的点推入数组中this.arbitraryPolygonPointLength=this.arbitraryPolygonPoint.length;//得到数组的长度this.drawArbitraryPolygonPoint(this.arbitraryPolygonPoint);//每点击一次就向数组中添加点if(this.arbitraryPolygonPointLength>=3){this.dDutton=true;}},drawArbitraryPolygonPoint:function(arbitraryPolygonPoint){//用于画动态点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中添加圆节点},drawArbitraryPolygonArea:function(){//用于把动态点连接起来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;//通过取模来构造循环数字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 () {//移除节点，设置初始值$("#svg").empty();this.arbitraryPolygonPoint=[];this.arbitraryPolygonPointLength=null;this.dDutton=false;this.polygonArea="";}},mounted:function () {//挂载初始化this.settingHW();},computed:{//计算属性,实时动态监听pointChange:function () {return this.arbitraryPolygonPoint;}}})
</script>
</body>
</html>
vue+d3.js计算任意多边形面积相关推荐
- python计算任意多边形面积
看了一些方法网上的资料,也自己倒腾了一些想法. 然后看到这个大神的博客(<计算任意多边形的面积>),我就服气了. 我把代码转换为python: # 计算任意多边形的面积,顶点按照顺时针或者 ...
- python计算多边形的面积并保留两位小数_计算任意多边形面积的Python实现
最近需要实现一个计算非凸多边形面积的功能,需要输入是顺次排序的多边形顶点坐标,假设输入的多边形顶点是V={v0, v1, v2, -, vn-1},则多边形的边为E={, , ,...,, }.要求输 ...
- 计算任意多边形面积的Python实现
最近需要实现一个计算非凸多边形面积的功能,需要输入是顺次排序的多边形顶点坐标,假设输入的多边形顶点是V={v0, v1, v2, -, vn-1},则多边形的边为E={<v0, v1>, ...
- 【几何】计算任意多边形面积
给定一系列有序的线段(比如按顺序给定每个线段的左端点坐标),求这些线段围成的多边形的面积,公式为: 任意一个点与顺序相邻两点组成的三角形面积之和 分为凸多边形和凹多边形分别证明: 一.凸多 ...
- python计算多边形的面积并保留两位小数_Python计算任意多边形面积算法
多边形面积求解的方法很多,其中比较多见的就是增加一个点P,然后分别连接多边形各个定点与P点,然后计算每个三角形的符号面积(面积有正负之分),求和就可以计算出面积. 鉴于上面的方法,我们也可以用另外一种 ...
- python计算图形面积的方法_Python计算任意多边形面积算法
多边形面积求解的方法很多,其中比较多见的就是增加一个点P,然后分别连接多边形各个定点与P点,然后计算每个三角形的符号面积(面积有正负之分),求和就可以计算出面积. 鉴于上面的方法,我们也可以用另外一种 ...
- Java计算任意多边形面积
任意多边形的面积可由任意一点与多边形上依次两点连线构成的三角形矢量面积求和得出. 矢量面积=三角形两边矢量的叉乘.![在这里插入图片描述](https://img-blog.csdnimg.cn/ad ...
- 凸多边形面积_C++计算任意多边形的面积
任意多边形的面积计算_拾忆楓灵的博客-CSDN博客blog.csdn.net 计算任意多边形的面积 - tenos - 博客园www.cnblogs.com 完美解决计算3D空间任意多边形面积_S ...
- 计算任意多边形的面积
转载自 对于凸多边形,很容易计算,如下图,以多边形的某一点为顶点,将其划分成几个三角形,计算这些三角形的面积,然后加起来即可.已知三角形顶点坐标,三角形面积可以利用向量的叉乘来计算. 对于凹多边形,如 ...
最新文章
- 《Pro ASP.NET MVC 3 Framework》学习笔记之十六【示例项目SportsStore】
- Qt creator使用笔记
- html5新知识点,Html5基本知识点
- cisco 《连接网络》实验wan综合实验_GNS3实验环境优化与安装
- 又一访问access
- 面试题：聊聊Unix与Java的IO模型？
- 数组和lookup函数
- PostgreSQL 9.6 keepalived主从部署
- [react] React Intl是什么原理？
- ubuntu 禁用透明大页_禁用大内存页面
- excel删除行 uipath_工作再忙，也要学会这10个最经典的Excel小技巧
- 现在动手，建立你的灾备系统
- Ace在线代码编辑器使用
- 电脑重装教程win10系统怎样重装
- 人工雨量计_自动站与人工站遥测雨量计降水量对比分析
- IM 即时通讯开发如何设计图片文件的服务端存储架构
- PBR流程介绍和模型规范
- 腾讯地图的引用html
- 【解密】OpenSea免费创造的NFT都没上链竟能出现在我的钱包里？
- VirtualBox安装MacOS