Toile rotation - JavaScript

Si quelqu'un a la réponse, pourriez-vous m'aider? J'ai 2 images - arrière-plan similaire à l'arc et la flèche. Et j'ai besoin de déplacer l'image de la flèche sur l'image de fond comme ceci est une flèche ticker horloge. Donc, j'ai besoin:Toile rotation - JavaScript

Faire pivoter la flèche pour le rendre parallèle à tick courant sur l'arc
Déplacer la flèche vers le prochain point

Pour cela, je dois utiliser l'objet Canvas en JavaScript et sa méthode transformer - cela permettra de déplacer la flèche et de la faire pivoter.

La question est: comment utiliser la méthode canvas.transform pour faire pivoter (et déplacer) la flèche autour de l'arc? Et quelles valeurs et quelle relation entre elles devraient être dans ce cas:

contextData.clearRect (0, 0, contextData.canvas.width, contextData.canvas.height); 
contextData.save(); 
contextData.translate(indicatorData.width()/2, indicatorData.height()/2); 
contextData.transform(1, 0, 0, 1, x, y); // the question is HERE 
contextData.drawImage(rotationArrow, -rotationArrow.width/2, -rotationArrow.height/2); 
contextData.restore();

Merci d'avance.

Source

2010-11-04 Anonymous

presque oublié ... je l'ai trouvé la réponse , ça marche et c'est le code final. Pour cela a fonctionné dans Internet Explorer, vous devez ajouter la bibliothèque excanvas de Google et de résoudre certains problèmes IE8 vous devez ajouter la compatibilité balise meta:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
    <title>Canvas</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="excanvas.js"></script> 
</head> 
<body> 

<div class="indicator"> 
    <img class="image" src="usage_icon_electro.png" alt="" /> 
    <img class="pointer" src="usage_electro_pointer.png" alt="" /> 
    <canvas width="120" height="120" id="canvas"></canvas> 
</div> 

<script type="text/javascript"> 

