Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linear-Gradient with Angle (0deg) not rendering #172

Closed
nammu opened this issue Mar 11, 2013 · 8 comments
Closed

Linear-Gradient with Angle (0deg) not rendering #172

nammu opened this issue Mar 11, 2013 · 8 comments
Labels

Comments

@nammu
Copy link

@nammu nammu commented Mar 11, 2013

Hi !

First of all, nice plugin here ! I just needed something like that ;)

I just have a question about gradient.

Gradients are rendered when the angle is specified with a word (Top, Left, ...), but not when I put an angle in Degree (For exemple : linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%) won't work).

Is there a way to fix this ? Because I use a lot of gradients with degrees values :)

Thanks !

@niklasvh
Copy link
Owner

@niklasvh niklasvh commented Mar 14, 2013

Thanks for the info.

There is a way to fix it, but I currently don't have the time for it. I'll add it to the backlog and get back to it when I do have the time.

@oosterholt
Copy link
Contributor

@oosterholt oosterholt commented Jul 18, 2013

Probably, none of the gradients work.
We are using a different notation than the 0-deg: linear-gradient(to bottom, color, color);

@abhasg
Copy link

@abhasg abhasg commented Apr 8, 2014

Is there any updates on this @niklasvh, I am facing same problem.

@fbotti
Copy link

@fbotti fbotti commented Jun 19, 2014

+1 to resolve this issue. @niklasvh can you give us a clue to try to resolve this?

@NicolayThafvelin
Copy link

@NicolayThafvelin NicolayThafvelin commented Feb 11, 2015

There is a simple fix for this just add this if before existing the position switch in the 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) {
          ........
     }
}

@usmonster
Copy link
Contributor

@usmonster usmonster commented Feb 12, 2015

@NicolayThafvelin Pull requests are welcome... :]

@topwood
Copy link

@topwood topwood commented Feb 26, 2016

topwood added a commit to topwood/html2canvas that referenced this issue Mar 1, 2016
@niklasvh
Copy link
Owner

@niklasvh niklasvh commented Dec 11, 2017

Fixed in 1.0.0

@niklasvh niklasvh closed this Dec 11, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants