查找在HTML 5画布上绘制的不规则形状的最大高度 - 宽度
Jig*_*hah 14 javascript image-processing html5-canvas
我最近一直在做一些图像处理,我正在寻找一个javascript解决方案来确定完全在非常规形状内的最长线段.总而言之,线段应该是接触形状的最长线段,而不是重叠或移动到形状之外.
以下是我遵循的步骤
步骤1:
第2步:
第3步:
如步骤3所示,蓝线表示最大长度.它完美地确定了常规形状的长度,但是在形状不规则的情况下,它不起作用(也是在3点的情况下).
为了首先计算长度我已经取得了点(这是画布向下事件的鼠标坐标).
以下是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(我现在得到的)
预期产出
任何帮助,将不胜感激.
提前致谢!
当您从凸多边形切换到凹多边形时，问题的复杂性会发生变化：您需要检查交点并“增长”候选线段。
对于凸多边形，您有一个候选集，由所有线段 (p 1 , p 2 ), (p 1 , p 3 ), ..., (p 2 , p 3 ), ..., (p n -1 , p n )，其中这些候选者中最长的一个是结果：
此示例共有 10 个候选者。您只需选择最长的一个即可。
当包含凹多边形时，必须修改候选线段以拉伸到多边形的边缘并排除与多边形相交的任何线段。
红色部分被排除。绿色部分是修改后的部分。还有更复杂的情况没有描述。
注意：过去我已经对这个数学进行了相当多的研究，并将链接到我构建的旧 JavaScript 库的函数。点表示为点数组
{ x: number, y: number}，多边形表示为点数组。
可以出于以下两个原因排除段：
任一端点都从离开多边形的线段开始。您可以通过获取候选线段的全局角度（从所述端点）和两个相邻多边形边的全局角度并检查候选线段的角度是否落在这两个之间来测试这一点。
段的扩展有些复杂：
查找任一端点是多边形凹顶点的所有线段。如果两个端点都是凹的，则包含两次。
对于所述（线段，端点）对，通过极坐标投影将线段穿过端点拉伸很长的距离（例如 10000000）。
结果是剩余的最长候选片段。
提示：我可以推荐使用GeoGebra进行图表绘制吗（我没有任何附属关系）？