【算法】生成锚点均匀分布的矩形

最近做编辑器遇到的一个需求：提供矩形左上角坐标，矩形高宽和锚点数量，生成一个从左上角开始顺时针均匀分布的有序点队列。觉得挺有趣的，就记录下来吧。

核心算法：

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链接