Slyweb
На разработку сайта! Скидки 50%!

проблема с отрисовкой фигур

Вы можете задавать любые вопросы по jQuery.

проблема с отрисовкой фигур

Сообщение Alt » 02 фев 2012, 22:02

Всем привет. Итак, без долгих предисловий сразу к сути проблемы. В общем и целом имеется некий код (некий код прилагается). По кликам на кнопки отрисовываются различные фигуры (использую канвас), меняются цвета и делается заливка. Если с цветами и заливкой все просто и понятно, то с самой отрисовкой фигур явно что-то не то. Первое, что настораживает, так это 1 "холостой" проклик. То есть пока кнопка не нажата, ничего не рисует, нажал кнопку, отрисовка начинается со второго клика, причем цвет какой-то бледный. С 3-го клика нормально.

Далее меняешь тип фигуры и вместо того, чтобы рисовать новую фигуру, эта адская машина накладывает ее на старую (проблема с прокликом остается, первый раз просто отрисовывает старую фигуру). И такое наложение фигур происходит при каждом изменении типа фигур. Вроде как логичным решением выглядит очистка переменной от "старой" фигуры при каждом изменении ее типа. Но в этом и проблема. Бился я головой об эту стену, бился, так и не смог добиться хоть какой-то вразумительной очистки. Результатом было либо ничего, либо тотальная очистка всех фигур (то есть все отрабатывает, но очищение происходит быстрее, чем прорисовка...). Копался по свободе и инете, там в основном примеры очистки всей плоскости (типа clearRect();). Но понятное дело, что тут такое не подходит. Не давно наткнулся на замечательную функцию канваса .ClearValue();, но эта сволочь затирает переменные еще до отрисовки, что с ней не делай( Плюс ко всему, я планирую прикрутить перетаскивание (drag and drop, я полагаю) и в идеале растягивание сюда и если будет "зануление" переменной, то по идее не очень весело будет потом находить нужную фигуру (слой)...

Собственно сам код (немного урезан, но все еще рабочь):

Код: Выделить всё
<!DOCTYPE html>
<html>
    <head>
        <title>Canvas from scratch</title>
        <meta charset="window-1251">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script> 
      
      var figure = "none";
      var curColor = "black";
      var typeFigure = "stroke";
      var dragok = "none";
//      var x = "0";
//      var y = "0";
$(document).ready(function(){

               var canvas = document.getElementById("myCanvas");
               var ctx = canvas.getContext("2d");
 
     $("#myCanvas").click(function(event){
      $("#coord").css("display","block");
      $("#x").html(event.pageX);
      $("#y").html(event.pageY);   
//квадрат    
     if (figure == '1')
         {
         var rect = $("#myCanvas").click(function(e){
               ctx.id = "first";
            ctx.beginPath();
            ctx.strokeStyle = curColor;
            ctx.lineWidth = "1";
            ctx.lineJoin = "round";
            ctx.lineCap = "round";
            ctx.moveTo(e.pageX-50,e.pageY-50);
            ctx.lineTo(e.pageX+50,e.pageY-50);
            ctx.lineTo(e.pageX+50,e.pageY+50);
            ctx.lineTo(e.pageX-50,e.pageY+50);
            ctx.lineTo(e.pageX-50,e.pageY-50);
         if (typeFigure == 'stroke')
            {
            ctx.strokeStyle = curColor;
            ctx.stroke();
            }
         else if (typeFigure == 'fill')
            {
            ctx.fillStyle = curColor;
            ctx.fill();
            }
            ctx.closePath();
            });
         }
//круг
         else if (figure == '2')
         {
         $("#myCanvas").click(function(e){
            ctx.id = "second";
            ctx.lineWidth = "1";
            ctx.beginPath();
            ctx.strokeStyle = curColor;
            ctx.arc(e.pageX, e.pageY, 50, 0, 2*Math.PI, true);
         if (typeFigure == 'stroke')
            {
            ctx.strokeStyle = curColor;
            ctx.stroke();
            }
         else if (typeFigure == 'fill')
            {
            ctx.fillStyle = curColor;
            ctx.fill();
            }
            ctx.closePath();
            });
         }
     });   
});                                           
  </script>

    </head>
    <body>
   <div id="container">
        <canvas id="myCanvas" style="border: 1px solid;" width="800" height="600"></canvas>
   </div>
      <br>
      <input id="but1" type="button" value="квадрат" onclick="figure='1',ctx = '0'<!--, alert(figure);-->" />
      <input id="but2" type="button" value="крг" onclick="figure='2',ctx = '0'<!--, alert(figure);-->" />
      <br>
      <input id="but5" type="button" value="красный" onclick="curColor='red'" />
      <input id="but6" type="button" value="зеленый" onclick="curColor='green'" />
      <input id="but7" type="button" value="синий" onclick="curColor='blue'"/>
      <input id="but8" type="button" value="желтый" onclick="curColor='yellow'"/>
      <input id="but9" type="button" value="черный" onclick="curColor='black'"/>
      <br>
      <input id="but10" type="button" value="Заливка" onclick="typeFigure='fill'"/>
      <input id="but11" type="button" value="Контур" onclick="typeFigure='stroke'"/>
      <p id="coord" style="display:none">Mouse coursor <b>X:<span id="x"></span> Y:<span id="y"></span></b> </p>
    </body>
</html>


Заранее спасибо тем, кто осилит помочь.
Alt
 
Сообщения: 2
Зарегистрирован: 02 фев 2012, 13:16

Re: проблема с отрисовкой фигур

Сообщение admin » 03 фев 2012, 09:18

Для того чтобы срабатывал по первому нажатию нужно изменить код на следующий:

Код: Выделить всё
<!DOCTYPE html>
<html>
    <head>
        <title>Canvas from scratch</title>
        <meta charset="utf-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script> 
     
      var figure = "none";
      var curColor = "black";
      var typeFigure = "stroke";
      var dragok = "none";
//      var x = "0";
//      var y = "0";
$(document).ready(function(){

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

     $("#myCanvas").click(function(e){
      $("#coord").css("display","block");
      $("#x").html(e.pageX);
      $("#y").html(e.pageY);   
//квадрат     

     if (figure == '1')
         {
         
               ctx.id = "first";
            ctx.beginPath();
            ctx.strokeStyle = curColor;
            ctx.lineWidth = "1";
            ctx.lineJoin = "round";
            ctx.lineCap = "round";
            ctx.moveTo(e.pageX-50,e.pageY-50);
            ctx.lineTo(e.pageX+50,e.pageY-50);
            ctx.lineTo(e.pageX+50,e.pageY+50);
            ctx.lineTo(e.pageX-50,e.pageY+50);
            ctx.lineTo(e.pageX-50,e.pageY-50);
         if (typeFigure == 'stroke')
            {
            ctx.strokeStyle = curColor;
            ctx.stroke();
            }
         else if (typeFigure == 'fill')
            {
            ctx.fillStyle = curColor;
            ctx.fill();
            }
            ctx.closePath();
   
         }
//круг
         else if (figure == '2')
         {

            ctx.id = "second";
            ctx.lineWidth = "1";
            ctx.beginPath();
            ctx.strokeStyle = curColor;
            ctx.arc(e.pageX, e.pageY, 50, 0, 2*Math.PI, true);
         if (typeFigure == 'stroke')
            {
            ctx.strokeStyle = curColor;
            ctx.stroke();
            }
         else if (typeFigure == 'fill')
            {
            ctx.fillStyle = curColor;
            ctx.fill();
            }
            ctx.closePath();

         }
     });   
});                                           
  </script>

    </head>
    <body>
   <div id="container">
        <canvas id="myCanvas" style="border: 1px solid;" width="800" height="600"></canvas>
   </div>
      <br>
      <input id="but1" type="button" value="квадрат" onclick="figure='1',ctx = '0'<!--, alert(figure);-->" />
      <input id="but2" type="button" value="крг" onclick="figure='2',ctx = '0'<!--, alert(figure);-->" />
      <br>
      <input id="but5" type="button" value="красный" onclick="curColor='red'" />
      <input id="but6" type="button" value="зеленый" onclick="curColor='green'" />
      <input id="but7" type="button" value="синий" onclick="curColor='blue'"/>
      <input id="but8" type="button" value="желтый" onclick="curColor='yellow'"/>
      <input id="but9" type="button" value="черный" onclick="curColor='black'"/>
      <br>
      <input id="but10" type="button" value="Заливка" onclick="typeFigure='fill'"/>
      <input id="but11" type="button" value="Контур" onclick="typeFigure='stroke'"/>
      <p id="coord" style="display:none">Mouse coursor <b>X:<span id="x"></span> Y:<span id="y"></span></b> </p>
    </body>
</html>


Для перетаскивания изображения можно использовать библиотеку KineticJS http://www.kineticjs.com/
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: проблема с отрисовкой фигур

Сообщение Alt » 03 фев 2012, 12:50

Спасибо. Вчера ночью уже понял, что наложение происходило, так как само рисование отрабатывало с каждым разом на 1 раз больне (1 нажатие на кнопку - 1 отрисовка, второе нажатие - уже 2 подрят отрисовки и т.д.). В общем спасибо большое.
Alt
 
Сообщения: 2
Зарегистрирован: 02 фев 2012, 13:16


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron