The API has changed, when the setColorTransform({})
method was deprecated in favor of the .setAttribute('colortransform', {})
. Instead of ra
or rb
the property keys are now redMultiplier
, redOffset
. See the corresponding doc sections quoted below.
Another change in the API is the values. Quoting the documentation for setColorTransform()
:
The dictionary has the following possible keys: o.ra: percentage alpha for red component (-100 to 100); o.rb: offset for red component (-255 to 255); o.ga: percentage alpha for green component (-100 to 100); o.gb: offset for green component (-255 to 255); o.ba: percentage alpha for blue component (-100 to 100); o.bb: offset for blue component (-255 to 255); o.aa: percentage overall alpha (-100 to 100); o.ab: overall offset (-255 to 255);
Compare that with the documentation of a view's colortransform
attribute:
The dictionary has the following possible keys: o.redMultiplier: multiplier for red component (0 to 1) defaults to 1 o.redOffset: offset for red component (-255 to 255) defaults to 0 o.greenMultiplier: multiplier for green component (0 to 1) defaults to 1 o.greenOffset: offset for green component (-255 to 255) defaults to 0 o.blueMultiplier: multiplier for blue component (0 to 1) defaults to 1 o.blueOffset: offset for blue component (-255 to 255) defaults to 0 o.alphaMultiplier: multiplier for alpha component (0 to 1) defaults to 1 o.alphaOffset: offset for alpha component (-255 to 255) defaults to 0
As you can see from the docs, the value range for the alpha offset changed from -100 to 100
to 0 to 1
. The following syntax works when you use setAttribute
:
var transformValues =
{redMultiplier: 0 to 1, redOffset: -255 to 255,
greenMultiplier: 0 to 1, greenOffset: -255 to 255,
blueMultiplier: 0 to 1, blueOffset: -255 to 255,
alphaMultiplier: 0 to 1, alphaOffset: -255 to 255}
this.setAttribute('colortransform', transformValues);