Как мне повернуть эту форму?

Question

Я только начинаю с холста. Я сделал это:

http://www.kingoslo.com/instruments/

Стрелка для тахометра нарисована с использованием канвы. Сейчас я пытаюсь сделать анимацию, чтобы вращать ее вокруг входа в тахометр (не сам). Это то, что я написал до сих пор:

 <script type="text/javascript">
  var img = new Image(); 

  function init(){  
   img.src = 'background.png'; 
   setTimeout(draw,4000);   
  }  

  function draw() {  
   var ctx = document.getElementById('canvas').getContext('2d');   
   img.onload = function(){  
    ctx.drawImage(img,0,0); 
    ctx.beginPath();
    ctx.moveTo(247,308);
    ctx.bezierCurveTo(51, 408, 51, 410, 51, 411);
    ctx.bezierCurveTo(53, 413, 52, 412, 249, 313);
    ctx.fillStyle = "red";
    ctx.fill();
   }  
  }
 </script>

Понятия не имею, как пройти дальше. Кроме того, есть ли где-нибудь исчерпывающая документация, которая охватывает эти вещи?

Спасибо.

С уважением,
Marius

Answer 1

Вы видели это https://github.com/vjt/canvas-speedometer

Я написал ваш код:

Убедитесь, что center point измерителя должен быть на the center of your image, иначе он не будет работать.

Вы можете обработать значение i, чтобы повернуть свой пин в метре.

Здесь я сделал два снимка

1. mt.png // для фонового индикатора http://i.stack.imgur.com/qbWeO.png
2. pin3.png // для метра http://i.stack.imgur.com/SQEv6.png

КОД:

<script type="text/javascript">
            function startup() {
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
                    var meter = new Image();
                    meter.src = 'Mt.png';    //meter background image
                    var pin = new Image();
                    pin.src = 'pin3.png';    //meter pin image                 

                    var x=meter.width/2;     // center point.X (must be the center of image)
                    var y=meter.height/2;    // center point.Y 
                    var width = meter.width; 
                    var height = meter.height;

                    var i=120;             // angle of rotation in degrees
                    var min =-115;         // maximum angle = 6 RPM in meter 
                    var max =100;          // minimum angle = 0 RPM in meter 

                    i=(i < min)? min:(i > max)? max:i;  //to check i must be within min & max range
                    var angleInRadians = Math.PI * i/180;  //converting degree to radians
                    meter.onload = function()
                    {
                        context.translate(x,y);    //setting center at x,y                        
                        context.drawImage(meter, -width / 2, -height / 2, width, height);  //drawing meter background 
                        context.rotate(angleInRadians); //rotating by angle
                        context.drawImage(pin, 0-pin.width/2,0-pin.height+pin.width/2,pin.width,pin.height);  //adjusting pin center at meter center

                    }
            }
    </script>

Обновление: Если вы хотите обрабатывать счетчик со значением об / мин Заменить

                    var i=120;             // angle of rotation in degrees
                    var min =-115;         // maximum angle = 6 RPM in meter 
                    var max =100;          // minimum angle = 0 RPM in meter 

с

                    var r=1.7;               //handle here
                    var min =-114;           
                    var max =99;                                  
                    var span = (max-min)/6;  // dividing rotation angle by meter scale
                    var i=r*span+min;        //angle of rotation from value of r and span

выход: