百度360必应搜狗淘宝本站头条
ug5 0软件免费下载右键菜单清理flac文件grub4doss spline
当前位置：网站首页 > 技术文章 > 正文

中继器&三角函数绘制高复用折线图

cac55 2024-09-19 16:50 42 浏览 0 评论

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

原型界面：

中继器对应的数值：

最终html效果:

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

中继器数值分为三个：

  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轴差）】。

大功告成！

改变数值在运行一下：

是不是很简单呢？

再讲讲如何复用：

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

这个页面是参考的是公众平台助手的一个数据界面，完整界面如下（源文件可下载）：

原型文件下载：

密码：e48t

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

题图来自 Pexels，基于 CC0 协议

相关推荐

电工电路图中二极管、三极管的符号标识

1、二极管二极管是一种常用的具有一个PN结的半导体器件，它具有单向导电性，通过二极管的电流只能沿一个方向流动。二极管只有在所加的正向电压达到一定值后才能导通。在电工电路图中，二极管以专用的图形符号和电...

开关部件在电工电路中的符号标识

1、在电工电路中还常常绘制有具有专门含义的图形符号，认识这些符号对于快速和准确理解电路图十分必要。在识读电工电路的过程中，还常常会遇到各种各样的功能部件的图形符号，用于标识其所代表的物理部件，例如各种...

走过路过 别错过!整理最全电工电路各种元器件及辅料字母符号解析

走过路过别错过！整理最全电工电路各种元器件及辅料字母符号解析建议收藏备用起来以备不时之需！每天学习一点点就会有收获！...

熬夜吐血整理的电工电路的字母符号!及各种元器件实物图解符号!

熬夜吐血整理的电工电路的字母符号！及各种元器件实物图解符号！...

电气人士接好了!史上最全的电气符号介绍

有没有人像小编一样看到这样的图纸就犯晕啊？像这样的图纸对于电气人士来说应该不陌生吧，可是对于一些刚入行的，或者在电气行业却不是技术岗位的人来说，那与天书没什么区别。今天小编狠狠心，为大家搜集了一些关于...

新手工程师，这些电路图符号你都了解吗?

以下电路图符号大全，千万别弄错了噢~~更多行业信息可查阅快点PCB平台订阅号：eqpcb_cp。...

电工学习通(一):电路图符号知识大全(安科瑞任心怡、许玉龙)

电路图符号知识我们常说的电路图呢是一种以物理电学标准符号来绘制各MOS管电子元器件组成和关系的电路原理布局图，听不懂也没关系，我们只要记住以下几点就可以了：电路图符号数量众多，大致可以分为四个类别：传...

常用电子元器件电路符号及实物外形图，你值得拥有

作为一名电工初学者，认识并了解常用的电子元器件是一项必备的基本技能，这包括电子元器件的电路符号、实物、用途等。本文电工学习网小编和大家分享一些电子元器件的电路符号及实物外形图，希望对大家的学习有所帮助...

电工常用的符号及单位

常用的符号及单位①欧姆定律I=U/R(适用于电阻电路，如白炽灯)②电能计算W=P·t（W为我们常说的电度，P为功率多少瓦或千瓦，t为时间小时计量）例如一个220V,60W的白炽灯，在220V电压工...

电路图常用的字母符号及释义(详细版!)

你是不是在查看电路图时常遇到一些看不懂的字母或字符，不明白它们表示什么含义？今天小编整理了一些电路图常用的字母符号及其释义，供大家查阅，赶快收藏吧！在之前的文章，小编大致整理了绘制电路图常涉及的电路符...

最全电工电路的字母符号大全!电工必备知识技能!建议收藏备用

最全电工电路的字母符号大全！电工必备知识技能！建议收藏备用！每天学习一点点就会有收获！学海无涯！...

电路符号大全，赶快收藏

认识电路符号是绘制电路图的前提。绘制电路图需要涉及的电路符号罗列出来有很多，大致可以分为五个类别：基本电路符号、传输路径符号、开关和继电器符号、集成电路组件以及限定符号。基本电路符号绘制基础电路图可能...

电气电路的图形符号，不怕看不懂电路图啦

一、电压、电流、电池的图形符号//二、信号灯、信号器件、按钮、旋钮开关和测量仪表的图形符号//三、负载开关的图形符号//四、熔断器的图形符号//五、继电器、接触器、接触器触点和操作器件的图形符号//六...

图解普通电阻器电路符号的含义，初学者必看

电子元器件的电路符号中含有许多有用的、对电路分析有益的识图信息，掌握了电子元器件电路符号的识图，电路分析就会简单一些。电阻器电路符号图1-1所示是普通电阻器电路符号图解示意图。在电路分析中，为了表述方...

电路图符号大全(电容、电阻、二极管、三极官、集成电路)

基础知识薄弱，不懂工作原理，不会看图、识图，这里更多电路图（原理图）符号大全、电路图形符号（指用一种书画图形代表一种电子元件）(比如:电容、电阻、二极管、三极官、集成电路等等)的符号为初学...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表