在矩形内随机渲染点
js
以四边形重心为中心在周围随机渲染点
以四边形重心为中心在周围随机渲染指定数量的点,并且指定横向/纵向偏移范围,指定点与点之间的间距确保不重合
html
以不规则四边形为边界随机渲染点
js
/**
* 生成四边形内部均匀分布的点
* @param {Object[]} points - 四边形的顶点坐标数组 [{x: number, y: number}, ...]
* @param {number} number - 需要渲染的点的数量
* @returns {Object[]} 返回生成的点数组 [{x: number, y: number}, ...]
*/
function generatePointsInQuadrilateral(points, number) {
if (points.length !== 4) {
throw new Error("points 必须包含四个顶点");
}
// 将四边形分成两个三角形
const [A, B, C, D] = points;
// 将点分成两部分分别分布到两个三角形中
const numPointsInTriangle1 = Math.floor(number / 2);
const numPointsInTriangle2 = number - numPointsInTriangle1;
const triangle1 = [A, B, C];
const triangle2 = [A, C, D];
// 生成三角形内部的点
function generatePointsInTriangle(triangle, numPoints) {
const [P1, P2, P3] = triangle;
const result = [];
for (let i = 0; i < numPoints; i++) {
let r1 = Math.random();
let r2 = Math.random();
// 确保 r1 和 r2 的和小于等于 1,以保证点在三角形内
if (r1 + r2 > 1) {
r1 = 1 - r1;
r2 = 1 - r2;
}
const x = P1.x + r1 * (P2.x - P1.x) + r2 * (P3.x - P1.x);
const y = P1.y + r1 * (P2.y - P1.y) + r2 * (P3.y - P1.y);
result.push({ x, y });
}
return result;
}
// 合并两个三角形的点
const pointsInTriangle1 = generatePointsInTriangle(triangle1, numPointsInTriangle1);
const pointsInTriangle2 = generatePointsInTriangle(triangle2, numPointsInTriangle2);
return [...pointsInTriangle1, ...pointsInTriangle2];
}
// 示例使用
const quadrilateral = [
{ x: 0, y: 0 },
{ x: 10, y: 0 },
{ x: 8, y: 6 },
{ x: 2, y: 5 }
];
const numberOfPoints = 20;
const generatedPoints = generatePointsInQuadrilateral(quadrilateral, numberOfPoints);
console.log(generatedPoints);/**
* 生成四边形内部均匀分布的点
* @param {Object[]} points - 四边形的顶点坐标数组 [{x: number, y: number}, ...]
* @param {number} number - 需要渲染的点的数量
* @returns {Object[]} 返回生成的点数组 [{x: number, y: number}, ...]
*/
function generatePointsInQuadrilateral(points, number) {
if (points.length !== 4) {
throw new Error("points 必须包含四个顶点");
}
// 将四边形分成两个三角形
const [A, B, C, D] = points;
// 将点分成两部分分别分布到两个三角形中
const numPointsInTriangle1 = Math.floor(number / 2);
const numPointsInTriangle2 = number - numPointsInTriangle1;
const triangle1 = [A, B, C];
const triangle2 = [A, C, D];
// 生成三角形内部的点
function generatePointsInTriangle(triangle, numPoints) {
const [P1, P2, P3] = triangle;
const result = [];
for (let i = 0; i < numPoints; i++) {
let r1 = Math.random();
let r2 = Math.random();
// 确保 r1 和 r2 的和小于等于 1,以保证点在三角形内
if (r1 + r2 > 1) {
r1 = 1 - r1;
r2 = 1 - r2;
}
const x = P1.x + r1 * (P2.x - P1.x) + r2 * (P3.x - P1.x);
const y = P1.y + r1 * (P2.y - P1.y) + r2 * (P3.y - P1.y);
result.push({ x, y });
}
return result;
}
// 合并两个三角形的点
const pointsInTriangle1 = generatePointsInTriangle(triangle1, numPointsInTriangle1);
const pointsInTriangle2 = generatePointsInTriangle(triangle2, numPointsInTriangle2);
return [...pointsInTriangle1, ...pointsInTriangle2];
}
// 示例使用
const quadrilateral = [
{ x: 0, y: 0 },
{ x: 10, y: 0 },
{ x: 8, y: 6 },
{ x: 2, y: 5 }
];
const numberOfPoints = 20;
const generatedPoints = generatePointsInQuadrilateral(quadrilateral, numberOfPoints);
console.log(generatedPoints);根据点构成的二维数组上下左右链接顶点生成网格
js
liang14658fox