根据标签出现的频次渲染不同大小的圆和文字,圆随机摆放且相互之间不重叠

效果图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/19018cc52a4349d3adaf0da6fff5c2ee.png

按每个标签出现的频次大小渲染出不同比例大小的圆,渲染的圆的宽度区间为 [40, 160] ,其中的文字的大小区间为 [12, 30] ,圆的位置随机摆放且不重叠

根据已知条件可得出,标签中频次最高的对应圆的宽度(直径)为160px、字号为30px,频次最低的圆的宽度(直径)为40px、字号为12px,那么最终问题的关键就是如何计算出其他标签频次对应的圆的大小

假设标签频次中的最大值为max,最小值为min。可画出如下图:
在这里插入图片描述
那么想要计算出current对应的宽度和字号,需要先计算出橙色这段线占整段线的比例,再根据比例计算这段线代表的宽度大小和字号大小。计算过程如下:
1、求比例:percent = (current-min) / (max-min)
2、根据比例求该段线对应的宽度大小,percent * (160-40)
3、同理求对应的字体大小,percent * (30-12)
4、那么current对应的字体和宽度为12 + percent * (30-12)30 + percent * (160-40)

根据上述计算过程可以写出如下函数:

const getSize = (cur: number, min: number, max: number, minFontSize: number, maxFontSize: number, minWidth: number, maxWidth: number) => {const countRange = max - minconst curRange = cur - minconst fontSizeRange = maxFontSize - minFontSize const widthRange = maxWidth - minWidth// 考虑min,max相同的情况return {fontSize: countRange > 0 ? minFontSize + curRange / countRange * fontSizeRange : maxFontSize,width: countRange > 0 ? minWidth + curRange / countRange * widthRange : maxWidth}
}

接下来思考:如何将圆随机摆放在矩形中,且保证圆不重叠,已知矩形的rectangleWidth和rectangleHeight,圆的直径width。
1、采用相对/绝对定位来放置圆,只需计算圆在矩形中的left, top值。
2、圆的位置随机,但是圆要保证在矩形区域内,那么left值的取值范围可以为[0, rectangleWidth],同时考虑圆的大小,区间最终为[0, rectangleWidth - width]
3、top值的取值范围可以为[0, rectangleHeight],同时考虑圆的大小,区间最终为[0, rectangleHeight - height]

// width, fontSize 可根据上述的getSize计算得出
interface Label {count: number; label: string;width: number;fontSize: number;left: number;top: number;
}
const labelData: Array<Label> = []
// 设置圆的left和top值
const setPosition = () => {labelData.forEach((v) => {v.left = Math.random() * (rectangleWidth - v.width)v.top = Math.random() * (rectangleHeight - v.width)})
}

考虑圆不重叠的情况优化上述代码,圆重叠即圆出现相交的情况,如何判断圆是否相交,根据数学公式: ( x 1 − x 2 ) 2 + ( y 1 − y 2 ) 2 < r 1 + r 2 \sqrt{(x1-x2)^ 2 + (y1-y2)^2} \quad < r1 + r2 (x1x2)2+(y1y2)2 <r1+r2该公式成立则两圆相交,其中(x1,y1)为圆1的中心坐标,(x2,y2)为圆2的中心坐标,r1、r2分别为两个圆的半径。那么我们需要记录每次画的圆的中心坐标和半径,绘制圆之前先找出之前绘画的圆有没有与之相交的,如果有,则重新获取left、top的值

