Как прикрепить вращающийся круг к углу автомобиля? - PullRequest
Новая
       4

Как прикрепить вращающийся круг к углу автомобиля?

0 голосов
/ 01 августа 2020

Мне нужно, чтобы вращающийся круг был привязан к углу независимо от вращения машины. Когда вы нажимаете клавиши, машина перемещается, поворачивается и круг перемещается.

enter image description here

Instead, the spinning circle shifts as the car turns. enter image description here

Instead, the spinning circle shifts as the car turns. How to fix? Here is the code: https://codepen.io/Smith37/pen/PoZMjYJ

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width:100px;
            height:100px;
            margin:0px auto;
         }
      </style>
      
      <script type = "text/javascript">
      window.onload = function()
      {
        const canvas = document.getElementById("mycanvas");

        
        canvas.style.background = "#444444";
        var x = 170;
        var y = 150;
        var x1 = 35;
        var y1 = 35;
        const ctx = canvas.getContext("2d");

        const radianCircle = Math.PI * 2;
        var leftPressedFlag=false;
        var rightPressedFlag=false;
        var upPressedFlag=false;
        var downPressedFlag=false;
        var speed = 1;
        var angle = 0;
        var mod = 0;
        var offset = 0;
        var pi2 = 2*Math.PI;
        var step = 0.03;
          
        function main()
        {
          car = new Image();
          car.src = "http://i.imgur.com/uwApbV7.png";
          var moveInterval = setInterval(function () {
              draw();
          }, 30);
          
        }
        document.addEventListener("keydown",function(evt)
        {
      
        if(evt.keyCode==38)
        {
        
          upPressedFlag = true;
        }
        if(evt.keyCode==40)
        {
          downPressedFlag = true;
        }
        if(evt.keyCode==37)
        {
           
         leftPressedFlag = true;
        }
        if(evt.keyCode==39)
        {
         rightPressedFlag=true;
        }
        });
        document.addEventListener("keyup",function(evt)
        {
        
        if(evt.keyCode==38)
        {
          upPressedFlag = false;
        }
        if(evt.keyCode==40)
        {
          downPressedFlag = false;
        }
        if(evt.keyCode==37)
        {
         leftPressedFlag = false;
        }
        if(evt.keyCode==39)
        {
         rightPressedFlag=false;
        }
        });
       

        let i = 0;
        function draw () {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          i++;
          
         
             if(!upPressedFlag || !downPressedFlag)
              {
                mod = 0;
              }
              
              if(upPressedFlag)
              {
                mod = 5;
              }
              
              
              if(downPressedFlag )
              {
                mod = -5;
              }
              
              if(leftPressedFlag)
              {
                angle -= 5;
              }
              if(rightPressedFlag)
              {
                angle += 5;
              }
           

          x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
          y += (speed * mod) * Math.sin(Math.PI / 180 * angle);  
          ctx.save();
          ctx.translate(x, y);
          
          ctx.rotate(Math.PI / 180 * angle);
          ctx.drawImage(car, -(car.width / 2), -(car.height / 2));
          ctx.restore();
          
           ctx.beginPath();
           ctx.lineWidth = 15;
           ctx.strokeStyle = "#4F7942";
           dashedCircle(ctx, x, y, 15, offset % pi2, 5, 0.7);
           ctx.stroke();
           offset += step;
          
         
        }
      main();
        function dashedCircle(ctx, x, y, radius, offset, segments, size) {
  
                    var pi2 = 2 * Math.PI,
                        segs = pi2 / segments,
                        len = segs * size,
                        i = 0,
                        ax, ay;
                    var xd = getPositions(i / 100)[0];    
                    var yd = getPositions(i / 100)[1];
                    ctx.save(); 
                    ctx.translate(xd,yd);
                    ctx.rotate(offset);
                    ctx.translate(-x,-y); 
                    for(; i < pi2; i += segs) {
                        ax = x + radius * Math.cos(i);
                        ay = y + radius * Math.sin(i);
                        ctx.moveTo(ax, ay);
                        ctx.arc(x, y, radius, i, i + len);
                    }
                    
                    ctx.restore();
        } 
        function getPositions (i) {
          return [
            x + x1 - (Math.cos(radianCircle * i / 2) * 10),
            y - y1 + (Math.sin(radianCircle * i / 2) * 10),
          ];
        }

      }
       
        

       

      </script>
   </head>
   
   <body id = "test" >
      <canvas id = "mycanvas" width = "500" height = "500"></canvas>
   </body>
   