var indicatorClass = { 

    timerHandle : 0, 
    timerDelay : 10, 

    rotationIncrement : 1, 
    rotationStep : 0, 
    rotationSteps : 50, 
    rotationRadius : 35, 

    angleCurrent : 5, 
    angleDelta : 150, 

    directionClockwise : true, 

    canvasIndicator : null, 
    canvasPointer : null, 
    canvasContext : null, 

    getRadianAngle : function (degreeValue) { 
     return degreeValue * Math.PI/180; 
    }, 

    initCanvas : function (optionList) { 

     try { 

     var canvasData = $ ('.indicator #canvas').get (0); 

     if ($.browser.msie) { 
      canvasData = document.createElement('canvas'); 
      $ (canvasData) 
       .attr ('width', 120) 
       .attr ('height', 120) 
       .attr ('id', 'canvas') 
       .appendTo('.indicator'); 
      canvasData = G_vmlCanvasManager.initElement(canvasData); 
      /* 
      var metaCompatible = document.createElement('meta'); 
      $ (metaCompatible) 
       .attr ('http-equiv', 'X-UA-Compatible') 
       .attr ('content', 'IE=EmulateIE7') 
       .prependTo('head'); 
      */ 
      //$ ('head').prepend ('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />'); 
//alert ($ ('head').html()); 
     } 

     indicatorClass.canvasIndicator = $ ('.indicator'); 
     indicatorClass.canvasPointer = $ ('.indicator .pointer').get (0); 
     indicatorClass.canvasContext = canvasData.getContext ("2d"); 

     $.extend (indicatorClass, optionList); 

     var angleMax = indicatorClass.angleCurrent + indicatorClass.angleDelta; 
     indicatorClass.setRotationAngle (510); 

     indicatorClass.timerHandle = setInterval(function() { 
      if (indicatorClass.angleCurrent > angleMax) { 
       clearInterval (indicatorClass.timerHandle); 
      } 
      indicatorClass.angleCurrent += indicatorClass.rotationIncrement; 
      indicatorClass.rotationStep += indicatorClass.rotationIncrement; 
      indicatorClass.setRotation(); 
     }, indicatorClass.timerDelay); 

     } catch (exceptionData) { 
     alert ('Indicator is not loaded'); 
     } 
    }, 

    getCircleCoords : function (stepIndex) { 

     var centerX = indicatorClass.canvasIndicator.width()/2; 
     var centerY = indicatorClass.canvasIndicator.height()/2; 
     var coordValues = { 
     currentX : (centerX + indicatorClass.rotationRadius * Math.cos (2 * Math.PI * stepIndex/indicatorClass.rotationSteps)), 
     currentY : (centerY + indicatorClass.rotationRadius * Math.sin (2 * Math.PI * stepIndex/indicatorClass.rotationSteps)) 
     } 

     return coordValues; 
    }, 

    setRotationAngle : function (angleValue) { 

     indicatorClass.canvasContext.translate(indicatorClass.canvasIndicator.width()/2, indicatorClass.canvasIndicator.height()/2); 

     for (var currentAngle = 90; currentAngle <= 720; currentAngle++) { 

     var sin = Math.sin(currentAngle * Math.PI/360); 
     var cos = Math.cos(currentAngle * Math.PI/360); 
     var deltaX = indicatorClass.directionClockwise ? -sin : sin; 
     var deltaY = indicatorClass.directionClockwise ? sin : -sin; 

     if (currentAngle > angleValue) { 
      indicatorClass.canvasContext.transform(cos, deltaY, deltaX, cos, 0, 0); 
      return false; 
     } 
     } 
    }, 

    setTransform : function() { 

     var sin = Math.sin(indicatorClass.rotationStep * Math.PI/indicatorClass.rotationSteps); 
     var cos = Math.cos(indicatorClass.rotationStep * Math.PI/indicatorClass.rotationSteps); 
     var deltaX = indicatorClass.directionClockwise ? -sin : sin; 
     var deltaY = indicatorClass.directionClockwise ? sin : -sin; 

     //indicatorClass.canvasContext.clearRect (0, 0, indicatorClass.canvasContext.canvas.width, indicatorClass.canvasContext.canvas.height); 
     indicatorClass.canvasContext.save(); 
     //indicatorClass.canvasContext.translate(indicatorClass.canvasIndicator.width()/2, indicatorClass.canvasIndicator.height()/2); 
     indicatorClass.canvasContext.transform(cos, deltaY, deltaX, cos, 0, 0); 
     indicatorClass.canvasContext.clearRect (-screen.width, -screen.height, screen.width, screen.height); 
     indicatorClass.canvasContext.drawImage(indicatorClass.canvasPointer, -indicatorClass.canvasPointer.width/2, -indicatorClass.canvasPointer.height - indicatorClass.rotationRadius); 
     indicatorClass.canvasContext.restore(); 
    }, 

    setRotation : function() { 

     var currentAngle = indicatorClass.directionClockwise ? indicatorClass.angleCurrent : -indicatorClass.angleCurrent; 

     indicatorClass.canvasContext.save(); 
     indicatorClass.canvasContext.rotate(indicatorClass.getRadianAngle (currentAngle)); 
     indicatorClass.canvasContext.clearRect (-screen.width, -screen.height, screen.width, screen.height); 
     indicatorClass.canvasContext.drawImage(indicatorClass.canvasPointer, -indicatorClass.canvasPointer.width/2, -indicatorClass.canvasPointer.height - indicatorClass.rotationRadius); 
     indicatorClass.canvasContext.restore(); 
    } 

} 

window.onload = function() { 
    indicatorClass.initCanvas(); 
} 

</script> 

<style type="text/css"> 
.indicator { 
    width:120px; 
    height:120px; 
    border:1px solid #ccc; 
    text-align:center; 
    position:relative; 
} 
.indicator .pointer { 
    visibility:hidden; 
} 
.indicator #canvas { 
    z-index:10000; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 
</style> 

</body> 
</html>

Source

2010-11-04 18:32:36 Anonymous

Lorsque vous postez une réponse, il est préférable d'inclure un exemple ** minimal **. Vous ne devriez pas tout inclure. – Annan

Au lieu de faire l'imbécile avec une matrice de transformation, utilisez la fonction d'aide .rotate

Faire cela vous permettra de faire pivoter un objet autour de son centre

contextData.save() 
contextData.translate(indicatorData.width()/2, indicatorData.height()/2) // ASSUMING this is the object you want to rotate around the center of and that it is being drawn at 0,0 
contextData.rotate(1.57) // 1.57 radians = about 90 degrees 
contextData.drawImage(rotationArrow, -rotationArrow.width/2, -rotationArrow.height/2); 
contextData.restore()

Source

2010-11-04 15:11:52

méthode rotate est utilisée pour modifier la place de l'objet dans un espace de sorte qu'il affecte toutes les autres méthodes qui peut être appliqué à l'objet et ils vont mal fonctionner. Habituellement, la méthode de rotation doit être utilisée uniquement pour les caméras qui tournent autour de l'objet pour créer une illusion de perspective. – Anonymous

Toile rotation - JavaScript

Répondre

Questions connexes