const circles: Array<{x: number, y: number, radius: number}> = []
const setPosition = () => {labelData.forEach((v) => {const radius = v.width / 2let left: number, top: number, x: number, y: number;// do while 判断之前会先do一次,如果找到相交圆,则继续执行dodo {left = Math.random() * (rectangleWidth - v.width)top = Math.random() * (rectangleHeight - v.width)x = left + radiusy = top + radius} while (circles.some(circle => Math.sqrt(Math.pow(circle.x - x, 2) + Math.pow(circle.y - y, 2)) < radius + circle.radius))v.left = leftv.top = topcircles.push({x, y, radius})})
}

这里其实还需要考虑到适配的问题,如果矩形区域被缩放,那么文字和圆的大小也应该进行缩放,我这里采用的是scale的方式,计算当前屏幕相对于1920(我们开发的参考尺寸是1920*1080)的比例,然后将对应的maxFontSize * scale ,maxWidth * scale,最小的尺寸就不需要再考虑啦,已经很小啦,当然如果最大尺寸被缩放到比最小的都小的时候就直接取最小尺寸吧!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯(3.7)

P1102 A-B 数对 import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int c sc.nextInt();int[] res new int[n1];for(int i1;i<n;i)res[i] sc.nextInt();int sum 0;for(i…

golang服务控制之go-svc

文章目录 程序安全退出执行代码的基本:信号拦截执行代码的改进:信号拦截包装器实践捕获键盘输入示例代码go-svc介绍程序及服务的控制是指在计算机系统中对程序和服务进行管理、监控和调控的过程。这个过程可以涉及到多个方面,包括资源管理、运行状态监测、安全性控制等。本质…

ROS2学习(二):仿真案例汇总(基于Ubuntu_2004 ROS2_noetic)

文章目录 一、slam仿真1、安装环境依赖2、创建Turtlebot3目录并下载安装3、配置Turtlebot3环境4、运行slam仿真 一、slam仿真 1、安装环境依赖 sudo apt install ros-noetic-cartographer ros-noetic-cartographer-ros2、创建Turtlebot3目录并下载安装 mkdir -p catkin_turt…

Chrome浏览器好用的几个扩展程序

Chrome好用的扩展程序 背景目的介绍JsonHandle例子未完待续。。。。。。 背景 偶然在往上看到Chrome有很多好用的扩展程序&#xff0c;比较好用&#xff0c;因此记录下比较实用的扩展程序。 目的 记录Chrome浏览器好用的插件。 介绍 JsonHandle下载以及无法扩展插件的解决…

YOLOv5目标检测学习(2):运行一个yolo应用所需要配置的深度学习环境

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、CUDA、CUDNN的下载安装1.1 CUDA的安装1.2 cuDNN的配置 二、anaconda的安装1.卸载python2.安装anaconda 三、Pytorch、python虚拟环境安装1.创建虚拟环境2.安…

【算法训练营】:期末考试

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 如果需要答案代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢迎私信博主&#xff0c;大家可以相互讨论交流哟~~ 考题12-1 题目描述 输入格式 输出格式 输出到标准输出。 输出一行一个整数…

php 把数字转化为大写中文

1. 120002129.25 转化后壹億贰仟萬贰仟壹佰贰拾玖圆贰角伍分2. 12000.2145 转化后壹萬贰仟圆贰角壹分肆厘伍毫3. 1020001211 转化后壹拾億贰仟萬壹仟贰佰壹拾壹圆整大致思路这样的: 从小数点分割成两部分,整数部分和小数部分分别处理。 整数四个一组进行处理,用substr函数分…

蓝桥杯练习题-特殊日期

问题描述&#xff1a; 对于一个日期&#xff0c;我们可以计算出年份的各个数位上的数字之和&#xff0c;也可以分别计算月和日的各位数字之和。 请问1900年1月1日至9999年12月31日总共有多少天&#xff1f;年份的数位数字之和等于月的数位数字之和加日的数位之和 例如&#xff…

电销平台架构的演变与升级

简介 信也科技电销平台承载了公司400多坐席的日常外呼任务&#xff0c;随着公司业务规模不断增长&#xff0c;业务复杂度不断提升&#xff0c;营销模式需要多样化&#xff0c;营销流程需要更加灵活。为了更好地赋能业务、提高客户转化率&#xff0c;电销平台不断升级优化&#…

利用Spring整合Redis

文章目录 利用Spring整合Redis引入依赖配置Redis 访问RedisString类型数据Hash类型数据List类型数据Set类型数据SortedSort类型数据全局key简化多次访问同一个key情况代码 Redis中的事务核心方法execute()事务代码实例 参考文献 利用Spring整合Redis 引入依赖 spring-boot-st…

springboot快速构建项目

1.Spring的基本步骤 2.构建项目 第一次下包速度比较慢&#xff0c;可以考虑使用镜像 至此项目构建完成 3.启动并配置数据库 新建一个数据库&#xff0c;新建一个表 下面这里也可以【重构-重命名】为yml后缀&#xff08;代码可粘下面的&#xff0c;后面有写&#xff09; Yml后…

FreeRTOS_day2

作业&#xff1a;1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 2.总结DMA空闲中断接收数据的使用方法 打开DAM,允许接收外部设备数据&#xff0c;调用中断接收回调函数

Eclipse调试技巧 条件断点 监视

实验代码 import java.util.Scanner;public class Test {// 判断n是否为质数public static boolean isPrime(int n){if (n < 2)return false;for (int i 2; i < n; i){if (n % i 0)return false;}return true;}public static void main(String[] args){Scanner scanne…

前端每日一练:深入理解CSS浮动、问题及清除浮动解决方案

深入理解CSS浮动、问题及解决方案 在CSS布局中&#xff0c;浮动&#xff08;float&#xff09;是一种常见的布局属性&#xff0c;用于控制元素在其父元素中的位置&#xff0c;使其可以浮动到左侧或右侧。然而&#xff0c;浮动也会引起一些常见的问题&#xff0c;主要涉及到高度…

专治Java底子差,线程操作篇(1)

&#x1f497;推荐阅读文章&#x1f497; &#x1f338;JavaSE系列&#x1f338;&#x1f449;1️⃣《JavaSE系列教程》&#x1f33a;MySQL系列&#x1f33a;&#x1f449;2️⃣《MySQL系列教程》&#x1f340;JavaWeb系列&#x1f340;&#x1f449;3️⃣《JavaWeb系列教程》…

[网络安全] PKI

一、PKI 概述 名称; 公钥基础设施 (Public Key Facility) 作用: 通过加密技术和数字签名保证信息安全 组成: 公钥机密技术、数字证书、CA、RA 二、信息安全三要素 机密性&#xff1a;确保仅信息发收双方 能看懂信息 完整性&#xff1a; 确保信息发收完整&#xff0c;不被破坏 …

最新基于R语言lavaan结构方程模型(SEM)技术应用

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;是分析系统内变量间的相互关系的利器&#xff0c;可通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、…

前端每日一练:如何隐藏一个元素​?

css 中隐藏元素的方法有很多&#xff0c;但他们也各有差异&#xff0c;不同场景选择合适的方式能事倍功半&#xff01; 方式​ 占位​ 点击事件​ display: none​ ❌​ ❌​ opacity: 0​ ✅​ ✅​ visibility: hidden​ ✅​ ❌​ clip-path: circle(0)​ ✅​…

支小蜜校园防欺凌系统如何有效应对学生霸凌?

学生霸凌不仅直接伤害到被霸凌者的身心健康&#xff0c;也对整个校园的和谐氛围构成了威胁。为了应对这一问题&#xff0c;校园防欺凌系统应运而生&#xff0c;成为维护校园安全、保护学生权益的重要工具。那么当校园防欺凌系统面对学生霸凌时&#xff0c;该如何有效应对呢&…

STM32CubeMX学习笔记8 -ADC

1. ADC简介 ADC 是Analog-to-Digital Converter的缩写。指模/数转换器或者模拟/数字转换器。是指将连续变量的模拟信号转换为离散的数字信号的器件。典型的模拟数字转换器将模拟信号转换为表示一定比例电压值的数字信号。简单地说就是将模拟电压值&#xff0c;转换成对应的肉眼…