Диагональный центр 4-точечного полинома

Question

Я пытаюсь найти (диагональ) центр полинома из 4 точек:

Я думал, что это так просто:

Но, похоже, это не так ... Так как же вычислить / найти центр х / у этого?

Answer 1

Исходя из комментариев, используя формулу этой страницы Википедии :

... вы можете вычислитьточка пересечения диагоналей, предполагая, что многоугольник выпуклый (т.е. диагонали всегда пересекаются).

Обратите внимание, что индексы точек отличаются от индексов вашего многоугольника:диагонали находятся между точками 1 – 3 и 2 – 4 соответственно, тогда как ваши точки многоугольника упорядочены 1 - 2 - 3 - 4.

Рабочий фрагмент:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function line (ax,ay,bx,by) {
	ctx.beginPath();
	ctx.moveTo(ax,ay);
	ctx.lineTo(bx,by);
	ctx.stroke();
}

var x1 = 100 ;
var y1 = 100 ;
var x2 = 110 ;
var y2 = 320 ;
var x3 = 400 ;
var y3 = 200 ;
var x4 = 300 ;
var y4 = 100 ;

// Lines
line(x1,y1,x2,y2) ;
line(x2,y2,x3,y3) ;
line(x3,y3,x4,y4) ;
line(x1,y1,x4,y4) ;

// Diagonals
line(x1,y1,x3,y3) ;
line(x4,y4,x2,y2) ;

var div = (x1-x3)*(y2-y4)-(y1-y3)*(x2-x4) ;
var divx = (x1*y3-y1*x3)*(x2-x4) - (x1-x3)*(x2*y4-y2*x4) ;
var divy = (x1*y3-y1*x3)*(y2-y4) - (y1-y3)*(x2*y4-y2*x4) ;

var x = divx/div ;
var y = divy/div ;

$("#x").val(x) ;
$("#y").val(y) ;

// Center
line(x,y-10,x,y+10) ;
line(x-10,y,x+10,y) ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="x" disabled /> 
<input id="y" disabled />
<canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;"></canvas>

Answer 2

Если вы говорите о гравитационном центре , то это будет выглядеть следующим образом:

G = (A + B + C + D) / 4

means:
xG = (xA + xB + xC + xD) / 4
yG = (yA + yB + yC + yD) / 4

Здесь вы можете увидеть: Геометрический центроид