Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 16.12.2013, 17:49   #1
Silverstone
Форумчанин
 
Регистрация: 13.12.2011
Сообщений: 75
Репутация: 10
По умолчанию Провести линию 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 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


19:04.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.