Цитата:
|
Честно говоря совсем запутался, что есть х что у, вобщем у себя менял местами, заработало. Но правда математика так и осталась загадкой.
|
Да, все правильно, это меня геометрия сбила с толку, все правильно х и там и там.
Осталось смещение убрать ;] |
Дзен-трансгуманист,
Спасибо Вам ;] Вот получилось вот такая красота:
var coords = [];
var perps = [];
var ctx = document.getElementById("myCanvas").getContext("2d");
function getCoords(e)
{
drawCircle(e.clientX, e.clientY, 3);
coords.push(e.clientX, e.clientY);
if (coords.length === 4) {
x1 = coords[0]; x2 = coords[2];
y1 = coords[1]; y2 = coords[3];
var dx = x2 - x1;
var dy = y2 - y1;
//var lineLen = Math.sqrt( dx * dx + dy * dy );
var perpHalfDX = -dy / 150 * 100;
var perpHalfDY = +dx / 150 * 100;
var perpX = (x1 + x2)/2;
var perpY = (y1 + y2)/2;
drawLine(perpX, perpY, perpX + perpHalfDX, perpY + perpHalfDY);
drawCircle(perpX, perpY, 3);
//drawLine(perpX, perpY, perpX+200, perpY+200);
drawLine(coords[0], coords[1], coords[2], coords[3]);
coords = [];
}
}
function drawLine(x_first, y_first, x_second, y_second)
{
ctx.beginPath();
ctx.moveTo( x_first, y_first );
ctx.lineTo( x_second, y_second );
ctx.lineWidth = 2;
ctx.stroke();
}
function drawCircle(x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, false);
ctx.closePath();
ctx.fill();
}
|
А можно самый страшный вопрос? Вот убрал смещение перпендикуляра, теперь все классно. Нарисовал линию и теперь от ее центра пошел длинный перпендикуляр.
Если нарисовать две линии, так, чтобы перпендикуляры пересеклись, как можно найти его угол? Логически. |
Вложений: 1
Цитата:
Вложение 1881 |
Цитата:
Кстати, а сами точки можно как то двигать? Т.е. я поставил линию, могу ли я как то одну из точек передвинуть, а не обнулять все. Как мне ее подхватить, понятно, что тут будет onmousemove событие, но как мне за существующую точку захватиться? |
| Часовой пояс GMT +3, время: 06:05. |