最近做编辑器遇到的一个需求：提供矩形左上角坐标，矩形高宽和锚点数量，生成一个从左上角开始顺时针均匀分布的有序点队列。觉得挺有趣的，就记录下来吧。
核心算法：
function createUniformRect (x, y, w, h, size) {
// size 必须为 4 的倍数
if (size < 4) size = 4;
if (size % 4 != 0) size = Math.floor( size / 4 ) * 4;
let sideSize = size / 4; // 确定每边几个点。
const step_x = w / sideSize; // 暂时不考虑小数保留位数。
const step_y = h / sideSize;
let pts = [];
pts[0] = [x, y];
let dx = step_x;
let dy = 0;
for (let i = 1; i < size; i++) {
const times = i / sideSize;
if (times == 1) {
// 切换位置。
// 边缘4个点。
pts[i] = [x + w, y];
dx = 0;
dy = step_y;
} else if (times == 2) {
pts[i] = [x + w, y + h];
dx = -step_x;
dy = 0;
} else if (times == 3) {
pts[i] = [x, y + h];
dx = 0;
dy = -step_y;
}
else {
pts[i] = [
pts[i - 1][0] + dx,
pts[i - 1][1] + dy,
]
}
}
return pts;
}
算法简单介绍：算法其实就是从左上角往右走，走到矩形的右上角就往下走，依次走完4条边即可。因为计算出的 step_x 和 step_y 可能是小数，会有误差，所以转折点的坐标不能通过 step 计算出来，要通过 x, y, width, height 来计算。
测试代码：
需要引入 svgjs 库，且需要在 html 下创建一个 id 为 drawing 的 div 元素。
let draw = SVG('drawing').size(600, 600).style('background-color', '#888');
let r = createUniformRect(168, 192, 350, 330, 16);
console.log(r);
r.forEach((item, index) => {
setTimeout(() => {
draw.circle(6).center(item[0], item[1])
}, index * 300);
})
r = createPathByPts(r);
console.log(r);
draw.path(r).fill('none').stroke({
color: 'red'
})
// 生成均匀分布节点的矩形 path
// 顺序为左上角顺时针。
function createUniformRect (x, y, w, h, size) {
// size 必须为 4 的倍数
if (size < 4) size = 4;
if (size % 4 != 0) size = Math.floor( size / 4 ) * 4;
let sideSize = size / 4; // 确定每边几个点（-1）。
const step_x = w / sideSize; // 暂时不考虑小数保留位数。
const step_y = h / sideSize;
let pts = [];
pts[0] = [x, y];
let dx = step_x;
let dy = 0;
for (let i = 1; i < size; i++) {
const times = i / sideSize;
if (times == 1) {
// 切换位置。
// 边缘4个点。
pts[i] = [x + w, y];
dx = 0;
dy = step_y;
} else if (times == 2) {
pts[i] = [x + w, y + h];
dx = -step_x;
dy = 0;
} else if (times == 3) {
pts[i] = [x, y + h];
dx = 0;
dy = -step_y;
}
else {
pts[i] = [
pts[i - 1][0] + dx,
pts[i - 1][1] + dy,
]
}
}
return pts;
}
function createPathByPts(pts) {
let d = [];
d[0] = ['M', pts[0][0], pts[0][1]];
for (let i = 1, len =pts.length; i < len; i++) {
d[i] = ['L', pts[i][0], pts[i][1]];
}
d.push(['Z']);
return d;
}
加强版
开发人员都知道，需求变化是一件很常见的事情。所以我们要在前面功能的基础上，给每个锚点添加两个控制点，并要再追加一个结尾点，它要和起点位置相同，此外我还提供了一个参数，对控制点的位置进行控制。
function createUniformRect (x, y, w, h, size, scale = 0.33) {
// size 必须为 4 的倍数
if (size < 4) size = 4;
if (size % 4 != 0) size = Math.floor( size / 4 ) * 4;
let sideSize = size / 4; // 确定每边几个点（-1）。
const step_x = w / sideSize; // 暂时不考虑小数保留位数。
const step_y = h / sideSize;
let cpts = [] // 控制点
let pts = [];
let dx = 0;
let dy = 0;
// 要求最后一个点和第一个点一个位置。
for (let i = 0; i <= size; i++) {
const times = i / sideSize;
if (times == 0 || times == 4) {
pts[i] = [x, y];
cpts[i] = calCpts(i);
dx = step_x;
dy = 0;
}else if (times == 1) {
// 切换位置。
// 边缘4个点。
pts[i] = [x + w, y];
cpts[i] = calCpts(i);
dx = 0;
dy = step_y;
} else if (times == 2) {
pts[i] = [x + w, y + h];
cpts[i] = calCpts(i);
dx = -step_x;
dy = 0;
} else if (times == 3) {
pts[i] = [x, y + h];
cpts[i] = calCpts(i);
dx = 0;
dy = -step_y;
}
else {
pts[i] = [
pts[i - 1][0] + dx,
pts[i - 1][1] + dy,
]
// cts[i] = []
cpts[i] = calCpts(i);
}
function calCpts(i) {
return [
[pts[i][0] - dx * (1 - scale), pts[i][1] - dy * (1 - scale)],
[pts[i][0] - dx * scale, pts[i][1] - dy * scale],
];
}
}
return {
pts,
cpts,
};
}
算法简单介绍：加上了一个 calCpts 方法，在 pt[i] 坐标求出后，计算出对应的两个控制点。scale 指的是控制点到锚点的距离和步长的比例。
因为多了一个 cpts 数组，最后这个函数修改为返回一个对象。
点击这里可以看到demo哦： demo链接
