html5绘制圆角矩形,js绘制圆角矩形

绘制出来啦，代码如下

矩形

.juxing{

/* 加上css会很奇怪-。-*/

/* transition:all 0.1s ease-in; */

}

点击

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) {

// 填充div

let 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)

}

}