</html>

1 Ответ

1 голос
/ 01 августа 2020

Я изменил и добавил комментарии в следующий код, который, вероятно, поможет. Вы не рисовали круг, когда вращали контекст, чтобы нарисовать машину. Вам просто нужно нарисовать круг перед восстановлением контекста. 

<!DOCTYPE html>

<html>
  <head>
    <style>
      #test {
        width: 100px;
        height: 100px;
        margin: 0px auto;
      }
    </style>

    <script type="text/javascript">
      window.onload = function () {
        const canvas = document.getElementById("mycanvas");

        canvas.style.background = "#444444";
        var x = 170;
        var y = 150;
        var x1 = 35;
        var y1 = 35;
        const ctx = canvas.getContext("2d");

        const radianCircle = Math.PI * 2;
        var leftPressedFlag = false;
        var rightPressedFlag = false;
        var upPressedFlag = false;
        var downPressedFlag = false;
        var speed = 1;
        var angle = 0;
        var mod = 0;
        var offset = 0;
        var pi2 = 2 * Math.PI;
        var step = 0.03;

        function main() {
          car = new Image();
          car.src = "http://i.imgur.com/uwApbV7.png";
          var moveInterval = setInterval(function () {
            draw();
          }, 30);
        }
        document.addEventListener("keydown", function (evt) {
          if (evt.keyCode == 38) {
            upPressedFlag = true;
          }
          if (evt.keyCode == 40) {
            downPressedFlag = true;
          }
          if (evt.keyCode == 37) {
            leftPressedFlag = true;
          }
          if (evt.keyCode == 39) {
            rightPressedFlag = true;
          }
        });
        document.addEventListener("keyup", function (evt) {
          if (evt.keyCode == 38) {
            upPressedFlag = false;
          }
          if (evt.keyCode == 40) {
            downPressedFlag = false;
          }
          if (evt.keyCode == 37) {
            leftPressedFlag = false;
          }
          if (evt.keyCode == 39) {
            rightPressedFlag = false;
          }
        });

        let i = 0;
        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          i++;

          if (!upPressedFlag || !downPressedFlag) {
            mod = 0;
          }

          if (upPressedFlag) {
            mod = 5;
          }

          if (downPressedFlag) {
            mod = -5;
          }

          if (leftPressedFlag) {
            angle -= 5;
          }
          if (rightPressedFlag) {
            angle += 5;
          }

          x += speed * mod * Math.cos((Math.PI / 180) * angle);
          y += speed * mod * Math.sin((Math.PI / 180) * angle);

          ctx.save();

          ctx.translate(x, y);
          ctx.rotate((Math.PI / 180) * angle);
          ctx.drawImage(car, -(car.width / 2), -(car.height / 2));
          
          // Added here
          ctx.beginPath();
          ctx.lineWidth = 15;
          ctx.strokeStyle = "#4F7942";
          dashedCircle(ctx, x, y, 15, offset % pi2, 5, 0.7);
          ctx.stroke();

          ctx.restore();

        //   The following code was moved above
        //   ctx.beginPath();
        //   ctx.lineWidth = 15;
        //   ctx.strokeStyle = "#4F7942";
        //   dashedCircle(ctx, x, y, 15, offset % pi2, 5, 0.7);
        //   ctx.stroke();

          offset += step;
        }
        main();
        function dashedCircle(ctx, x, y, radius, offset, segments, size) {
          var pi2 = 2 * Math.PI,
            segs = pi2 / segments,
            len = segs * size,
            i = 0,
            ax,
            ay;
          var xd = getPositions(i / 100)[0];
          var yd = getPositions(i / 100)[1];
          ctx.save();

          //  ctx.translate(xd, yd);
          ctx.translate(offset + 35, offset - 25);


          ctx.rotate(offset);
          ctx.translate(-x, -y);
          for (; i < pi2; i += segs) {
            ax = x + radius * Math.cos(i);
            ay = y + radius * Math.sin(i);
            ctx.moveTo(ax, ay);
            ctx.arc(x, y, radius, i, i + len);
          }

          ctx.restore();
        }
        function getPositions(i) {
          return [
            x + x1 - Math.cos((radianCircle * i) / 2) * 10,
            y - y1 + Math.sin((radianCircle * i) / 2) * 10,
          ];
        }
      };
    </script>
  </head>

  <body id="test">
    <canvas id="mycanvas" width="500" height="500"></canvas>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...