0
<LinearGradient>
     <matrix>
         <Matrix a="0.0262451171875" d="0.009765625" tx="218.45" ty="83"/>
      </matrix>
      <GradientEntry color="#E63426" ratio="0.00392156862745098"/>
      <GradientEntry color="#CA271E" ratio="0.36078431372549"/>
      <GradientEntry color="#B31D19" ratio="0.749019607843137"/>
      <GradientEntry color="#AB1917" ratio="1"/> 
</LinearGradient>

This is the relevant part of the xfl file that is needed fill a shape with colors using gradientEntry. The matrix values above are suppose to somehow help me get the start and end coordinates for the gradient. Does anyone know how to extract the start and end coordinates. I did a similar thing not long ago using EaselJS Matrix 2D class with the decompose function to decide scaling, rotation, skewing and translation (displacement).

What im trying to do is to draw an xfl picture in HTML 5 with canvas.

Im a bit new at programming so maybe my question is not so well formulated! Sorry about that.

Zok
  • 1
  • 2

1 Answers1

1

I have been looking into this for a good while, but I haven't figured it out entirely yet.

It's a typical transformation matrix found a lot in the XFL files, but what it transforms exactly is unknown to me. I do know that if you pull [0,0] through the transformation matrix and consider the local transformation space of the layer (ie, subtract the transformation point), you get the center of the gradient.

If I transform [0,1], [1,0] or [1,1], however, the results barely differ from [0,0] because the values in the transformation matrix are always extremely small. It does seem that [1,0] at least points in the right direction, though. If I put [1000,0] in it, I get about 1/2 of the entire length of the gradient.

So just based on sight, I would say that the gradient would run from [-1000,0] to [1000,0]. But that's just an empirical estimation. If anyone's got a better estimation, or perhaps a reason why they did it this way, I'd love to know it.

Karel Crombecq
  • 21
  • 2