javascript - 如何使用给定的 Angular 绘制不规则形状的多边形

Question

我正在制作绘图应用程序。我创建了一个类 Polygon。它的 constructor 将接收三个参数，这些将是它的属性:

• points(Number):多边形的点数。
• rotation(Number):整个多边形的旋转 Angular 。
• angles(Array Of number):多边形的两条线之间的 Angular 。

我已经尝试了一整天了，但我找不到正确的解决方案。

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
let isMouseDown = false;
let tool = 'polygon';

let savedImageData;



canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

const mouse = {x:null,y:null}

let mousedown = {x:null,y:null}

const toDegree = val => val * 180 / Math.PI

class Polygon {
    constructor(points, rotation, angles){
        this.points = points;
        this.rotation = rotation;
    
        
        //if angles are given then convert them to radian
        if(angles){
            this.angles = angles.map(x => x * Math.PI/ 180);
        }
        //if angles array is not given
        else{
          /*get the angle for a regular polygon for given points.
          3-points => 60
          4-points => 90
          5-points => 108
          */
          let angle = (this.points - 2) * Math.PI/ this.points;
          //fill the angles array with the same angle
          this.angles = Array(points).fill(angle)
        }
        let sum = 0;
        this.angles = this.angles.map(x => {
          sum += x;
          return sum;
        })
        
        
    }
    draw(startx, starty, endx, endy){
        c.beginPath();
        let rx = (endx - startx) / 2;
        let ry = (endy - starty) / 2;
        let r = Math.max(rx, ry)
        c.font = '35px cursive'
        let cx = startx + r;
        let cy = starty + r;
        c.fillRect(cx - 2, cy - 2, 4, 4); //marking the center
        c.moveTo(cx + r, cy);

        c.strokeText(0, cx + r, cy);
        for(let i = 1; i < this.points; i++){
            //console.log(this.angles[i])
            let dx = cx +  r * Math.cos(this.angles[i] + this.rotation);
            let dy = cy + r * Math.sin(this.angles[i] + this.rotation);
            c.strokeStyle = 'red';
            c.strokeText(i, dx, dy, 100);
            c.strokeStyle ='black';
            c.lineTo(dx, dy);
        }
        c.closePath();
        c.stroke();
        
    }

}

//update();
c.beginPath();
c.lineWidth = 1;
document.addEventListener('mousemove', function(e){
    //Getting the mouse coords according to canvas
    const canvasData = canvas.getBoundingClientRect();
    mouse.x = (e.x - canvasData.left) * (canvas.width / canvasData.width);
    mouse.y = (e.y - canvasData.top) * (canvas.height / canvasData.height);
    
    if(tool === 'polygon' && isMouseDown){
        drawImageData();
        let pol = new Polygon(5, 0);
        pol.draw(mousedown.x, mousedown.y, mouse.x, mouse.y);
        
    }
})

function saveImageData(){
    savedImageData = c.getImageData(0, 0, canvas.width, canvas.height);
}
function drawImageData(){
    c.putImageData(savedImageData, 0, 0)
}

document.addEventListener('mousedown', () => {
    isMouseDown = true;
    mousedown = {...mouse};
    if(tool === 'polygon'){
        saveImageData();
    }
    
});
document.addEventListener('mouseup', () => isMouseDown = false);

<canvas></canvas>

在上面的代码中，我试图制作一个五边形，但它不起作用。

Answer 1

单位多边形

以下代码片段包含一个函数 polygonFromSidesOrAngles返回定义输入参数定义的单位多边形的点集。 sides , 或 angles

两个参数都是可选的，但必须有一个参数

• 只要sides给定然后计算 Angular 以使所有边长相等的完整多边形
• 只要angles给定则假定边数为 Angular 数。 Angular 为 0-360 度
• 如果参数无法定义多边形，则会抛出多个异常。

返回的是定义多边形点的单位圆上的一组点。第一点在坐标 {x : 1, y: 0} 处从原点开始。

返回的点没有旋转，因为它被假定为渲染函数的函数。

多边形上的所有点距原点(0,0)1个单位距离

点的形式是包含x 的对象和 y由函数 point 定义的属性和 polarPoint

使用的方法

我没有查找算法，而是根据假设从 (1,0) 到单位圆上以所需 Angular 一条线将在与 (1,0) 的正确距离处截取圆。截取点用于计算与原点的弧度 Angular 。然后使用该 Angular 来计算该 Angular 所代表的总 Angular 比率。

执行此操作的函数是 calcRatioOfAngle(angle, sides)返回 Angular 作为 Math.PI * 2 的比率 (0-1)

这是一种相当长手的方法，可能会显着减少

由于您的问题不清楚应该如何处理无效参数，如果函数无法继续，该函数将抛出范围错误。

多边形函数

Math.PI2 = Math.PI * 2;
Math.TAU = Math.PI2;
Math.deg2Rad = Math.PI / 180;
const point = (x, y) => ({x, y});
const polarPoint = (ang, dist) => ({x: Math.cos(ang) * dist, y: Math.sin(ang) * dist});

