@shopify/react-native-skia 1.3.12 → 1.4.0

package/src/skia/__tests__/Shader.spec.ts

@@ -0,0 +1,96 @@
+import { width as size } from "../../renderer/__tests__/setup";
+import { processResult } from "../../__tests__/setup";
+import { TileMode } from "../types";
+import { BlendMode } from "../types/Paint/BlendMode";
+
+import { setupSkia } from "./setup";
+
+describe("Shader", () => {
+  it("Simple color interpolation", () => {
+    const { surface, canvas, Skia } = setupSkia();
+    const paint = Skia.Paint();
+    const source = Skia.RuntimeEffect.Make(`
+vec4 main(vec2 pos) {
+  // normalized x,y values go from 0 to 1, the canvas is 256x256
+  vec2 normalized = pos/vec2(256);
+  return vec4(normalized.x, normalized.y, 0.5, 1);
+}`)!;
+    paint.setShader(source.makeShader([]));
+    canvas.drawPaint(paint);
+    processResult(surface, "snapshots/shader/shader1.png");
+  });
+  it("Half circle to the right", () => {
+    const { surface, canvas, Skia, width } = setupSkia();
+    const paint = Skia.Paint();
+    const source = Skia.RuntimeEffect.Make(`
+uniform vec2 c;
+uniform float r;
+uniform float blue;
+  
+vec4 main(vec2 pos) {
+  vec2 normalized = pos/vec2(2 * r);
+  return distance(pos, c) > r ? vec4(1) : vec4(normalized, blue, 1);
+}`)!;
+    const r = width / 2;
+    paint.setShader(source.makeShader([2 * r, r, r, 1]));
+    canvas.drawPaint(paint);
+    processResult(surface, "snapshots/shader/shader2.png");
+  });
+
+  it("Sweep Gradient", () => {
+    const { surface, canvas, center, Skia } = setupSkia();
+    const paint = Skia.Paint();
+    const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"].map((c) =>
+      Skia.Color(c)
+    );
+    paint.setShader(
+      Skia.Shader.MakeSweepGradient(
+        center.x,
+        center.y,
+        colors,
+        null,
+        TileMode.Clamp,
+        null
+      )
+    );
+    canvas.drawPaint(paint);
+    processResult(surface, "snapshots/shader/sweep-gradient.png");
+  });
+
+  it("color blend shaders", () => {
+    const { surface, canvas, Skia } = setupSkia(size, size);
+    const r = size / 2;
+    const c = Skia.Point(r, r);
+    const paint = Skia.Paint();
+    const g3 = Skia.Shader.MakeRadialGradient(
+      c,
+      r,
+      ["magenta", "yellow"].map((cl) => Skia.Color(cl)),
+      null,
+      TileMode.Clamp
+    );
+    const g2 = Skia.Shader.MakeRadialGradient(
+      c,
+      r,
+      ["cyan", "magenta"].map((cl) => Skia.Color(cl)),
+      null,
+      TileMode.Clamp
+    );
+    const g1 = Skia.Shader.MakeRadialGradient(
+      c,
+      r,
+      ["yellow", "cyan"].map((cl) => Skia.Color(cl)),
+      null,
+      TileMode.Clamp
+    );
+    paint.setShader(
+      Skia.Shader.MakeBlend(
+        BlendMode.ColorBurn,
+        g1,
+        Skia.Shader.MakeBlend(BlendMode.ColorBurn, g2, g3)
+      )
+    );
+    canvas.drawPaint(paint);
+    processResult(surface, "snapshots/runtime-effects/blend-color-burn3.png");
+  });
+});

package/src/skia/__tests__/Text.spec.ts

@@ -0,0 +1,32 @@
+import { processResult } from "../../__tests__/setup";
+import { loadFont } from "../../renderer/__tests__/setup";
+
+import { setupSkia } from "./setup";
+
+describe("Text API", () => {
+  it("Hello world text", () => {
+    const { surface, canvas, Skia } = setupSkia();
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("#16161d"));
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf", 32);
+    canvas.drawColor(Skia.Color("white"));
+    canvas.drawText("Hello World", 64, 64, paint, font);
+    processResult(surface, "snapshots/drawings/hello-world.png");
+  });
+
+  it("can get the intercepts of glyphs", () => {
+    const { Skia } = setupSkia();
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
+
+    const ids = font.getGlyphIDs("I");
+    expect(ids.length).toEqual(1);
+
+    // aim for the middle of the I at 100 point, expecting a hit
+    let sects = font.getGlyphIntercepts(ids, [Skia.Point(0, 0)], -60, -40);
+    expect(sects.length).toEqual(2);
+
+    // aim below the baseline where we expect no intercepts
+    sects = font.getGlyphIntercepts(ids, [Skia.Point(0, 0)], 20, 30);
+    expect(sects.length).toEqual(0);
+  });
+});

