Fusejs FuseJS - Core

Comments and changes to this ticket

• 

  John-David Dalton September 12th, 2010 @ 01:11 AM

  • Milestone cleared.
  • Milestone order changed from “0” to “0”

  The snippet you link to no longer exists. Could you please repost.

• 

  Joe Gornick October 6th, 2010 @ 05:16 PM

  • Assigned user changed from “John-David Dalton” to “Joe Gornick”
  • Milestone order changed from “6” to “0”
• 

  Joe Gornick October 8th, 2010 @ 01:09 AM

  • State changed from “new” to “open”

  The idea of parsing colors means we always want to return a standard color format. We've talked about standardizing on HEX, however, with the addition of specify alpha using rgba or hsla, this may not be the best approach.

  Maybe we standardize on always returning rgb and rgba values. If we head down this path, we could also provide helper methods to convert to HEX and when it's an RGBA value, maybe return an object with a color and alpha properties?

  Our setStyle method might also be able to recognize when a browser does not support the rgba or hsla syntax and convert those values to HEX and also update the opacity level on the element?

  I do realize that when using rgba or hsla doesn't actually affect the opacity value of the element, but when older browsers don't support this syntax, we could cheat and use opacity?

  Here are some steps I think we will need to do:

  Convert #RGB -> #RRGGBB
  #FFF -> #FFFFFF

  Convert RGB/RGBA
  rgb[a](number, number, number[, alphavalue])

  rgb[a](percent, percent, percent[, alphavalue])

  Convert HSL/HSLA
  hsl[a](number, percent, percent[, alphavalue])

  Thoughts?

• You flagged this item as spam.
  

  Radoslav Stankov October 8th, 2010 @ 05:17 AM

  I would suggest some sort of special color object, with all convert methods on it. This object should behave like string or something like it.

• 

  Joe Gornick October 8th, 2010 @ 12:48 PM

  From minimal testing, getComputedStyle will automatically convert all values to rbg/rgba as a string.

• You flagged this item as spam.
  

  Juriy Zaytsev October 13th, 2010 @ 12:39 PM

  Special color object is a good idea.

  I use something similar in fabric.js (http://github.com/kangax/fabric.js/blob/gh-pages/src/color.class.js) — fabric.Color constructor, which exposes instance methods like toRgb, toRgba, toHex, etc. Constructor itself can also parse different formats, which makes it easy to:

  var myColor = new fabric.Color('#ff5555');
  myColor.toRgb(); // "rgb(255,85,85)"
  myColor.toRgba(); // "rgba(255,85,85,1)"
  
  myColor.setAlpha(0.2).toRgba(); // "rgba(255,85,85,0.2)"
  

  It's also easy to do things like overlay, or convert color to graycale:

  myColor.overlayWith('rgb(0,0,0)').toRgb(); // "rgb(64,22,22)"
  new fabric.Color('#ff5555').toGrayscale().toRgb(); // "rgb(136,136,136)"
  

• You flagged this item as spam.
  

  Nick Stakenburg October 16th, 2010 @ 10:44 AM

  That's pretty cool. Maybe it could also support HSB(a), HSL(a).

  var myColor = new Color('#ff0000');
  myColor.toHsb(); // 'hsb(0%, 100%, 50%)'
  myColor.deSaturate().toHsb(); // 'hsb(0%, 0%, 50%)'
  myColor.setBrightness(.75).toHex(); // '#bfbfbf'
  

  For animation it might also be nice to be able to get a transition between two colors. That would make it easy to animate colors. With support for HSB you could even animate only the brightness or saturation for example. But maybe the transition part is better left to some fx library.

  var fromColor = new Color('#bfbfbf'),
      toColor   = new Color('hsb(160°, 0.4, 0.25)');
  
  var currentHex = fromColor.getHexTransition(toColor, .5); // '#778066'
  // or
  fromColor.getTransition(toColor, .5).toHex(); // '#778066', same thing
  

• 

  Joe Gornick February 21st, 2011 @ 05:08 PM

  • State changed from “open” to “new”