Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Рисование линии на CANVAS (https://javascript.ru/forum/dom-window/40306-risovanie-linii-na-canvas.html)

essere 31.07.2013 16:31

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 265284)
тогда еще раз: почему perpLen не определен?

Да это вечер, давно он уже определен))

essere 31.07.2013 16:59

Честно говоря совсем запутался, что есть х что у, вобщем у себя менял местами, заработало. Но правда математика так и осталась загадкой.

essere 31.07.2013 17:02

Да, все правильно, это меня геометрия сбила с толку, все правильно х и там и там.
Осталось смещение убрать ;]

essere 31.07.2013 17:13

Дзен-трансгуманист,
Спасибо Вам ;]
Вот получилось вот такая красота:
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();  
    }

essere 31.07.2013 17:18

А можно самый страшный вопрос? Вот убрал смещение перпендикуляра, теперь все классно. Нарисовал линию и теперь от ее центра пошел длинный перпендикуляр.
Если нарисовать две линии, так, чтобы перпендикуляры пересеклись, как можно найти его угол? Логически.

essere 31.07.2013 18:01

Вложений: 1
Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 265306)
сумма углов четырехугольника 360 градусов
без двух перпендикуляров остается 180
угол между линиями = 180 - угол между перпендикулярами (и наоборот)

Т.е. Я правильно Вас понял, что в расчете участвуют абсолютно все точки?
Вложение 1881

essere 31.07.2013 18:17

Цитата:

Сообщение от Дзен-трансгуманист (Сообщение 265317)
Нет, только векторы самих линий.

мне лень объяснять, прошу в гугл: "угол между векторами", "векторная алгебра" и прочая-прочая :)

Ок спасибо, формулу найду. Посчитаю.
Кстати, а сами точки можно как то двигать? Т.е. я поставил линию, могу ли я как то одну из точек передвинуть, а не обнулять все. Как мне ее подхватить, понятно, что тут будет onmousemove событие, но как мне за существующую точку захватиться?


Часовой пояс GMT +3, время: 13:43.