js圆角矩形旋转（div拼凑）
2024-05-09 14:16:02
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>矩形</title><link rel="stylesheet" href=""><style>.juxing{/* 加上css会很奇怪-。-*//* transition:all 0.1s ease-in; */}</style>
</head><body><button type="button" οnclick="start()">点击</button><script>const len = 50;let array = [];let time = null;function start() {clearInterval(time);time = setInterval(() => {huanwei();}, 100);}function huanwei() {array.unshift(array.pop());var els = document.querySelectorAll('.juxing');for (let i = 0; i < len; i++) {let el = document.getElementById('ip' + (i + 1));if (array[i] && array[i].point) {let point = array[i].point;el.style.left = point.x + 'px';el.style.top = point.y + 'px';}}}function createNode(name, p) {// 填充divlet x = p.x;let y = p.y;var createDiv = document.createElement("div");// 动态createDiv.id = name;createDiv.style.left = p.x + 'px';createDiv.style.top = p.y + 'px';createDiv.innerHTML = name;// 固定if (name !== 'yuan') {// 存储非圆心的所有坐标点createDiv.className = "juxing"let obj = {id: name,point: { x: p.x, y: p.y }}array.push(obj);}createDiv.style.position = "absolute";createDiv.style.width = "30px";createDiv.style.height = "30px";createDiv.style.borderRadius = "30px";// border-radius: 30px;createDiv.style.background = "pink";createDiv.style.border = "1pxsolidred";document.body.appendChild(createDiv);}initNode({len: len,rectW: 400,rectH: 300,p: {x: 400,y: 200}});function initNode(params) {//初始化圆角矩形// 数量let len = params.len || 100;// 设置圆角矩形内矩形宽高 ,let rectW = params.rectW || 700;let rectH = params.rectH || 900;// 中心let cx = params.p.x || 0;let cy = params.p.y || 0;/** 思路：圆角矩形可以看作一个矩形和左右两个半圆组成，半径为矩形的一半；* 圆周长+矩形两边的长度 / 总数量 计算出各边应该存放的小车数量，以此数量为基准判断该绘制哪一块；** o = (180 / arcLenSplit) * Math.PI / 180* l=nπr/180 弧长公式* l = n（圆心角）× π（圆周率）× r（半径）/180=α(圆心角弧度数)× r（半径）* 这里的象限为4321，为(1,1),(1,-1),(-1,-1),(-1,1)* */// 圆半径let radius = rectH / 2;// 两边弧长相等为let arcLength = Math.PI * radius;// 圆弧*2 + 矩形顶边底边长度除以总数量let split = ((arcLength * 2) + (rectW * 2)) / len;// 矩形边长可以存放数量，均分let sideLenCount = Math.round(rectW / split);//弧长可以存放小车数量 let arcLenSplit = Math.round(arcLength / split);// let lineSplit = rectW / sideLenCount//每一个BOX对应的角度;// var avd = 180 / arcLenSplit;//每一个BOX对应的弧度;// let o = avd * Math.PI / 180;// 再次尝试，改掉以角度划分为以数量来划分，var count = 0;var count2 = 0;// 画圆心,主要绘制的时候观察使用，后期删除createNode('yuan', { x: cx, y: cy });// 左下角let p1 = { x: -rectW / 2, y: rectH / 2, i: 0 };let p2 = { x: rectW / 2, y: -rectH / 2, i: 0 }//思路：计算矩形周长，处以数量值；先从左下角开始，每次叠加x，如果超过矩形下方长度，则切换至圆形弧度绘制，还是只能以是否在矩形上来判断该绘制矩形横轴或者圆形for (var j = 1; j <= len; j++) {if (j <= sideLenCount) {//绘制矩形底边 外面为计算总共拆分，里面重新计算分到的 边长/数量let x = p1.x + getSplit(lineSplit, p1.i)let y = p1.y;p1.i++;createNode('ip' + j, { x: x + cx, y: y + cy });} else if (j > sideLenCount && j <= (sideLenCount + arcLenSplit)) {// 绘制右侧圆弧let ang = 180 / arcLenSplit;let hd = getSplit(ang, count) * Math.PI / 180;count++;let yuanx = radius * Math.sin(hd) + cx + (rectW / 2);let yuany = radius * Math.cos(hd) + cy;createNode('ip' + j, { x: yuanx, y: yuany });} else if (j > (sideLenCount + arcLenSplit) && j <= (sideLenCount + sideLenCount + arcLenSplit)) {// 矩形顶部let x = p2.x - getSplit(lineSplit, p2.i)y = p2.y;p2.i++;createNode('ip' + j, { x: x + cx, y: y + cy });} else {//剩余let remaining = len - (sideLenCount * 2) - arcLenSplit;let ang = getSplit(180 / remaining, count2) * Math.PI / 180;// 貌似是加上180度弧度的意思？let hd = ang + (Math.PI / 180 * 180);count2++;let yuanx = radius * Math.sin(hd) + cx - (rectW / 2);let yuany = radius * Math.cos(hd) + cy;createNode('ip' + j, { x: yuanx, y: yuany });}}function getSplit(split, count) {// 2,6,10,14方式均分排列return (split / 2) + (count * split)}}</script>
</body></html>
最后效果
转载于:https://www.cnblogs.com/jldiary/p/10880325.html
js圆角矩形旋转（div拼凑）相关推荐
- 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形
现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法. 在一个div内,包含8个div,控制这个8个div的height.margin以及border属性值,以达到 ...
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录 一.盒子模型圆角边框 二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例 一.盒子模型圆角边框 在 CS ...
- html5绘制圆角矩形,js绘制圆角矩形
绘制出来啦,代码如下 矩形 .juxing{ /* 加上css会很奇怪-.-*/ /* transition:all 0.1s ease-in; */ } 点击 const len = 50; let ...
- div盒子边框圆角_div+css用边框实现圆角矩形(多样式)
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: 复制代码代码如下: .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;ov ...
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
啥也不说,先上示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 如何使用Three.js构造圆角矩形立方体
一.构造圆角矩形 方法一:使用canvas自带绘制曲线方法 canvas中曲线的绘制可以通过三种自带的方法: 圆弧:arc 二次贝塞尔曲线:quadraticCurveTo(x2, y2, x3, y ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- CSS3绘制圆角矩形的简单示例
为什么80%的码农都做不了架构师?>>> 随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 b ...
- 画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形 参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小 源代码: fun ...
- 可自由扩展的圆角矩形制作方法
转自:http://golen.blog.sohu.com/96114249.html 制作一个好的web标准站点,扩展性要多考虑,扩展性做的好的网站,会给后期的维护和升级会带来很大的方便. 现在总结 ...
最新文章
- dbeaver导出表结构和数据_Oracle 导入导出表空间跟数据表通用操作笔记
- Mocha and Hiking 模拟
- 解决tensorflow在训练的时候权重是nan问题
- TMS320 C6000系列 DSP之 CCS5.5 仿真调试
- 用Artifactory管理内部Maven仓库
- Crontab定时任务访问url实例
- MyBatis中SQL语句相关内容
- 文件内容替换 ：SED 命令 和 Perl
- 190906描述笔记
- SpringBoot 核心源码解读
- DUET DISPLAY分屏软件IOS账号共享
- 技嘉主板的 BIOS 问题解决
- 电脑散热风扇轴承分类
- Java练习题——运算符
- 中国第一代程序员简介与现状
- pip install deepforest 失败
- 进阶学习9：ECMAScript——概述、ES2015 / ES6新特性详解
- Flash常用源代码大全
- GIMP类似于PhotoShop的开源免费软件
- response.setheader无效的原因之一