Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.12.2013, 17:49   #1
Silverstone
Пользователь
 
Регистрация: 13.12.2011
Сообщений: 75
По умолчанию Провести линию canvas по точкам

Подскажите как можно провести canvas линию между созданными блоками div. Пока что получается опросить только первую координату, с которой нужно начать вести линию, а вот с конечной точкой трудности.
Код:
var flag = false;
var shift_x;
var shift_y;
var X;
var Y;
var X1;
var Y1;
var cnt = 0;
var coords = { 'x' : [], 'y' : []};
var i = 0;
var arr = [];


function myFunction()// создает див-блок
{
  cnt++;
  var round = document.createElement('div');
   round.style.width = '98px';
   round.style.height = '98px';
   round.style.backgroundImage = "url('round.png')";
   round.style.position = 'absolute';
   round.style.top = Math.random()*600;
   round.style.left = Math.random()*1100;
   round.id = cnt;
   round.innerHTML=cnt;
   round.onmousedown = function() {start_drag(round)};
   round.onmousemove = function() {dragIt(round)};    
   round.onmouseup = function() {end_drag(round)};  
   round.onmouseout = function() {line(round)}; 
   document.body.appendChild(round);
   
   round.style.left = parseInt(mouse.style.left)+20+'px'
   
}
                    
                          
function start_drag(itemToMove,e)
{
 if(!e) e = window.event;
 flag=true;
 shift_x = e.clientX-parseInt(itemToMove.style.left);
 shift_y = e.clientY-parseInt(itemToMove.style.top);
}
    
function end_drag(){ flag=false; }

function dragIt(itemToMove,e)
{
 if(!flag) return;
 if(!e) e = window.event;
  itemToMove.style.left = (e.clientX-shift_x) + "px";
  itemToMove.style.top = (e.clientY-shift_y) + "px";
}

function myFunction2()// создает канвас-линию
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');

   canvas.onmousedown = function() {drag(canvas)};
   canvas.onmousemove = function() {dragIt(round)};    
   canvas.onmouseup = function() {end_drag(round)};  
   canvas.body.appendChild(canvas);
    
 }

 function line()
{
  //alert('hello');
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');

  coords.x[i] = event.pageX;
  coords.y[i] = event.pageY;
 
  canvas.beginPath();
  canvas.moveTo(coords.x[i], coords.y[i]);
  canvas.lineTo(0 ,0);
  canvas.stroke();

}
решил сделать иначе: линия canvas рисуется в случае срабатывания события mouseout. Выглядит коряво из-за того, что рисуется на сквозь, но проблема с поиском вторых координатах все также осталась.

Последний раз редактировалось Silverstone; 16.12.2013 в 19:09.
Silverstone вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Провести прогнозирование darima Microsoft Office Excel 1 09.01.2013 20:21
провести диагональное сечение ulechka128 Помощь студентам 2 25.12.2011 11:43
Провести линию в любом месте на экране Belfigor Общие вопросы Delphi 5 28.02.2010 23:31
Как удалить линию?и менять цвета последующих линий на Image.Canvas Cooper_ts Помощь студентам 3 09.12.2009 19:43
как провести графич.линию через сердину клекти таблицы? tolikman Microsoft Office Word 36 15.01.2009 18:40