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

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

cac55 2024-09-19 16:50 36 浏览 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 协议

相关推荐

让组策略保护Windows XP的安全

默认安装完WindowsXP之后，我们的WindowsXP并不很安全。因此，我们有必要对系统进行一些修修补补，一般情况下我们都要动用到注册表。诚然，修改注册表是一种非常有效的方法，但是它需要一定的...

你造吗?十种方式保护你免受"零日攻击"

|责编：王迪WindowsXP的寿终正寝，数据安全问题又再一次成为人们关注的焦点。近日，微软透漏，一个基于InternetExplorer的“零日攻击”给用户带来了严重破坏。“零日攻击”一种利用...

特立独行——打造游戏专用独立系统

大部分人的电脑是为了学习和工作用的，所以，如果你是一个游戏迷，那么推荐你安装一个独立系统专用于游戏，做到工作娱乐两不相扰。方案1：游戏专用移动WindowsXP目的：解决游戏兼容性问题喜欢玩游戏的都...

驰为VX8 3G Win8入门教程篇

距离Win8.1的正式发布也将近1年了，凭借着Win8.1在移动便携以及娱乐办公上的优势，现在的Win8平板越来越受到消费者的追捧，而驰为VX83G就是其中一款，搭载了卓越的英特尔Z3735G四核芯，...

易淘收银软件说明

易淘收银系统，简称易淘收银，专为小型及连锁零售、餐饮行业打造。基于SaaS模式，智能便捷，无需维护，轻量级设计却功能强大，简约而不失专业，助力门店高效管理收银。1、前台系统：收银客户端；2、后台系...

CAD打不开怎么办?原因可能是电脑中毒了，6步就能完美解决问题

一、问题描述我的CAD安装后无法打开，安装过程中没有出现任何问题，但是安装后打开就出现一个对话框“DBXCAS0”点击后又出现“FATALERROR:UnhandledAccessViola...

腾讯QQ6.1正式版发布更新

2014-07-2405:12:00作者：张林【中关村在线软件资讯】7月24日消息：腾讯QQ官网小幅更新了QQ6.1正式版，最新版本号升级至11905，继续主打扁平化、炫酷登录窗口、支持同步最近一...

Win10等网页版OneDrive无法登陆怎么办?

IT之家（www.ithome.com）：Win10等网页版OneDrive无法登陆怎么办？Win10之家报道，微软OneDrive云网盘是跨平台的数据同步和存储服务，支持WindowsPC（如Wi...

经典回顾:折戟沉沙的Windows Longhorn有着惊艳的登录屏幕

尽管微软原先计划让WindowsLonghorn继承WindowsXP操作系统的衣钵，但这个充满雄心壮志的操作系统项目最终还是未能迎来曙光，而是被微软用WindowsVista取而代...

电脑怎么优化

电脑配置和宽带流量也是硬件，但这些要求其实并不需要很高，关键还是怎么去安全使用电脑并进行有效的优化。电脑的应用和优化处理一、电脑的应用和优化处理二、目前，大家使用的个人电脑，配置方面均没多大问题，比如...

怎么安装usb驱动

USB驱动主要是针对WIN98时代的说法，如今WINXP已集成大部分USB驱动，通常都能识别。只有极少数情况下，例如手机、打印机或扫描仪等办公设备的USB驱动可能无法自动识别。1、USB驱动偶尔无法...

普通话考试多名考生信息被泄露，接投诉后涉事网站被限制访问

“陕西普通话成绩查询网（sxpth.cn）”泄露个人信息网站截图网传图片显示，407名普通话考试考生的姓名、身份证号码等个人信息疑似被泄露。9月26日下午，涉事网站sxpth.cn的域名注册商——成...

电脑伪技巧——个人电脑无需设置登录密码

默认情况下，我们每次登录系统都要输入登录账户对应的密码才能进入桌面。有些朋友觉得这样很麻烦，由于电脑只是自己使用，还不如不要设置密码，这样每次可以自动登录。大家知道，账户密码是系统验证用户合法性的唯一...

Windows 10/11 自带远程桌面:实用技巧与操作指南

Windows10/11自带远程桌面：实用技巧与操作指南在当今快节奏的数字时代，远程访问和控制计算机的需求日益增长。微软在Windows10和Windows11中内置了远程桌面功能，为用户提供...

不升级系统的5大原因造吗?

2015-01-2405:54:00作者：陈占伟Windows10系统的发布，让人们重新将目光聚焦到生命力长久的Windows系统之上。如今操作系统越来越多，似乎Windows升级的获得的关注度...

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

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