VPF::Проблемы с переменными - Форум программистов

F1nder

Дата 7.5.2010, 13:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 27.2.2010

Репутация: нет
Всего: нет

Начал изучать js, поставил для себя цель написать техническую онлайн программку с графическим интерфейсом, первым делом взялся за основные функции интерфейса (построение схем)
Ниже скрипт работает не так как нужно, при каждом нажатии кнопок мыши количество выполнений функции line (cor_x1, cor_y1, cor_x, cor_y) растет в геометрической прогрессии
Кто может "разжевать" в чем ошибка

ps google помочь не смог

Код


<html>
 <head>
 <link rel="stylesheet" href="css.css" type="text/css" media="screen" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="application/javascript">
  
$(function() {


 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
   ctx.clearRect(0,0,1000,1000);
      
   ctx.fillStyle = "rgba(0,25,0,0.1)";
      for(i=1;i<2000;i+=10) 
        ctx.fillRect (i, 0, 1, 2000); 
        
    for(i=1;i<2000;i+=10) 
    ctx.fillRect (0, i, 2000, 1);     
      
         
  $(document).mousedown(function(e){
   //  line (e.pageX, e.pageY, 32, 345);
      var cor_x=e.pageX;
     var cor_y=e.pageY;
     
   $(document).mouseup(function(z){
     var cor_x1=z.pageX;
     var cor_y1=z.pageY;
     
      line (cor_x1, cor_y1, cor_x, cor_y);
      
    });

    })
   

        
  
function line (x1, y1, x2, y2) { 

  var canvas = document.getElementById("canvas");
  var ctxt = canvas.getContext("2d");
  var x3 = x1;
// ctxt.clearRect(0,0,1000,1000);
  ctxt.beginPath(); 
  ctxt.moveTo(x1, y1); 
  ctxt.lineTo(x2, y2); 
  ctxt.closePath(); 
  ctxt.stroke(); 
  var   cor_x1=null, cor_y1=null, cor_x=null, cor_y=null;
}; 


});

  </script>
 </head>
 <body >
   <canvas id="canvas" width="1000" height="1000"></canvas>
    <canvas2  id="canvas2" width="1000" height="1000"></canvas2>
    
   </body>
</html>

Amphiluke

Дата 7.5.2010, 16:15 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

При каждом нажатии кнопки мыши вы добавляете все новые обработчики события mouseup, не уничтожая старые. В итоге при отпускании кнопки мыши срабатывают все добавленные когда-либо слушатели. Чтобы не менять слишком много, проще всего сделать переменные cor_x и cor_y глобальными.

Код


// ... до этого все без изменений
         
  $(document).mousedown(function(e){
   //  line (e.pageX, e.pageY, 32, 345);
      cor_x=e.pageX;
      cor_y=e.pageY;     
    });

   $(document).mouseup(function(z){
     var cor_x1=z.pageX;
     var cor_y1=z.pageY;
     
      line (cor_x1, cor_y1, cor_x, cor_y);
    });

// ... далее все без изменений

Это сообщение отредактировал(а) Amphiluke - 7.5.2010, 16:16

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »