Создайте многоугольник из формы, созданной независимыми линиями

У меня есть группа из 10 строк, которые были созданы для создания фигуры. Линии независимы (не соприкасаются). Я хотел бы построить многоугольник, найдя последовательные точки для построения многоугольника, чтобы он соответствовал форме. Есть идеи?Создайте многоугольник из формы, созданной независимыми линиями

Пример приведен ниже:

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>Create Polygon From Lines</title> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
</head> 
 
<body style='padding:10px;font-family:arial'> 
 
<center> 
 
<h4>Create Polygon From Lines</h4> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
A group of independent lines are connected to form a shape. Create a polygon that matches the shape. 
 
</div> 
 
<table><tr> 
 
<td> 
 
<div style="padding:10px;width:400px;text-align:justify"> 
 

 
<b>Scenerio:</b><br /> 
 
The shape is shown dashed: 
 
Lines have been randomly placed and are not contiguous.<br> 
 
We must arrange the points so a polygon can be drawn that matches the shape, i.e, the points must be sequential. 
 
</div> 
 
</td> 
 
<td> 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400" overflow="visible"> 
 
<g id=lineG fill="none" stroke=black stroke-width=1 stroke-dasharray="4 4" /> 
 
<polygon id=myPolygon stroke='blue' fill='none' stroke-width='3' /> 
 
</svg> 
 
</div> 
 
</td> 
 
</tr></table> 
 
<script> 
 
var Lines=[] //---[x1,y1,x2,y2]--- 
 
Lines[0]=[170, 148, 140, 200] 
 
Lines[1]=[140, 200, 170, 251] 
 
Lines[2]=[230, 251, 260, 200] 
 
Lines[3]=[170, 148, 200, 96] 
 
Lines[4]=[230, 251, 200, 303] 
 
Lines[5]=[200, 303, 170, 251] 
 
Lines[6]=[281, 118, 251, 66] 
 
Lines[7]=[251, 66, 200, 96] 
 
Lines[8]=[281, 118, 311, 170] 
 
Lines[9]=[311, 170, 260, 200] 
 

 
var NS="http://www.w3.org/2000/svg" 
 
//---onLoad--- 
 
function placeLines() 
 
{ 
 
    for(var k=0;k<Lines.length;k++) 
 
    { 
 
     var line=document.createElementNS(NS,"line") 
 
     line.setAttribute("x1",Lines[k][0]) 
 
     line.setAttribute("y1",Lines[k][1]) 
 
     line.setAttribute("x2",Lines[k][2]) 
 
     line.setAttribute("y2",Lines[k][3]) 
 
     lineG.appendChild(line) 
 
    } 
 
} 
 

 
document.addEventListener("onload",placeLines(),false) 
 

 
</script> 
 
</body> 
 
</html>

источник

2016-11-15 Francis Hemsher

Вы можете использовать polygon с атрибутом точек. В приведенном ниже примере я просто сделал квадрат, но вы можете изменить массив точек в соответствии с вашими потребностями.

Также обратите внимание, что я изменил его на использование array.map() - это проще, чем создание переменной с использованием этой переменной как индекс в массиве, а затем увеличивать его после каждой итерации. Для получения дополнительной информации прочитайте these exercises.

<center> 
 
<h4>Create Polygon From Lines</h4> 
 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
 
A group of independent lines are connected to form a shape. Create a polygon that matches the shape. 
 
</div> 
 
<table><tr> 
 
<td> 
 
<div style="padding:10px;width:200px;text-align:justify"> 
 

 
<b>Scenerio:</b><br /> 
 
The shape is shown dashed: 
 
Lines have been randomly placed and are not contiguous.<br> 
 
We must arrange the points so a polygon can be drawn that matches the shape, i.e, the points must be sequential. 
 
</div> 
 
</td> 
 
<td> 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
<svg id="mySVG" width="400" height="400" overflow="visible"> 
 
<g id="shapeG" fill="none" stroke=black stroke-width=1 stroke-dasharray="4 4" /> 
 
<polygon id=myPolygon stroke='blue' fill='none' stroke-width='3' /> 
 
</svg> 
 
</div> 
 
</td> 
 
</tr></table> 
 
<script> 
 
var points=[ //figure out the points for your polygon 
 
    [100, 100], // this is a simple square 
 
    [200, 100], 
 
    [200, 200], 
 
    [100, 200] 
 
]; 
 