function polygonFromSidesOrAngles(sides, angles) {
    function calcRatioOfAngle(ang, sides) {
        const v1 = point(Math.cos(ang) - 1, Math.sin(ang));    
        const len2 = v1.x * v1.x + v1.y * v1.y;        
        const u = -v1.x / len2;                       
        const v2 = point(v1.x * u + 1, v1.y * u);  
        const d = (1 - (v2.y * v2.y +  v2.x * v2.x)) ** 0.5 / (len2 ** 0.5);     
        return Math.atan2(v2.y + v1.y * d, v2.x + 1 + v1.x * d) / (Math.PI * (sides - 2) / 2);   
    }    
    const vetAngles = angles => angles.reduce((sum, ang) => sum += ang, 0) === (angles.length - 2) * 180;
    var ratios = [];

    if(angles === undefined) {
        if (sides < 3) { throw new RangeError("Polygon must have more than 2 side") }
        const rat = 1 / sides;
        while (sides--) { ratios.push(rat) }
    } else {
        if (sides === undefined) { sides = angles.length }
        else if (sides !== angles.length) { throw new RangeError("Numbers of sides does not match number of angles") }
        if (sides < 3) { throw new RangeError("Polygon must have more than 2 side") }
        if (!vetAngles(angles)) { throw new RangeError("Set of angles can not create a "+sides+" sided polygon") }


        ratios = angles.map(ang => calcRatioOfAngle(ang * Math.deg2Rad, sides));
        ratios.unshift(ratios.pop()); // rotate right to get first angle at start
    }

    var ang = 0;
    const points = [];
    for (const rat of ratios) {
        ang += rat;
        points.push(polarPoint(ang * Math.TAU, 1));
    }
    return points;
}

渲染函数

渲染多边形的函数。它包括旋转，因此您无需为要渲染多边形的每个 Angular 创建一组单独的点。

半径是到中心点的距离x,y到任何多边形顶点。

function drawPolygon(ctx, poly, x, y, radius, rotate) {
    ctx.setTransform(radius, 0, 0, radius, x, y);
    ctx.rotate(rotate);
    ctx.beginPath();
    for(const p of poly.points) { ctx.lineTo(p.x, p.y) }
    ctx.closePath();
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.stroke();
}

例子

下面呈现一组测试多边形以确保代码按预期工作。多边形从顶部开始旋转，然后顺时针渲染。

该示例已删除对输入参数的审查。

const ctx = can.getContext("2d");
can.height = can.width = 512;

Math.PI2 = Math.PI * 2;
Math.TAU = Math.PI2;
Math.deg2Rad = Math.PI / 180;
const point = (x, y) => ({x, y});
const polarPoint = (ang, dist) => ({x: Math.cos(ang) * dist, y: Math.sin(ang) * dist});

function polygonFromAngles(sides, angles) {
    function calcRatioOfAngle(ang, sides) {
        const x = Math.cos(ang) - 1, y = Math.sin(ang);    
        const len2 = x * x + y * y;        
        const u = -x / len2;                       
        const x1 = x * u + 1, y1 = y * u;  
        const d = (1 - (y1 * y1 +  x1 * x1)) ** 0.5 / (len2 ** 0.5);     
        return Math.atan2(y1 + y * d, x1 + 1 + x * d) / (Math.PI * (sides - 2) / 2); 
    }    

    var ratios = [];
    if (angles === undefined) {
        const rat = 1 / sides;
        while (sides--) { ratios.push(rat) }
    } else {            
        ratios = angles.map(ang => calcRatioOfAngle(ang * Math.deg2Rad, angles.length));
        ratios.unshift(ratios.pop()); 
    }
    
    var ang = 0;
    const points = [];
    for(const rat of ratios) {
        ang += rat;
        points.push(polarPoint(ang * Math.TAU, 1));
    }
    return points;
}

function drawPolygon(poly, x, y, radius, rot) {
    const xdx = Math.cos(rot) * radius;
    const xdy = Math.sin(rot) * radius;
    ctx.setTransform(xdx, xdy, -xdy, xdx, x, y);
    ctx.beginPath();
    for (const p of poly) { ctx.lineTo(p.x, p.y) }
    ctx.closePath();
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.stroke();
}

const segs = 4;
const tests = [
    [3], [, [45, 90, 45]], [, [90, 10, 80]], [, [60, 50, 70]], [, [40, 90, 50]],
    [4], [, [90, 90, 90, 90]], [, [90, 60, 90, 120]],
    [5], [, [108, 108, 108, 108, 108]], [, [58, 100, 166, 100, 116]],
    [6], [, [120, 120, 120, 120, 120, 120]], [, [140, 100, 180, 100, 100, 100]],
    [7], [8],
];
var angOffset = -Math.PI / 2;  // rotation of poly
const w = ctx.canvas.width;
const h = ctx.canvas.height;
const wStep = w / segs;
const hStep = h / segs;
const radius = Math.min(w / segs, h / segs) / 2.2;
var x,y, idx = 0;
for (y = 0; y < segs && idx < tests.length; y ++) {
    for (x = 0; x < segs && idx < tests.length; x ++) {
        drawPolygon(polygonFromAngles(...tests[idx++]), (x + 0.5) * wStep , (y + 0.5) * hStep, radius, angOffset);
    }
}

canvas {
   border: 1px solid black;
}

<canvas id="can"></canvas>