怎么算斜线的长度,斜线长度怎么算直线长度?

首页 > 实用技巧 > 作者:YD1662023-06-24 14:47:23

本文将讲解如何通过中继器与三角绘制一个折线,并实现高复用(做简单的改变即可适应于不同的需求,如改变数值直接改变折线的样子,文末附源文件下载。)

怎么算斜线的长度,斜线长度怎么算直线长度?(1)

原型界面:

怎么算斜线的长度,斜线长度怎么算直线长度?(2)

中继器对应的数值:

怎么算斜线的长度,斜线长度怎么算直线长度?(3)

最终html效果:

怎么算斜线的长度,斜线长度怎么算直线长度?(4)

现在我们就来看看如何实现呢?

中继器数值分为三个:

  1. xulie:序列(无意义)
  2. zhi1:每个线段起点的值
  3. zhi2:每个线段重点的值(zhi2=后一个序列的zhi1)

相应的中继器内的原件分为是四个:

  1. 起点半圆:d1;
  2. 终点半圆:d2;
  3. 线段:t;
  4. 背景(半透明层):yt (为了出背景交替的效果,也是作为隔断的宽)。

将值带入:

d1的坐标(0,[[This.y-Item.zhi1-5]])

y=当前点的位置-应该上移动的位置;应该上移动的位置=zhi1 6(起点半圆的半径)-1(线宽的一半)

d2的坐标([[yt.width-6]],[[This.y-Item.zhi2-5]])

x=一个隔断的宽度-终点半圆的半径】【y=当前点的位置-应该上移动的位置;应该上移动的位置=zhi2 6(起点半圆的半径)-1(线宽的一半)

现在重点来了,对线段的处理分为如下三部:

  1. 将线段移动到应该的位置d;
  2. 计算出两点之间的斜线的长度l,并改变线段的尺寸为l;
  3. 计算出线段应该旋转的角度,并旋转线段。

直接上公式了:

  1. 移动位置为(0,[[This.y-Item.zhi1-5]])。
  2. 线段长度为 ([[Math.pow(This.width*This.width (Item.zhi2-Item.zhi1)*(Item.zhi2-Item.zhi1),0.5)]]) 【y= (隔断的宽度^2 起点终点的高度差^2)开平方】。
  3. 旋转的角度为([[Math.atan(Item.zhi2-Item.zhi1)/yt.width)*180/3.14]])【角度=atan(起点终点的y轴差/起点终点的x轴差)】。

大功告成!

改变数值在运行一下:

怎么算斜线的长度,斜线长度怎么算直线长度?(5)

是不是很简单呢?

再讲讲如何复用:

  1. 若需要改变数据条数,直接为中继器添加数据几个;
  2. 若需要改变一个隔断的宽度,直接改变中继器中的的 线段t的长度 与背景半透明层yt的宽,并调整终点的起始位置即可;
  3. 需要调整整个折线图的高度,直接改变中级其中的线段 t 起点终点半圆(d1,d2)的位置,并改变半透明层yt的高度即可。

这个页面是参考的是公众平台助手的一个数据界面,完整界面如下(源文件可下载):

怎么算斜线的长度,斜线长度怎么算直线长度?(6)

原型文件下载:

密码:e48t

本文由 @ ytw 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pexels,基于 CC0 协议

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.