var NS="http://www.w3.org/2000/svg" 
 
//---onLoad--- 
 
function placeLines() { 
 
    var polygon=document.createElementNS(NS,"polygon"); 
 

 
    var pointsAttribute = points.map(function(point) { 
 
     return point[0]+' '+point[1]; 
 
    }).join(', '); 
 
    polygon.setAttribute("points",pointsAttribute); 
 
    document.getElementById('shapeG').appendChild(polygon); 
 
} 
 

 
document.addEventListener("onload",placeLines(),false) 
 

 
</script>

Edit:

Вы спросили, как вычислить последовательные точки из списка строк. Я не уверен, что лучший способ сделать это, но одним из методов было бы создание linked-list точек (что также можно было бы считать графиком). Посмотрите на этот пример:

function Point(value) { 
 
    this.value = value; 
 
    this.next = null; 
 
} 
 
Point.prototype.SetNext = function(nextPoint) { 
 
    this.next = nextPoint; 
 
}; 
 

 
function PointList() { 
 
    this.items = []; 
 
} 
 
PointList.prototype.addOrGet = function(value) { 
 
    var foundPoint = this.items.find(function(item) { 
 
    return item.value == value; 
 
    }); 
 
    if (foundPoint) { 
 
    return foundPoint; 
 
    } 
 
    //create new point 
 
    var newPoint = new Point(value); 
 
    this.items.push(newPoint); 
 
    return newPoint; 
 
}; 
 
PointList.prototype.GetPointsInOrder = function() { 
 
    var current = this.items[0], 
 
    next, nextPoints = []; 
 
    for (var counter = 0; counter < this.items.length; counter++) { 
 
    next = current.next; 
 
    if (next) { 
 
     nextPoints.push(next.value); 
 
     current = next; 
 
    } 
 
    } 
 
    return nextPoints.join(', '); 
 
} 
 

 
var Lines = [] //---[x1,y1,x2,y2]--- 
 
Lines[0] = [170, 148, 140, 200] 
 
Lines[1] = [140, 200, 170, 251] 
 
Lines[2] = [230, 251, 260, 200] 
 
Lines[3] = [170, 148, 200, 96] 
 
Lines[4] = [230, 251, 200, 303] 
 
Lines[5] = [200, 303, 170, 251] 
 
Lines[6] = [281, 118, 251, 66] 
 
Lines[7] = [251, 66, 200, 96] 
 
Lines[8] = [281, 118, 311, 170] 
 
Lines[9] = [311, 170, 260, 200] 
 

 
var NS = "http://www.w3.org/2000/svg" 
 

 
function placeLines() { 
 
    var placedLines = []; 
 
    var polygon = document.createElementNS(NS, "polygon"); 
 
    var linePoints = [], 
 
    point1, point2, indexOfPoint1, indexOfPoint2; 
 
    var pointList = new PointList(), 
 
    point1, point2, point1str, point2str; 
 
    for (var k = 0; k < Lines.length; k++) { 
 
    point1str = Lines[k][0] + ' ' + Lines[k][1]; 
 
    point2str = Lines[k][2] + ' ' + Lines[k][3]; 
 
    point1 = pointList.addOrGet(point1str); 
 
    point2 = pointList.addOrGet(point2str); 
 
    if (!point1.next) { 
 
     point1.SetNext(point2); 
 
    } else if (!point2.next) { 
 
     point2.SetNext(point1); 
 
    } 
 
    } 
 
    polygon.setAttribute("points", pointList.GetPointsInOrder()); 
 
    document.getElementById('lineG').appendChild(polygon); 
 
} 
 
document.addEventListener("onload", placeLines(), false);

<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
 
    <svg id="mySVG" width="400" height="400" overflow="visible"> 
 
    <g id=lineG fill="none" stroke=black stroke-width=1 stroke-dasharray="4 4" /> 
 
    <polygon id=myPolygon stroke='blue' fill='none' stroke-width='3' /> 
 
    </svg> 
 
</div>

источник

2016-11-15 22:52:50

Я надеялся на средства вычисления необходимых последовательных точек из 10 линий, в настоящее время на месте. –

@FrancisHemsher см. Раздел ** Редактировать: **, прикрепленный к ответу –

Элегантный! Огромное спасибо. –

Создайте многоугольник из формы, созданной независимыми линиями

ответ

Смежные вопросы