Dynamique couleur de remplissage dans la toile

Je travaille sur le cylindre de couleur de remplissage d'objet de toile dynamiquement avec l'animation. J'ai créé Cylinder et l'animation fonctionne bien. En ce moment, il remplissait la couleur automatiquement. Mais ce que je veux, c'est que lorsque je saisis la valeur en pourcentage dans le champ de la boîte de texte, j'ai rempli la couleur.Dynamique couleur de remplissage dans la toile

function drawContainer(cx, cy, width, height, degreeAngle) 
{ 
    ctx.fillStyle = '#E2E2E2'; 
    ctx.beginPath();   
    ctx.fill(); 
    defineFillOutline(cx, cy, width, height, degreeAngle); 
    ctx.save(); 
    ctx.translate(cx, cy); 
    ctx.rotate(degreeAngle * PI/180); 
    ctx.moveTo(-w2, -h2 + h8); 
    ctx.bezierCurveTo(-w2, -h4, w2, -h4, w2, -h2 + h8); 
    ctx.strokeStyle = "royalblue"; 
    ctx.lineWidth = 2; 
    ctx.stroke(); 
    ctx.restore(); 
}

Voici le code entier dans jsFiddle

http://jsfiddle.net/8b9G8/

Merci à l'avance Maha

Source

2014-07-15 user3820621

Link ne le lien fonctionne s'il vous plaît vérifier le travail non – imtheman

Salut @imtheman maintenant – user3820621

Ce code lit les modifications dans la zone de texte et remplit le cylindre basé sur une gamme de 0- 100:

Code annoté et une démo: http://jsfiddle.net/m1erickson/LVW37/

enter image description here

<!doctype html> 
<html lang="en"> 
<head> 
    <style> 
     body{ background-color: ivory; } 
     canvas{ border:1px solid red;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 

    $(function() { 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var cw=canvas.width; 
    var ch=canvas.height; 

    // general variables 
    var PI=Math.PI; 
    var PI2=PI*2; 

    // cylinder related variables 
    var cx=cw/2; 
    var cy=ch/2; 
    var width=65; 
    var height=100; 
    var w2=width/2; 
    var h2=height/2; 
    var h4=height/4; 
    var h8=height/8; 
    var h16=height/16; 
    var ytop=-h2+h8; 
    var cpYtop=-h2-h16; 
    var ybottom=h2-h8; 
    var cpYbottom=h2+h16; 
    var degreeAngle,rAngle,dx,dy,r,a,xx,yy; 
    var bottomFillY=cy+height/2+5; 
    var topFillY=cy-height/2+h8 
    var fillY=bottomFillY; 

    // start the cylinder upright (at 0 degree angle) 
    setContainerAngle(0); 

    // draw the scene 
    draw(); 

    // draw the scene (background, cylinder, liquid in cylinder) 
    function draw(){ 

     // draw background 
     ctx.fillStyle="gray"; 
     ctx.fillRect(0,0,cw,ch); 

     // save the context state 
     ctx.save(); 

     // apply transforms 
     ctx.translate(cx,cy); 
     ctx.rotate(degreeAngle*PI/180); 

     // draw the cylinder clipping region 
     ctx.beginPath(); 
     ctx.moveTo(-w2,ytop); 
     ctx.bezierCurveTo(-w2,cpYtop, w2,cpYtop, w2,ytop); 
     ctx.lineTo(w2,h2-h8); 
     ctx.bezierCurveTo(w2,cpYbottom, -w2,cpYbottom, -w2,ybottom); 
     ctx.closePath(); 
     ctx.clip(); 

     // draw the fluid clipped inside the container 
     ctx.fillStyle='gold'; 
     ctx.fillRect(-cx,fillY-cy,cw,ch); 

     // draw the top-outer lip of the cylinder 
     ctx.moveTo(-w2,-h2+h8);   
     ctx.bezierCurveTo(-w2,-h4, w2,-h4, w2,-h2+h8); 
     ctx.strokeStyle="royalblue"; 
     ctx.lineWidth=2; 
     ctx.stroke(); 

     // cleaning up...restore the original context state 
     ctx.restore();  
    } 

    // change the angle of the cylinder 
    function setContainerAngle(degrees){ 
     degreeAngle=degrees; 
     rAngle=degreeAngle*Math.PI/180; 
     dx=width/2; 
     dy=height/2-height/8; 
     r=Math.sqrt(dx*dx+dy*dy); 
     a=Math.atan2(dy,dx)+Math.PI+rAngle; 
     xx=cx+r*Math.cos(a); 
     yy=cy+r*Math.sin(a); 
    } 


    // listen for keyup events on the textbox 
    // change the amount of fill in the cylinder accordingly 
    $('#filler').keyup(function(){ 
     var value=parseInt($(this).val()); 
     if(value<0){value=0;} 
     if(value>100){value=100;} 
     fillY=bottomFillY-(bottomFillY-topFillY)*value/100; 
     draw(); 
    }); 


    }); // end $(function(){}); 

    </script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas><br> 
    Percent full (0-100)<input type=text id=filler value=0> 
</body> 
</html>

Source

2014-07-15 21:22:37 markE

Salut @markE Merci pour votre réponse précieuse, mais exactement ce que je veux est dans la zone de texte si j'entre 10% le cylindre a remplir avec animation – user3820621

Salut @markE je vous remercie beaucoup pour votre immense soutien à moi pour cette tâche mais encore :) J'ai besoin de votre aide ou me suggérer j'ai besoin d'animation quand j'entre 10% dans la boîte de texte en douceur, il doit augmenter et Encore une fois merci beaucoup pour votre soutien Maintenant, j'ai mieux espoir que je peux soumettre ce – user3820621

Lorsque l'utilisateur change la valeur dans la zone de texte: (1) annuler une boucle d'animation précédente - Utiliser cancelAnimationFrame (id), (2) démarre une boucle d'animation qui change de façon incrémentielle du montant de remplissage actuel à la nouvelle valeur dans la zone de texte. (3) arrêter l'animation lorsque le remplissage atteint la nouvelle valeur. Le gestionnaire de clés dans ma réponse ci-dessus vous montre comment redessiner en fonction d'un pourcentage de remplissage. Ma réponse précédente montre comment utiliser une boucle d'animation pour modifier la variable fillY et redessiner en douceur. Donc, entre mes différentes réponses, vous avez tous les outils dont vous avez besoin. Bonne chance pour votre projet! – markE

Je solution obtenu pour le remplissage en douceur dans le cylindre. Dans la fonction d'animation, j'ai ajouté le code ci-dessous.

if (fillY > (bottomFillY - (bottomFillY - topFillY) * value/100)){ //112.5 
    requestAnimationFrame(animateFill); 
    //fillY = bottomFillY - (bottomFillY - topFillY) * value/100; 
    fillY -= 0.50; 
} 
else{ 
    requestAnimationFrame(animateFill); 
    //fillY = bottomFillY - (bottomFillY - topFillY) * value/100; 
    fillY += 0.50; 
} 
draw();

Cela fonctionnait bien.

Merci Maha

Source

2014-07-16 19:16:57 user3820621

Dynamique couleur de remplissage dans la toile

Répondre

Questions connexes