1. Accueil
  2. Question et réponse
  3. Masquage d'une toile avec png semi-transparent

Masquage d'une toile avec png semi-transparent

2012-02-18 3 views
0

Je voudrais faire une application web où l'utilisateur peut, en survolant une toile avec une image en noir et blanc, révéler les couleurs.Masquage d'une toile avec png semi-transparent

Mon premier essai a consisté à définir une image d'arrière-plan css sur la toile avec l'image bw, et à révéler l'image colorée avec un cercle dessiné dans la toile. De cette façon, le cercle a des bords solides, mais ce que je veux, c'est un cercle avec des bords fanés. Y at-il un moyen de révéler l'image colorée avec un png semi-transparent au lieu d'un cercle de toile solide?

J'espère que this image expliquera plus comment je veux que les choses fonctionnent.

Source

2012-02-18 Lavve

Répondre

0

commencé un petit projet avec le cadre de Processing.js. Va encore besoin de beaucoup de travail. Mais peut-être, il vous fait dans la bonne direction:

EDIT: Quelques modifications supplémentaires dans le code

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="processing-1.3.6.js"></script> 
    </head> 
    <body style="background-color:blue"> 
     <div id="container" style="background-image: url('testgrey.jpg');overflow:hidden;background-clip:content-box;width: 400px;height: 400px" > 
      <canvas id="test" width="400" height="400"></canvas> 
     </div> 
     <script type="text/processing" data-processing-target="test"> 

     /* @pjs preload="test.jpg"; */ 
     /* @pjs transparent=true; */ 
     int nX, nY; 
     int radius = 40; 
     double powRadius = Math.pow(radius,2); 

     void setup() 
     { 
     size(400,400); 
     frameRate(25); 
     background(0,0,0,0); 
     a = loadImage("test.jpg"); 
     } 

     void draw(){ 

     int left = nX - radius; 
     int right = left + radius * 2; 
     int top = nY - radius; 
     int bottom = top + radius * 2; 
     for (int j = top; j <= bottom; ++j) 
     { 
     for (int k = left; k <= right; ++k) 
     { 
     double dist = Math.pow(nX - k, 2.0) + Math.pow(nY - j, 2.0); 
     if (dist <= powRadius) 
     { 
     color original= a.get(k,j); 
     int newAlpha = 255-dist/powRadius*255; 
     if(alpha(get(k,j))<newAlpha){ 
     color toDraw = color(red(original),green(original),blue(original),newAlpha); 
     set(k,j,toDraw); 
     } 
     } 
     } 
     } 

     } 

     void mouseMoved(){ 
     nX = mouseX; 
     nY = mouseY; 
     } 
     </script> 
    </body> 
</html>

Vous devez deux images pour excute ceci: test.jpg et testgrey.jpg.

Source

2012-02-18 12:52:44 Alex

Questions connexes

 Questions connexes