#Shader — factories

CK.Shader is a namespace of factories that build Shader objects. A shader provides per-pixel color for a paint — install with paint.setShader(shader) and paint.setColor is ignored. Shaders cover gradients, sampled images, runtime SkSL, and combinations of the above.

Caller deletes via shader.delete() when no paint or chain references it.

#Linear gradient

MakeLinearGradient(start, end, colors, pos?, mode, localMatrix?, flags?) — colors interpolate along the line from start to end. pos distributes them; null spaces evenly.

const grad = CK.Shader.MakeLinearGradient(
  [60, 0], [360, 0],
  [CK.Color(40, 90, 180, 1), CK.Color(220, 60, 60, 1), CK.Color(60, 200, 130, 1)],
  null,
  CK.TileMode.Clamp
);

const paint = new CK.Paint();
paint.setShader(grad);

const r = CK.RRectXY(CK.LTRBRect(60, 30, 360, 220), 18, 18);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawRRect(r, paint);
  surface.flush();
});

#Radial gradient

MakeRadialGradient(center, radius, colors, pos?, mode, ...) — concentric rings.

const grad = CK.Shader.MakeRadialGradient(
  [210, 128], 130,
  [CK.Color(255, 220, 120, 1), CK.Color(220, 60, 60, 1), CK.Color(40, 30, 60, 1)],
  null,
  CK.TileMode.Clamp
);

const paint = new CK.Paint();
paint.setShader(grad);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawRect(CK.LTRBRect(0, 0, 420, 256), paint);
  surface.flush();
});

#Sweep gradient

MakeSweepGradient(cx, cy, colors, pos?, mode?, flags?, startAngle?, endAngle?, localMatrix?) — gradient that sweeps around a center point.

const grad = CK.Shader.MakeSweepGradient(
  210, 128,
  [CK.Color(220, 60, 60, 1), CK.Color(60, 200, 130, 1),
   CK.Color(40, 90, 180, 1), CK.Color(220, 60, 60, 1)],
  null
);

const paint = new CK.Paint();
paint.setShader(grad);

loop(() => {
  canvas.clear(CK.WHITE);
  canvas.drawCircle(210, 128, 110, paint);
  surface.flush();
});

#Two-point conical

MakeTwoPointConicalGradient — interpolate between two circles. Lets you build perspective-style gradients.

#Color shader

MakeColor(color, colorSpace?) — a constant-color shader. Mostly useful as a slot in MakeBlend when you need one side to be a uniform color.

const flat = CK.Shader.MakeColor(CK.Color(220, 60, 60, 1), null);

const paint = new CK.Paint();
paint.setShader(flat);

canvas.clear(CK.WHITE);
canvas.drawRect(CK.LTRBRect(60, 30, 360, 220), paint);
surface.flush();

#MakeBlend

MakeBlend(mode, dst, src) — combine two shaders via a BlendMode.

Error: Line 1: Unexpected identifier

#All factories

#See also

• Paint.setShader — install on a paint.
• Image.makeShaderOptions — image-as-shader.
• RuntimeEffect — author your own SkSL shader.
• BlendMode, TileMode.