Html2canvas: Dégradé linéaire avec angle (0deg) sans rendu

Créé le 11 mars 2013 · 8Commentaires · Source: niklasvh/html2canvas

Salut !

Tout d'abord, joli plugin ici ! J'avais juste besoin de quelque chose comme ça ;)

J'ai juste une question sur le dégradé.

Les dégradés sont rendus lorsque l'angle est spécifié avec un mot (Haut, Gauche, ...), mais pas lorsque je mets un angle en Degré (Par exemple : linear-gradient(0deg, rgb(0, 0, 0) 0% , rgb (255, 255, 255) 100%) ne fonctionnera pas).

Y'a t'il un moyen d'arranger cela ? Parce que j'utilise beaucoup de dégradés avec des valeurs de degrés :)

Merci !

Bug

Source

nammu

Tous les 8 commentaires

Merci pour l'info.

Il existe un moyen de le réparer, mais je n'ai actuellement pas le temps pour cela. Je l'ajouterai au backlog et j'y reviendrai quand j'aurai le temps.

niklasvh le 14 mars 2013

Probablement, aucun des dégradés ne fonctionne.
Nous utilisons une notation différente de celle du 0-deg : linear-gradient(to bottom, color, color);

oosterholt le 18 juil. 2013

Y a-t-il des mises à jour sur ce @niklasvh , je suis confronté au même problème.

abhasg le 8 avr. 2014

+1 pour résoudre ce problème. @niklasvh pouvez-vous nous donner un indice pour essayer de résoudre ce problème ?

fbotti le 19 juin 2014

Il existe une solution simple pour cela, ajoutez simplement ce if avant d'exister le commutateur de position dans le LinearGradientContainer

if (imageData.args[0].indexOf('deg') != -1) {
  var rad = parseFloat(imageData.args[0].substr(0, imageData.args[0].length - 3)) * (Math.PI / 180);
  //Finds y start and scales it between 0 and 1
  this.y0 = (Math.cos(rad) + 1) / 2;
  //Flips y1
  this.y1 = 1 - this.y0;
  //Same as for y0 but flip axis to match with css gradient
  this.x0 = (-Math.sin(rad) + 1) / 2;
  this.x1 = 1 - this.x0;
} else {
  imageData.args[0].split(" ").reverse().forEach(function(position) {
     switch (position) {
          ........
     }
}