Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2013, 09:49
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Рисование линии на CANVAS
Всем добра!
Господа, у меня есть опыт работы с JS/Jquery, но никогда не работал с CANVAS'ом.
Есть задачка:
Есть холст, на нем пользователь ставит первую точку, вторую точку. И, между ними рисуется линия.
Потом пользователь рисует вторую линию, точно так же.
Задача: найти середины этих линий и провести от них перпендикуляры (эта линия, которая лежит под углом 90 градусов).
Синьоры, я хочу разобраться, может быть есть библиотечка какая-нибудь по работе с канвасом, ну и вообще, как логически решить задачу. Список методов по работе с этим объектом то найти не проблема, а вот как стартануть.
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2013, 11:20
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Сообщение от Дзен-трансгуманист Посмотреть сообщение
А в чем проблема? Нарисовать линию или вычислить перпендикуляр?
Для таких простых вещей библиотеки не нужны.)
Ну например, для того чтобы поставить на канве точки.
Полагаю как то надо сначала получить координаты "клика", потом координаты второго клика.
Нашел функцию получения координат:
function cnvs_getCoordinates(e) {
            x=e.clientX;
            y=e.clientY;
            document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

Почему то не работает в секции $(document).ready(function() {...
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2013, 11:23
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Во, даже вот так:
function cnvs_getCoordinates(e) {
            $("#xycoordinates").text( e.clientX + "," + e.clientY );
}
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2013, 11:35
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Потом, логично создать функцию рисования самой линии. Объявив ее вне секции $(document).ready(function() {...
А уже в $(document).ready(function() {... мы ее вызываем.
function drowLine(x_first, y_first, x_second, y_second) {
            var canvas = document.getElementById("myCanvas");  
            var ctx = canvas.getContext("2d");
            ctx.moveTo( x_first, y_first );
            ctx.lineTo( x_second, y_second );
            ctx.stroke();
        }
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2013, 11:44
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Но ведь промежуточный итог тоже же где то хранить надо т.е. координаты точка1 и координаты точка2, а потооом уже только вызывать функцию рисования.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2013, 12:25
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Спасибо, изучу.
Но дошел до
var coords = [];

        function getCoords(e)
        {
            coords.push(e.clientX, e.clientY);

            if (coords.length === 4) {
                //alert(coords[0] +','+ coords[1] +','+ coords[2] +','+ coords[3]);

                drowLine(coords[0], coords[1], coords[2], coords[3]);

                coords = [];
            }
        }

Вот так хранить координаты
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2013, 14:24
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Вобщем вот такая красота получилась:
<body>  
    <canvas onclick="getCoords(event)" style="border: 1px solid #c6c6c6" id="myCanvas" width="500" height="500">
          <!-- Insert fallback content here -->  
    </canvas>  
    <script>  

    var coords = [];
    var perps = [];

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

        function getCoords(e)
        {
            //alert(e.clientX + " на " + e.clientY);

            drawCircle(e.clientX, e.clientY, 3);
                
            coords.push(e.clientX, e.clientY);

            if (coords.length === 4) {
                x1 = coords[0]; y1 = coords[2];
                x2 = coords[1]; y2 = coords[3];

                var perpX = (x1 + y1)/2;
                var perpY = (x2 + y2)/2;

                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();  
    }

    $(document).ready(function() 
    {  
        //drawLine(100, 100, 250, 300);
         //var canvas = document.getElementById("myCanvas");  
         //var ctx = canvas.getContext("2d");  
         //...
    });  

   </script>  
   </body>

Вот только не могу понять, как перпендикуляр отвести, старт то известно откуда "вести" его, а вот куда ...
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2013, 15:50
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Сообщение от Дзен-трансгуманист Посмотреть сообщение
Комментарии в коде для кого написаны?

// половинный вектор перпендикуляра
var perpHalfDX = -dy / lineLen * perpLen / 2;
var perpHalfDY = +dx / lineLen * perpLen / 2;

...


// перпендикуляр

ctx.beginPath();
ctx.moveTo( midX - perpHalfDX, midY - perpHalfDY );
ctx.lineTo( midX + perpHalfDX, midY + perpHalfDY );
ctx.stroke();
Да это я пробовал:
var coords = [];
    var perps = [];

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

        function getCoords(e)
        {
            //alert(e.clientX + " на " + e.clientY);

            drawCircle(e.clientX, e.clientY, 3);
                
            coords.push(e.clientX, e.clientY);

            if (coords.length === 4) {
                x1 = coords[0]; y1 = coords[2];
                x2 = coords[1]; y2 = coords[3];

                var dx = x2 - x1;
                var dy = y2 - y1;
                var lineLen = Math.sqrt( dx * dx + dy * dy );

                var perpHalfDX = -dy / lineLen * perpLen / 2;
                var perpHalfDY = +dx / lineLen * perpLen / 2;

        
                var perpX = (x1 + y1)/2;
                var perpY = (x2 + y2)/2;
                
                ctx.beginPath();
                ctx.moveTo( perpX - perpHalfDX, perpY - perpHalfDY );
                ctx.lineTo( perpX + perpHalfDX, perpY + perpHalfDY );
                ctx.stroke();

                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();  
    }

    $(document).ready(function() 
    {  
        //drawLine(100, 100, 250, 300);
         //var canvas = document.getElementById("myCanvas");  
         //var ctx = canvas.getContext("2d");  
         //...
    });

Только не работает оно.
Математика чертова ;[
Ответить с цитированием
  #9 (permalink)  
Старый 31.07.2013, 16:22
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Сообщение от Дзен-трансгуманист Посмотреть сообщение
почему perpLen не определен?

и почему
var perpX = (x1 + y1)/2;
var perpY = (x2 + y2)/2;

если нужно
var perpX = (x1 + x2)/2;
var perpY = (y1 + y2)/2;

???

coords.push(e.clientX, e.clientY);

x1 = coords[0]; y1 = coords[2];
x2 = coords[1]; y2 = coords[3];

тут вообще иксы и игреки перепутаны...

блин, ну нельзя же быть настолько невнимательным)
Почему перепутаны то) Это я сам писал.
Ответить с цитированием
  #10 (permalink)  
Старый 31.07.2013, 16:26
Интересующийся
Отправить личное сообщение для essere Посмотреть профиль Найти все сообщения от essere
 
Регистрация: 29.03.2013
Сообщений: 27

Сообщение от Дзен-трансгуманист Посмотреть сообщение
А мой код, который я писал в соответствии с тем что x - это всегда икс, а y - всегда игрек, должен заработать на неправильном сопоставлении переменных автоматически?
Просто из курса школьной геометрии помнится х1 у1, х2 у2 и т.д.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas - нарисовать линии Valentinka_1 Общие вопросы Javascript 1 09.05.2013 21:51
рисование прямоугольника по движению мыши prizrak39 Events/DOM/Window 4 14.03.2013 15:36
Рисование на карте (маркеры, траектория) vita1ii Библиотеки/Тулкиты/Фреймворки 7 23.02.2013 22:35
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16