javascript - 查找在 HTML 5 Canvas 上绘制的不规则形状的最大高度宽度

Question

我最近一直在进行一些图像处理，并且正在寻找一种 javascript 解决方案来确定完全位于不规则形状内的最长线段。综上所述，线段应该是接触形状且不重叠或移动到形状之外的最长线段。

这是我遵循的步骤

第一步:

第 2 步:

第 3 步:

如步骤3所示蓝线表示最大长度。它可以很好地确定规则形状的长度，但在不规则形状的情况下它不起作用(在 3 点的情况下也是如此)。

为了首先计算长度，我取了点(它们是 Canvas 向下事件上的鼠标坐标。

下面是 Canvas 的代码片段:

function getXY(e) {
    var el = document.getElementById('canvas');
    var rect = el.getBoundingClientRect();
    /* console.log("widht "+$("#canvas").width());
    console.log("heihgt "+$("#canvas").height());
    console.log("X "+Math.round(e.clientX - rect.left));
    console.log("y "+Math.round(e.clientY - rect.top));*/
    return {
        x: Math.round(e.clientX - rect.left),
        y: Math.round(e.clientY - rect.top)
    }
}


 $('#canvas').mousedown(function(e) {
        var can = document.getElementById("canvas");
        var ctx = can.getContext('2d');
        if (condition == 1) {
            if (e.which == 1) {
                //store the points on mousedown
                var poss = getXY(e);
                i = i + 1;
                if (firstX == poss.x && firstY == poss.y) {
                    console.log(" inside if  poss.x===" + poss.x + " poss.y===" + poss.y);
                    //$('#crop').click();
                } else {
                    console.log(" inside else  poss.x===" + poss.x + " poss.y===" + poss.y);
                    points.push(Math.round(poss.x), Math.round(poss.y));
                    pointsforline.push({ "x": Math.round(poss.x), "y": Math.round(poss.y) });
                    xarray.push(poss.x);
                    yarray.push(poss.y);
                    sendpoints.push(Math.round(poss.x), Math.round(poss.y));
                    if(points.length >= 6){
                        $('#fixMarkingBtn').show();
                    }
                }

                // Type 1 using array


                 if(points.length == 6  && sendpoints.length ==6 ){
                 $('#fixMarkingBtn').show();
                 }

                // Type 2 using counter

               /* if (i == 3) {
                    $('#fixMarkingBtn').show();
                }*/

                if (i == 1) {
                    $('#undoMarkingBtn').show();
                    $('#resetMarkingBtn').show();
                    firstX = poss.x;
                    firstY = poss.y;
                    //change is here
                    Xmax = poss.x;
                    Ymax = poss.y;
                    Xmin = poss.x;
                    Ymin = poss.y;
                    minX1 = poss.x;
                    maxY1 = poss.y;
                    minX1 = poss.x;
                    minY1 = poss.y;

                }
                if (poss.x < Xmin) {
                    Xmin = poss.x;
                    minY1 = poss.y;
                }
                if (poss.x > Xmax) {
                    Xmax = poss.x;
                    maxY1 = poss.y;
                }
                if (poss.y < Ymin) {
                    Ymin = poss.y;
                    minX1 = poss.x;
                }
                if (poss.y > Ymax) {
                    Ymax = poss.y;
                    maxX1 = poss.x;
                }
                ctx.globalCompositeOperation = 'source-over';
                var oldposx = $('#oldposx').html();
                var oldposy = $('#oldposy').html();
                var posx = $('#posx').html();
                var posy = $('#posy').html();
                ctx.beginPath();
                ctx.lineWidth = 13;
                ctx.moveTo(oldposx, oldposy);
                if (oldposx != '') {
                    ctx.lineTo(posx, posy);
                    ctx.stroke();
                }
                $('#oldposx').html(poss.x);
                $('#oldposy').html(poss.y);
            }
            ctx.fillStyle = 'red';
            ctx.strokeStyle = 'red';
            ctx.fillRect(posx, posy, 10, 10);
            $('#posx').html(posx);
            $('#posy').html(posy);
        } //condition

    });

这是我使用的代码(问题点):

function calMaxMin() {
    for (var i = 0; i < points.length; i += 2) {
        if (i == 0) {
            Xmax = points[i];
            Ymax = points[i + 1];
            Xmin = points[i];
            Ymin = points[i + 1];
            minX1 = points[i];
            maxY1 = points[i + 1];
            minX1 = points[i];
            minY1 = points[i + 1];
        }
        if (points[i] < Xmin) {
            Xmin = points[i];
            minY1 = points[i + 1];
        }
        if (points[i] > Xmax) {
            Xmax = points[i];
            maxY1 = points[i + 1];
        }
        if (points[i + 1] < Ymin) {
            Ymin = points[i + 1];
            minX1 = points[i];
        }
        if (points[i + 1] > Ymax) {
            Ymax = points[i + 1];
            maxX1 = points[i];
        }    
    }
}

问题图片 1

问题图片 2(我现在得到的)

预期输出

如有任何帮助，我们将不胜感激。

提前致谢!

Answer 1

当您从凸多边形切换到凹多边形时，问题的复杂性发生了变化:您需要检查交叉点并“增长”候选线段。

对于凸多边形，您有一个候选集，由所有段定义 (p₁, p₂), (p₁ , p₃), ..., (p₂, p₃), ..., (p_n-1 , p_n), 其中最长的候选者是结果:

这个例子总共有 10 个候选项。您只需选择最长的一个。

---

当您包含凹多边形时，您必须修改候选线段以拉伸(stretch)到多边形的边缘并排除与多边形相交的任何线段。

红色部分被排除在外。绿色段是修改后的段。还有更复杂的情况没有描述。

NOTE: I've had to play quite a bit with this math in the past and will be linking to functions of an old JavaScript library I built. Points are represented as { x: number, y: number} and polygons as arrays of points.

片段可以被排除有两个原因:

1. 任一端点都以离开多边形的线段开始。您可以通过获取 global angle of the candidate segment 来测试它(从所述端点)和两个相邻多边形边的全局 Angular 并检查 if the candidate segment's angle falls between those two .

2. The candidate segment intersects any of the edges (inclusive of edge endpoints).

段的扩展有些复杂:

1. 找出其中任一端点为多边形凹顶点的所有线段。如果两个端点都是凹的，则将其包含两次。

2. 对于所说的(线段，端点)对，通过 polar projection 将线段通过端点拉伸(stretch)很长的距离(如 10000000) .

   1. 检测所有intersection points带有多边形的细长段。

   2. 找到交点 nearest未修改的端点。这个交点和未修改的端点是新的候选段。

结果是最长的剩余候选片段。

HINT: Might I recommend using GeoGebra for diagramming (I am in no way affiliated)?