CanvasKit API misses "makeWithLocalMatrix" on Shader

23 views
Skip to first unread message

Micha

unread,
Jul 7, 2026, 10:01:00 AM (3 days ago) Jul 7
to skia-discuss
With Skia, we use a Gradient Shader (Linear or Radial) with a default extent of say 100 units. When it comes to drawing a given path, we use a local transformation matrix to make the shader's color gradient match the bounds of the path:

--------------- C++ / Skia

SkRect const pathBounds = path.getBounds();
SkScalar const pathWidth = pathBounds.width();
SkScalar const pathHeight = pathBounds.height();
SkMatrix matrix;
matrix.setScale(pathWidth / OriginalGradientDimension,  pathHeight / OriginalGradientDimension);
 matrix.postTranslate(pathBounds.fLeft, pathBounds.fTop);

 sk_sp<SkShader> transformedShader =
      gradientShader->makeWithLocalMatrix(matrix);
 mSkPaintFill->setShader(transformedShader);

// now draw the path

---------------
Since our app is cross-platform, we would like to do exactly the same with CanvasKit. However, there seems to be no "makeWithLocalMatrix" equivalent for constructing a shader from a given one with applying a local transformation matrix.

---------------- TypeScript / CanvasKit

// left, top, right bottom
const pathLeft = pathBounds[0];
const pathTop = pathBounds[1];
const pathWidth = pathBounds[2] - pathLeft;
const pathHeight = pathBounds[3] - pathTop;

const initialShaderExtent = initialShaderOpt.initialExtent;
let initialShader: Shader = initialShaderOpt.shader; // a gradient shader!

const scalingMatrix = this.canvasKit.M44.scaled([
          pathWidth / initialShaderExtent,
          pathHeight / initialShaderExtent,
          1.0,
]);
const translationMatrix = this.canvasKit.M44.translated([
pathLeft,
  pathTop,
  0,
  1
]);
const localTransformMatrix = this.canvasKit.M44.multiply(
translationMatrix,
  scalingMatrix
);
// fails!
shader = initialShader.makeWithLocalMatrix(localTransformationMatrix);

// now set the shader on Paint object and draw the path

--------------------

Since we draw many pathes, we do not consider it to be performant to reconstruct the basic gradient shader each time we draw a path. The gradient shader reflects a "drawing style" our app sets and which is then used to draw many, many paths.

Maybe I missed there is another way to do this?
If not, could you please add "makeWithLocalMatrix" to  SkShader bindings, please?

Note that it's not possible to transform the path itself. We only want to extend the color gradient to the extent of the path to be drawn.

Best regards
Michael.


Reply all
Reply to author
Forward
0 new messages