package/src/skia/__tests__/Transform.spec.ts

@@ -0,0 +1,89 @@
+import fs from "fs";
+import path from "path";
+
+import { processResult } from "../../__tests__/setup";
+import type { SkCanvas } from "../types/Canvas";
+
+import { setupSkia } from "./setup";
+
+describe("Test transforms", () => {
+  it("Scale and rotate image", () => {
+    testImageTransform((canvas) => {
+      canvas.scale(0.75, 0.75);
+      canvas.rotate(-30, 0, 0);
+    }, "snapshots/transform/rotate.png");
+  });
+
+  it("Skew image", () => {
+    testImageTransform((canvas) => {
+      canvas.skew(-Math.PI / 6, 0);
+    }, "snapshots/transform/skew.png");
+  });
+
+  it("Scale image", () => {
+    testImageTransform((canvas) => {
+      canvas.scale(2, 1);
+    }, "snapshots/transform/scale.png");
+  });
+
+  it("4 scaled and translated rounded rectangles", () => {
+    const { canvas, surface, width, height, center, Skia } = setupSkia();
+    const paints = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"].map((color) => {
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color(color));
+      return paint;
+    });
+    const rect = Skia.RRectXY(Skia.XYWHRect(0, 0, width, height), 32, 32);
+    canvas.save();
+    canvas.scale(0.5, 0.5);
+    canvas.drawRRect(rect, paints[0]);
+    canvas.restore();
+    canvas.save();
+    canvas.translate(center.x, 0);
+    canvas.scale(0.5, 0.5);
+    canvas.drawRRect(rect, paints[1]);
+    canvas.restore();
+    canvas.save();
+    canvas.translate(0, center.y);
+    canvas.scale(0.5, 0.5);
+    canvas.drawRRect(rect, paints[2]);
+    canvas.restore();
+    canvas.save();
+    canvas.translate(center.x, center.y);
+    canvas.scale(0.5, 0.5);
+    canvas.drawRRect(rect, paints[3]);
+    canvas.restore();
+    processResult(surface, "snapshots/transform/rectangles.png");
+  });
+});
+
+const testImageTransform = (cb: (canvas: SkCanvas) => void, result: string) => {
+  const { canvas, surface, center, width, Skia } = setupSkia();
+  const aspectRatio = 836 / 1324;
+  const CARD_WIDTH = width - 64;
+  const CARD_HEIGHT = CARD_WIDTH * aspectRatio;
+  const rect = Skia.XYWHRect(
+    center.x - CARD_WIDTH / 2,
+    center.y - CARD_HEIGHT / 2,
+    CARD_WIDTH,
+    CARD_HEIGHT
+  );
+  const image = Skia.Image.MakeImageFromEncoded(
+    Skia.Data.fromBytes(
+      fs.readFileSync(path.resolve(__dirname, "./assets/card.png"))
+    )
+  )!;
+  const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
+  canvas.save();
+
+  //  we pivot on the center of the card
+  canvas.translate(center.x, center.y);
+  cb(canvas);
+  canvas.translate(-center.x, -center.y);
+
+  const paint = Skia.Paint();
+  canvas.drawImageRect(image, imgRect, rect, paint);
+  canvas.restore();
+
+  processResult(surface, result);
+};

package/src/skia/__tests__/Vertices.spec.ts

@@ -0,0 +1,40 @@
+import { processResult } from "../../__tests__/setup";
+import { BlendMode, VertexMode } from "../types";
+
+import { setupSkia } from "./setup";
+
+describe("Vertices", () => {
+  it("Billinear gradient", () => {
+    const { surface, canvas, width, Skia } = setupSkia();
+    const vertices = [
+      Skia.Point(0, 0),
+      Skia.Point(width, 0),
+      Skia.Point(width, width),
+      Skia.Point(0, width),
+    ];
+    const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"].map((c) =>
+      Skia.Color(c)
+    );
+    const triangle1 = [0, 1, 2];
+    const triangle2 = [0, 2, 3];
+    const indices = [...triangle1, ...triangle2];
+    const vertexMode = VertexMode.Triangles;
+    const vert = Skia.MakeVertices(
+      vertexMode,
+      vertices,
+      undefined,
+      colors,
+      indices
+    );
+    expect(vert.uniqueID()).toBe(vert.uniqueID());
+    const bounds = vert.bounds();
+    expect(bounds.x).toBe(0);
+    expect(bounds.y).toBe(0);
+    expect(bounds.width).toBe(width);
+    expect(bounds.height).toBe(width);
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("purple"));
+    canvas.drawVertices(vert, BlendMode.DstOver, paint);
+    processResult(surface, "snapshots/vertices/billinear-gradient.png");
+  });
+});