2d6334988b
Bug: skia:11099 Change-Id: Ia019bd5107d5646d6e314876610ecdeb37004e36 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/345277 Reviewed-by: Mike Reed <reed@google.com>
966 lines
36 KiB
JavaScript
966 lines
36 KiB
JavaScript
describe('Canvas Behavior', () => {
|
|
let container;
|
|
|
|
beforeEach(async () => {
|
|
await LoadCanvasKit;
|
|
container = document.createElement('div');
|
|
container.innerHTML = `
|
|
<canvas width=600 height=600 id=test></canvas>
|
|
<canvas width=600 height=600 id=report></canvas>`;
|
|
document.body.appendChild(container);
|
|
});
|
|
|
|
afterEach(() => {
|
|
document.body.removeChild(container);
|
|
});
|
|
|
|
gm('canvas_api_example', (canvas) => {
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setStrokeWidth(2.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
|
|
canvas.drawLine(3, 10, 30, 15, paint);
|
|
const rrect = CanvasKit.RRectXY([5, 35, 45, 80], 15, 10);
|
|
canvas.drawRRect(rrect, paint);
|
|
|
|
canvas.drawOval(CanvasKit.LTRBRect(5, 35, 45, 80), paint);
|
|
|
|
canvas.drawArc(CanvasKit.LTRBRect(55, 35, 95, 80), 15, 270, true, paint);
|
|
|
|
const font = new CanvasKit.Font(null, 20);
|
|
canvas.drawText('this is ascii text', 5, 100, paint, font);
|
|
|
|
const blob = CanvasKit.TextBlob.MakeFromText('Unicode chars 💩 é É ص', font);
|
|
canvas.drawTextBlob(blob, 5, 130, paint);
|
|
|
|
font.delete();
|
|
blob.delete();
|
|
paint.delete();
|
|
// See canvas2d for more API tests
|
|
});
|
|
|
|
gm('effect_and_text_example', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
const textPaint = new CanvasKit.Paint();
|
|
textPaint.setColor(CanvasKit.Color(40, 0, 0, 1.0));
|
|
textPaint.setAntiAlias(true);
|
|
|
|
const textFont = new CanvasKit.Font(null, 30);
|
|
|
|
const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], 1);
|
|
|
|
paint.setPathEffect(dpe);
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(5.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
|
|
|
|
canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
|
|
|
|
canvas.drawPath(path, paint);
|
|
canvas.drawText('This is text', 10, 280, textPaint, textFont);
|
|
|
|
dpe.delete();
|
|
path.delete();
|
|
paint.delete();
|
|
textFont.delete();
|
|
textPaint.delete();
|
|
});
|
|
|
|
gm('patheffects_canvas', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const path = starPath(CanvasKit, 100, 100, 100);
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
const cornerEffect = CanvasKit.PathEffect.MakeCorner(10);
|
|
const discreteEffect = CanvasKit.PathEffect.MakeDiscrete(5, 10, 0);
|
|
|
|
paint.setPathEffect(cornerEffect);
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(5.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
|
|
canvas.drawPath(path, paint);
|
|
|
|
canvas.translate(200, 0);
|
|
|
|
paint.setPathEffect(discreteEffect);
|
|
canvas.drawPath(path, paint);
|
|
|
|
cornerEffect.delete();
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
it('returns the depth of the save state stack', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
expect(canvas.getSaveCount()).toEqual(1);
|
|
canvas.save();
|
|
canvas.save();
|
|
canvas.restore();
|
|
canvas.save();
|
|
canvas.save();
|
|
expect(canvas.getSaveCount()).toEqual(4);
|
|
// does nothing, by the SkCanvas API
|
|
canvas.restoreToCount(500);
|
|
expect(canvas.getSaveCount()).toEqual(4);
|
|
canvas.restore();
|
|
expect(canvas.getSaveCount()).toEqual(3);
|
|
canvas.save();
|
|
canvas.restoreToCount(2);
|
|
expect(canvas.getSaveCount()).toEqual(2);
|
|
});
|
|
|
|
gm('circle_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(5.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.CYAN);
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
canvas.drawCircle(30, 50, 15, paint);
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Fill);
|
|
paint.setColor(CanvasKit.RED);
|
|
canvas.drawCircle(130, 80, 60, paint);
|
|
canvas.drawCircle(20, 150, 60, paint);
|
|
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('rrect_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(3.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.BLACK);
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
canvas.drawRRect(CanvasKit.RRectXY(
|
|
CanvasKit.LTRBRect(10, 10, 50, 50), 5, 10), paint);
|
|
|
|
canvas.drawRRect(CanvasKit.RRectXY(
|
|
CanvasKit.LTRBRect(60, 10, 110, 50), 10, 5), paint);
|
|
|
|
canvas.drawRRect(CanvasKit.RRectXY(
|
|
CanvasKit.LTRBRect(10, 60, 210, 260), 0, 30), paint);
|
|
|
|
canvas.drawRRect(CanvasKit.RRectXY(
|
|
CanvasKit.LTRBRect(50, 90, 160, 210), 30, 30), paint);
|
|
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('rrect_8corners_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(3.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.BLACK);
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
canvas.drawRRect([10, 10, 210, 210,
|
|
// top left corner, going clockwise
|
|
10, 30,
|
|
30, 10,
|
|
50, 75,
|
|
120, 120,
|
|
], paint);
|
|
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
// As above, except with the array passed in via malloc'd memory.
|
|
gm('rrect_8corners_malloc_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(3.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.BLACK);
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
const rrect = CanvasKit.Malloc(Float32Array, 12);
|
|
rrect.toTypedArray().set([10, 10, 210, 210,
|
|
// top left corner, going clockwise
|
|
10, 30,
|
|
30, 10,
|
|
50, 75,
|
|
120, 120,
|
|
]);
|
|
|
|
canvas.drawRRect(rrect, paint);
|
|
|
|
CanvasKit.Free(rrect);
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('drawDRRect_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Fill);
|
|
paint.setStrokeWidth(3.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.BLACK);
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
const outer = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 10, 5);
|
|
const inner = CanvasKit.RRectXY(CanvasKit.LTRBRect(50, 90, 160, 210), 30, 30);
|
|
|
|
canvas.drawDRRect(outer, inner, paint);
|
|
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('colorfilters_canvas', (canvas) => {
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
const blue = CanvasKit.ColorFilter.MakeBlend(
|
|
CanvasKit.BLUE, CanvasKit.BlendMode.SrcIn);
|
|
const red = CanvasKit.ColorFilter.MakeBlend(
|
|
CanvasKit.Color(255, 0, 0, 0.8), CanvasKit.BlendMode.SrcOver);
|
|
const lerp = CanvasKit.ColorFilter.MakeLerp(0.6, red, blue);
|
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Fill);
|
|
paint.setAntiAlias(true);
|
|
|
|
canvas.clear(CanvasKit.Color(230, 230, 230));
|
|
|
|
paint.setColorFilter(blue)
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 10, 60, 60), paint);
|
|
paint.setColorFilter(lerp)
|
|
canvas.drawRect(CanvasKit.LTRBRect(50, 10, 100, 60), paint);
|
|
paint.setColorFilter(red)
|
|
canvas.drawRect4f(90, 10, 140, 60, paint);
|
|
|
|
const r = CanvasKit.ColorMatrix.rotated(0, .707, -.707);
|
|
const b = CanvasKit.ColorMatrix.rotated(2, .5, .866);
|
|
const s = CanvasKit.ColorMatrix.scaled(0.9, 1.5, 0.8, 0.8);
|
|
let cm = CanvasKit.ColorMatrix.concat(r, s);
|
|
cm = CanvasKit.ColorMatrix.concat(cm, b);
|
|
CanvasKit.ColorMatrix.postTranslate(cm, 20, 0, -10, 0);
|
|
|
|
const mat = CanvasKit.ColorFilter.MakeMatrix(cm);
|
|
const final = CanvasKit.ColorFilter.MakeCompose(mat, lerp);
|
|
|
|
paint.setColorFilter(final)
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 70, 140, 120), paint);
|
|
|
|
paint.delete();
|
|
blue.delete();
|
|
red.delete();
|
|
lerp.delete();
|
|
final.delete();
|
|
});
|
|
|
|
gm('blendmodes_canvas', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
const blendModeNames = Object.keys(CanvasKit.BlendMode).filter((key) => key !== 'values');
|
|
|
|
const PASTEL_MUSTARD_YELLOW = CanvasKit.Color(248, 213, 85, 1.0);
|
|
const PASTEL_SKY_BLUE = CanvasKit.Color(74, 174, 245, 1.0);
|
|
|
|
const shapePaint = new CanvasKit.Paint();
|
|
shapePaint.setColor(PASTEL_MUSTARD_YELLOW);
|
|
shapePaint.setAntiAlias(true);
|
|
|
|
const textPaint = new CanvasKit.Paint();
|
|
textPaint.setAntiAlias(true);
|
|
|
|
const textFont = new CanvasKit.Font(null, 10);
|
|
|
|
let x = 10;
|
|
let y = 20;
|
|
for (const blendModeName of blendModeNames) {
|
|
// Draw a checkerboard for each blend mode.
|
|
// Each checkerboard is labelled with a blendmode's name.
|
|
canvas.drawText(blendModeName, x, y - 5, textPaint, textFont);
|
|
drawCheckerboard(canvas, x, y, x + 80, y + 80);
|
|
|
|
// A blue square is drawn on to each checkerboard with yellow circle.
|
|
// In each checkerboard the blue square is drawn using a different blendmode.
|
|
const blendMode = CanvasKit.BlendMode[blendModeName];
|
|
canvas.drawOval(CanvasKit.LTRBRect(x + 5, y + 5, x + 55, y + 55), shapePaint);
|
|
drawRectangle(x + 30, y + 30, x + 70, y + 70, PASTEL_SKY_BLUE, blendMode);
|
|
|
|
x += 90;
|
|
if (x > 500) {
|
|
x = 10;
|
|
y += 110;
|
|
}
|
|
}
|
|
|
|
function drawCheckerboard(canvas, x1, y1, x2, y2) {
|
|
const CHECKERBOARD_SQUARE_SIZE = 5;
|
|
const GREY = CanvasKit.Color(220, 220, 220, 0.5);
|
|
// Draw black border and white background for checkerboard
|
|
drawRectangle(x1-1, y1-1, x2+1, y2+1, CanvasKit.BLACK);
|
|
drawRectangle(x1, y1, x2, y2, CanvasKit.WHITE);
|
|
|
|
// Draw checkerboard squares
|
|
const numberOfColumns = (x2 - x1) / CHECKERBOARD_SQUARE_SIZE;
|
|
const numberOfRows = (y2 - y1) / CHECKERBOARD_SQUARE_SIZE
|
|
|
|
for (let row = 0; row < numberOfRows; row++) {
|
|
for (let column = 0; column < numberOfColumns; column++) {
|
|
const rowIsEven = row % 2 === 0;
|
|
const columnIsEven = column % 2 === 0;
|
|
|
|
if ((rowIsEven && !columnIsEven) || (!rowIsEven && columnIsEven)) {
|
|
drawRectangle(
|
|
x1 + CHECKERBOARD_SQUARE_SIZE * row,
|
|
y1 + CHECKERBOARD_SQUARE_SIZE * column,
|
|
Math.min(x1 + CHECKERBOARD_SQUARE_SIZE * row + CHECKERBOARD_SQUARE_SIZE, x2),
|
|
Math.min(y1 + CHECKERBOARD_SQUARE_SIZE * column + CHECKERBOARD_SQUARE_SIZE, y2),
|
|
GREY
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function drawRectangle(x1, y1, x2, y2, color, blendMode=CanvasKit.BlendMode.srcOver) {
|
|
canvas.save();
|
|
canvas.clipRect(CanvasKit.LTRBRect(x1, y1, x2, y2), CanvasKit.ClipOp.Intersect, true);
|
|
canvas.drawColor(color, blendMode);
|
|
canvas.restore();
|
|
}
|
|
});
|
|
|
|
gm('colorfilters_malloc_canvas', (canvas) => {
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
const src = [
|
|
0.8, 0.45, 2, 0, 20,
|
|
0.53, -0.918, 0.566, 0, 0,
|
|
0.53, -0.918, -0.566, 0, -10,
|
|
0, 0, 0, 0.8, 0,
|
|
]
|
|
const colorObj = new CanvasKit.Malloc(Float32Array, 20);
|
|
const cm = colorObj.toTypedArray();
|
|
for (i in src) {
|
|
cm[i] = src[i];
|
|
}
|
|
// MakeMatrix will free the malloc'd array when it is done with it.
|
|
const final = CanvasKit.ColorFilter.MakeMatrix(cm);
|
|
|
|
paint.setColorFilter(final)
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 70, 140, 120), paint);
|
|
|
|
CanvasKit.Free(colorObj);
|
|
paint.delete();
|
|
final.delete();
|
|
});
|
|
|
|
gm('clips_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit);
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setColor(CanvasKit.BLUE);
|
|
const rrect = CanvasKit.RRectXY(CanvasKit.LTRBRect(300, 300, 500, 500), 40, 40);
|
|
|
|
canvas.save();
|
|
// draw magenta around the outside edge of an rrect.
|
|
canvas.clipRRect(rrect, CanvasKit.ClipOp.Difference, true);
|
|
canvas.drawColorComponents(250/255, 30/255, 240/255, 0.9, CanvasKit.BlendMode.SrcOver);
|
|
canvas.restore();
|
|
|
|
// draw grey inside of a star pattern, then the blue star on top
|
|
canvas.clipPath(path, CanvasKit.ClipOp.Intersect, false);
|
|
canvas.drawColorInt(CanvasKit.ColorAsInt(200, 200, 200, 255), CanvasKit.BlendMode.SrcOver);
|
|
canvas.drawPath(path, paint);
|
|
|
|
path.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
// inspired by https://fiddle.skia.org/c/feb2a08bb09ede5309678d6a0ab3f981
|
|
gm('savelayer_rect_paint_canvas', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const redPaint = new CanvasKit.Paint();
|
|
redPaint.setColor(CanvasKit.RED);
|
|
const solidBluePaint = new CanvasKit.Paint();
|
|
solidBluePaint.setColor(CanvasKit.BLUE);
|
|
|
|
const thirtyBluePaint = new CanvasKit.Paint();
|
|
thirtyBluePaint.setColor(CanvasKit.BLUE);
|
|
thirtyBluePaint.setAlphaf(0.3);
|
|
|
|
const alpha = new CanvasKit.Paint();
|
|
alpha.setAlphaf(0.3);
|
|
|
|
// Draw 4 solid red rectangles on the 0th layer.
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 10, 60, 60), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 10, 200, 60), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 70, 60, 120), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 70, 200, 120), redPaint);
|
|
|
|
// Draw 2 blue rectangles that overlap. One is solid, the other
|
|
// is 30% transparent. We should see purple from the right one,
|
|
// the left one overlaps the red because it is opaque.
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 10, 80, 60), solidBluePaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 10, 220, 60), thirtyBluePaint);
|
|
|
|
// Save a new layer. When the 1st layer gets merged onto the
|
|
// 0th layer (i.e. when restore() is called), it will use the provided
|
|
// paint to do so. The provided paint is set to have 30% opacity, but
|
|
// it could also have things set like blend modes or image filters.
|
|
// The rectangle is just a hint, so I've set it to be the area that
|
|
// we actually draw in before restore is called. It could also be omitted,
|
|
// see the test below.
|
|
canvas.saveLayer(alpha, CanvasKit.LTRBRect(10, 10, 220, 180));
|
|
|
|
// Draw the same blue overlapping rectangles as before. Notice in the
|
|
// final output, we have two different shades of purple instead of the
|
|
// solid blue overwriting the red. This proves the opacity was applied.
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 70, 80, 120), solidBluePaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 70, 220, 120), thirtyBluePaint);
|
|
|
|
// We draw two more sets of overlapping red and blue rectangles. Notice
|
|
// the solid blue overwrites the red. This proves that the opacity from
|
|
// the alpha paint isn't available when the drawing happens - it only
|
|
// matters when restore() is called.
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 130, 60, 180), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 130, 80, 180), solidBluePaint);
|
|
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 130, 200, 180), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 130, 220, 180), thirtyBluePaint);
|
|
|
|
canvas.restore();
|
|
|
|
redPaint.delete();
|
|
solidBluePaint.delete();
|
|
thirtyBluePaint.delete();
|
|
alpha.delete();
|
|
});
|
|
|
|
// identical to the test above, except the save layer only has the paint, not
|
|
// the rectangle.
|
|
gm('savelayer_paint_canvas', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const redPaint = new CanvasKit.Paint();
|
|
redPaint.setColor(CanvasKit.RED);
|
|
const solidBluePaint = new CanvasKit.Paint();
|
|
solidBluePaint.setColor(CanvasKit.BLUE);
|
|
|
|
const thirtyBluePaint = new CanvasKit.Paint();
|
|
thirtyBluePaint.setColor(CanvasKit.BLUE);
|
|
thirtyBluePaint.setAlphaf(0.3);
|
|
|
|
const alpha = new CanvasKit.Paint();
|
|
alpha.setAlphaf(0.3);
|
|
|
|
// Draw 4 solid red rectangles on the 0th layer.
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 10, 60, 60), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 10, 200, 60), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 70, 60, 120), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 70, 200, 120), redPaint);
|
|
|
|
// Draw 2 blue rectangles that overlap. One is solid, the other
|
|
// is 30% transparent. We should see purple from the right one,
|
|
// the left one overlaps the red because it is opaque.
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 10, 80, 60), solidBluePaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 10, 220, 60), thirtyBluePaint);
|
|
|
|
// Save a new layer. When the 1st layer gets merged onto the
|
|
// 0th layer (i.e. when restore() is called), it will use the provided
|
|
// paint to do so. The provided paint is set to have 30% opacity, but
|
|
// it could also have things set like blend modes or image filters.
|
|
canvas.saveLayerPaint(alpha);
|
|
|
|
// Draw the same blue overlapping rectangles as before. Notice in the
|
|
// final output, we have two different shades of purple instead of the
|
|
// solid blue overwriting the red. This proves the opacity was applied.
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 70, 80, 120), solidBluePaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 70, 220, 120), thirtyBluePaint);
|
|
|
|
// We draw two more sets of overlapping red and blue rectangles. Notice
|
|
// the solid blue overwrites the red. This proves that the opacity from
|
|
// the alpha paint isn't available when the drawing happens - it only
|
|
// matters when restore() is called.
|
|
canvas.drawRect(CanvasKit.LTRBRect(10, 130, 60, 180), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(30, 130, 80, 180), solidBluePaint);
|
|
|
|
canvas.drawRect(CanvasKit.LTRBRect(150, 130, 200, 180), redPaint);
|
|
canvas.drawRect(CanvasKit.LTRBRect(170, 130, 220, 180), thirtyBluePaint);
|
|
|
|
canvas.restore();
|
|
|
|
redPaint.delete();
|
|
solidBluePaint.delete();
|
|
thirtyBluePaint.delete();
|
|
alpha.delete();
|
|
});
|
|
|
|
gm('savelayerrec_canvas', (canvas) => {
|
|
// Note: fiddle.skia.org quietly draws a white background before doing
|
|
// other things, which is noticed in cases like this where we use saveLayer
|
|
// with the rec struct.
|
|
canvas.clear(CanvasKit.WHITE);
|
|
canvas.scale(8, 8);
|
|
const redPaint = new CanvasKit.Paint();
|
|
redPaint.setColor(CanvasKit.RED);
|
|
redPaint.setAntiAlias(true);
|
|
canvas.drawCircle(21, 21, 8, redPaint);
|
|
|
|
const bluePaint = new CanvasKit.Paint();
|
|
bluePaint.setColor(CanvasKit.BLUE);
|
|
canvas.drawCircle(31, 21, 8, bluePaint);
|
|
|
|
const blurIF = CanvasKit.ImageFilter.MakeBlur(8, 0.2, CanvasKit.TileMode.Decal, null);
|
|
|
|
const count = canvas.saveLayer(null, null, blurIF, 0);
|
|
expect(count).toEqual(1);
|
|
canvas.scale(1/4, 1/4);
|
|
canvas.drawCircle(125, 85, 8, redPaint);
|
|
canvas.restore();
|
|
|
|
blurIF.delete();
|
|
redPaint.delete();
|
|
bluePaint.delete();
|
|
});
|
|
|
|
gm('drawpoints_canvas', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(10);
|
|
paint.setColor(CanvasKit.Color(153, 204, 162, 0.82));
|
|
|
|
const points = [32, 16, 48, 48, 16, 32];
|
|
|
|
const caps = [CanvasKit.StrokeCap.Round, CanvasKit.StrokeCap.Square,
|
|
CanvasKit.StrokeCap.Butt];
|
|
const joins = [CanvasKit.StrokeJoin.Round, CanvasKit.StrokeJoin.Miter,
|
|
CanvasKit.StrokeJoin.Bevel];
|
|
const modes = [CanvasKit.PointMode.Points, CanvasKit.PointMode.Lines,
|
|
CanvasKit.PointMode.Polygon];
|
|
|
|
for (let i = 0; i < caps.length; i++) {
|
|
paint.setStrokeCap(caps[i]);
|
|
paint.setStrokeJoin(joins[i]);
|
|
|
|
for (const m of modes) {
|
|
canvas.drawPoints(m, points, paint);
|
|
canvas.translate(64, 0);
|
|
}
|
|
// Try with the malloc approach. Note that the drawPoints
|
|
// will free the pointer when done.
|
|
const mPointsObj = CanvasKit.Malloc(Float32Array, 3*2);
|
|
const mPoints = mPointsObj.toTypedArray();
|
|
mPoints.set([32, 16, 48, 48, 16, 32]);
|
|
|
|
// The obj from Malloc can be passed in instead of the typed array.
|
|
canvas.drawPoints(CanvasKit.PointMode.Polygon, mPointsObj, paint);
|
|
canvas.translate(-192, 64);
|
|
CanvasKit.Free(mPointsObj);
|
|
}
|
|
|
|
paint.delete();
|
|
});
|
|
|
|
gm('drawPoints in different modes', (canvas) => {
|
|
canvas.clear(CanvasKit.WHITE);
|
|
// From https://bugs.chromium.org/p/skia/issues/detail?id=11012
|
|
const boxPaint = new CanvasKit.Paint();
|
|
boxPaint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
boxPaint.setStrokeWidth(1);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(5);
|
|
paint.setStrokeCap(CanvasKit.StrokeCap.Round);
|
|
paint.setColorInt(0xFF0000FF); // Blue
|
|
paint.setAntiAlias(true);
|
|
|
|
const points = Float32Array.of(40, 40, 80, 40, 120, 80, 160, 80);
|
|
|
|
canvas.drawRect(CanvasKit.LTRBRect(35, 35, 165, 85), boxPaint);
|
|
canvas.drawPoints(CanvasKit.PointMode.Points, points, paint);
|
|
|
|
canvas.translate(0, 50);
|
|
canvas.drawRect(CanvasKit.LTRBRect(35, 35, 165, 85), boxPaint);
|
|
canvas.drawPoints(CanvasKit.PointMode.Lines, points, paint);
|
|
|
|
canvas.translate(0, 50);
|
|
canvas.drawRect(CanvasKit.LTRBRect(35, 35, 165, 85), boxPaint);
|
|
canvas.drawPoints(CanvasKit.PointMode.Polygon, points, paint);
|
|
|
|
// The control version using drawPath
|
|
canvas.translate(0, 50);
|
|
canvas.drawRect(CanvasKit.LTRBRect(35, 35, 165, 85), boxPaint);
|
|
const path = new CanvasKit.Path();
|
|
path.moveTo(40, 40);
|
|
path.lineTo(80, 40);
|
|
path.lineTo(120, 80);
|
|
path.lineTo(160, 80);
|
|
paint.setColorInt(0xFFFF0000); // RED
|
|
canvas.drawPath(path, paint);
|
|
|
|
paint.delete();
|
|
path.delete();
|
|
boxPaint.delete();
|
|
});
|
|
|
|
gm('drawImageNine_canvas', (canvas, fetchedByteBuffers) => {
|
|
const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
|
|
expect(img).toBeTruthy();
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
canvas.drawImageNine(img, CanvasKit.LTRBiRect(40, 40, 400, 300),
|
|
CanvasKit.LTRBRect(5, 5, 300, 650), CanvasKit.FilterMode.Nearest, paint);
|
|
paint.delete();
|
|
img.delete();
|
|
}, '/assets/mandrill_512.png');
|
|
|
|
// This should be a nice, clear image.
|
|
gm('makeImageShaderCubic_canvas', (canvas, fetchedByteBuffers) => {
|
|
const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
|
|
expect(img).toBeTruthy();
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const paint = new CanvasKit.Paint();
|
|
const shader = img.makeShaderCubic(CanvasKit.TileMode.Decal, CanvasKit.TileMode.Clamp,
|
|
1/3 /*B*/, 1/3 /*C*/,
|
|
CanvasKit.Matrix.rotated(0.1));
|
|
paint.setShader(shader);
|
|
|
|
canvas.drawPaint(paint);
|
|
paint.delete();
|
|
shader.delete();
|
|
img.delete();
|
|
}, '/assets/mandrill_512.png');
|
|
|
|
// This will look more blocky than the version above.
|
|
gm('makeImageShaderOptions_canvas', (canvas, fetchedByteBuffers) => {
|
|
const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
|
|
expect(img).toBeTruthy();
|
|
const imgWithMipMap = img.makeCopyWithDefaultMipmaps();
|
|
|
|
canvas.clear(CanvasKit.WHITE);
|
|
const paint = new CanvasKit.Paint();
|
|
const shader = imgWithMipMap.makeShaderOptions(CanvasKit.TileMode.Decal,
|
|
CanvasKit.TileMode.Clamp,
|
|
CanvasKit.FilterMode.Nearest,
|
|
CanvasKit.MipmapMode.Linear,
|
|
CanvasKit.Matrix.rotated(0.1));
|
|
paint.setShader(shader);
|
|
|
|
canvas.drawPaint(paint);
|
|
paint.delete();
|
|
shader.delete();
|
|
img.delete();
|
|
imgWithMipMap.delete();
|
|
}, '/assets/mandrill_512.png');
|
|
|
|
gm('drawvertices_canvas', (canvas) => {
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
|
|
const points = [0, 0, 250, 0, 100, 100, 0, 250];
|
|
// 2d float color array
|
|
const colors = [CanvasKit.RED, CanvasKit.BLUE,
|
|
CanvasKit.YELLOW, CanvasKit.CYAN];
|
|
const vertices = CanvasKit.MakeVertices(CanvasKit.VertexMode.TriangleFan,
|
|
points, null /*textureCoordinates*/, colors, false /*isVolatile*/);
|
|
|
|
const bounds = vertices.bounds();
|
|
expect(bounds).toEqual(CanvasKit.LTRBRect(0, 0, 250, 250));
|
|
|
|
canvas.drawVertices(vertices, CanvasKit.BlendMode.Src, paint);
|
|
vertices.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('drawvertices_canvas_flat_floats', (canvas) => {
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
|
|
const points = [0, 0, 250, 0, 100, 100, 0, 250];
|
|
// 1d float color array
|
|
const colors = Float32Array.of(...CanvasKit.RED, ...CanvasKit.BLUE,
|
|
...CanvasKit.YELLOW, ...CanvasKit.CYAN);
|
|
const vertices = CanvasKit.MakeVertices(CanvasKit.VertexMode.TriangleFan,
|
|
points, null /*textureCoordinates*/, colors, false /*isVolatile*/);
|
|
|
|
const bounds = vertices.bounds();
|
|
expect(bounds).toEqual(CanvasKit.LTRBRect(0, 0, 250, 250));
|
|
|
|
canvas.drawVertices(vertices, CanvasKit.BlendMode.Src, paint);
|
|
vertices.delete();
|
|
paint.delete();
|
|
});
|
|
|
|
gm('drawvertices_texture_canvas', (canvas, fetchedByteBuffers) => {
|
|
const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
|
|
const points = [
|
|
70, 170, 40, 90, 130, 150, 100, 50,
|
|
225, 150, 225, 60, 310, 180, 330, 100,
|
|
];
|
|
const textureCoordinates = [
|
|
0, 240, 0, 0, 80, 240, 80, 0,
|
|
160, 240, 160, 0, 240, 240, 240, 0,
|
|
];
|
|
const vertices = CanvasKit.MakeVertices(CanvasKit.VertexMode.TrianglesStrip,
|
|
points, textureCoordinates, null /* colors */, false /*isVolatile*/);
|
|
|
|
const shader = img.makeShaderCubic(CanvasKit.TileMode.Repeat, CanvasKit.TileMode.Mirror,
|
|
1/3 /*B*/, 1/3 /*C*/,);
|
|
paint.setShader(shader);
|
|
canvas.drawVertices(vertices, CanvasKit.BlendMode.Src, paint);
|
|
|
|
shader.delete();
|
|
vertices.delete();
|
|
paint.delete();
|
|
img.delete();
|
|
}, '/assets/brickwork-texture.jpg');
|
|
|
|
it('can change the 3x3 matrix on the canvas and read it back', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
|
|
let matr = canvas.getTotalMatrix();
|
|
expect(matr).toEqual(CanvasKit.Matrix.identity());
|
|
|
|
// This fills the internal _scratch4x4MatrixPtr with garbage (aka sentinel) values to
|
|
// make sure the 3x3 matrix properly sets these to 0 when it uses the same buffer.
|
|
canvas.save();
|
|
const garbageMatrix = new Float32Array(16);
|
|
garbageMatrix.fill(-3);
|
|
canvas.concat(garbageMatrix);
|
|
canvas.restore();
|
|
|
|
canvas.concat(CanvasKit.Matrix.rotated(Math.PI/4));
|
|
const d = new DOMMatrix().translate(20, 10);
|
|
canvas.concat(d);
|
|
|
|
matr = canvas.getTotalMatrix();
|
|
const expected = CanvasKit.Matrix.multiply(
|
|
CanvasKit.Matrix.rotated(Math.PI/4),
|
|
CanvasKit.Matrix.translated(20, 10)
|
|
);
|
|
expect3x3MatricesToMatch(expected, matr);
|
|
|
|
// The 3x3 should be expanded into a 4x4, with 0s in the 3rd row and column.
|
|
matr = canvas.getLocalToDevice();
|
|
expect4x4MatricesToMatch([
|
|
0.707106, -0.707106, 0, 7.071067,
|
|
0.707106, 0.707106, 0, 21.213203,
|
|
0 , 0 , 0, 0 ,
|
|
0 , 0 , 0, 1 ], matr);
|
|
});
|
|
|
|
it('can accept a 3x2 matrix', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
|
|
let matr = canvas.getTotalMatrix();
|
|
expect(matr).toEqual(CanvasKit.Matrix.identity());
|
|
|
|
// This fills the internal _scratch4x4MatrixPtr with garbage (aka sentinel) values to
|
|
// make sure the 3x2 matrix properly sets these to 0 when it uses the same buffer.
|
|
canvas.save();
|
|
const garbageMatrix = new Float32Array(16);
|
|
garbageMatrix.fill(-3);
|
|
canvas.concat(garbageMatrix);
|
|
canvas.restore();
|
|
|
|
canvas.concat([1.4, -0.2, 12,
|
|
0.2, 1.4, 24]);
|
|
|
|
matr = canvas.getTotalMatrix();
|
|
const expected = [1.4, -0.2, 12,
|
|
0.2, 1.4, 24,
|
|
0, 0, 1];
|
|
expect3x3MatricesToMatch(expected, matr);
|
|
|
|
// The 3x2 should be expanded into a 4x4, with 0s in the 3rd row and column
|
|
// and the perspective filled in.
|
|
matr = canvas.getLocalToDevice();
|
|
expect4x4MatricesToMatch([
|
|
1.4, -0.2, 0, 12,
|
|
0.2, 1.4, 0, 24,
|
|
0 , 0 , 0, 0,
|
|
0 , 0 , 0, 1], matr);
|
|
});
|
|
|
|
it('can mark a CTM and retrieve it', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
|
|
canvas.concat(CanvasKit.M44.rotated([0, 1, 0], Math.PI/4));
|
|
canvas.concat(CanvasKit.M44.rotated([1, 0, 1], Math.PI/8));
|
|
canvas.markCTM('krispykreme');
|
|
|
|
const expected = CanvasKit.M44.multiply(
|
|
CanvasKit.M44.rotated([0, 1, 0], Math.PI/4),
|
|
CanvasKit.M44.rotated([1, 0, 1], Math.PI/8),
|
|
);
|
|
|
|
expect4x4MatricesToMatch(expected, canvas.findMarkedCTM('krispykreme'));
|
|
});
|
|
|
|
it('returns null for an invalid CTM marker', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
expect(canvas.findMarkedCTM('dunkindonuts')).toBeNull();
|
|
});
|
|
|
|
it('can change the 4x4 matrix on the canvas and read it back', () => {
|
|
const canvas = new CanvasKit.Canvas();
|
|
|
|
let matr = canvas.getLocalToDevice();
|
|
expect(matr).toEqual(CanvasKit.M44.identity());
|
|
|
|
canvas.concat(CanvasKit.M44.rotated([0, 1, 0], Math.PI/4));
|
|
canvas.concat(CanvasKit.M44.rotated([1, 0, 1], Math.PI/8));
|
|
|
|
const expected = CanvasKit.M44.multiply(
|
|
CanvasKit.M44.rotated([0, 1, 0], Math.PI/4),
|
|
CanvasKit.M44.rotated([1, 0, 1], Math.PI/8),
|
|
);
|
|
|
|
expect4x4MatricesToMatch(expected, canvas.getLocalToDevice());
|
|
// TODO(kjlubick) add test for DOMMatrix
|
|
// TODO(nifong) add more involved test for camera-related math.
|
|
});
|
|
|
|
gm('concat_with4x4_canvas', (canvas) => {
|
|
const path = starPath(CanvasKit, CANVAS_WIDTH/2, CANVAS_HEIGHT/2);
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
canvas.clear(CanvasKit.WHITE);
|
|
|
|
// Rotate it a bit on all 3 major axis, centered on the screen.
|
|
// To play with rotations, see https://jsfiddle.skia.org/canvaskit/0525300405796aa87c3b84cc0d5748516fca0045d7d6d9c7840710ab771edcd4
|
|
const turn = CanvasKit.M44.multiply(
|
|
CanvasKit.M44.translated([CANVAS_WIDTH/2, 0, 0]),
|
|
CanvasKit.M44.rotated([1, 0, 0], Math.PI/3),
|
|
CanvasKit.M44.rotated([0, 1, 0], Math.PI/4),
|
|
CanvasKit.M44.rotated([0, 0, 1], Math.PI/16),
|
|
CanvasKit.M44.translated([-CANVAS_WIDTH/2, 0, 0]),
|
|
);
|
|
canvas.concat(turn);
|
|
|
|
// Draw some stripes to help the eye detect the turn
|
|
const stripeWidth = 10;
|
|
paint.setColor(CanvasKit.BLACK);
|
|
for (let i = 0; i < CANVAS_WIDTH; i += 2*stripeWidth) {
|
|
canvas.drawRect(CanvasKit.LTRBRect(i, 0, i + stripeWidth, CANVAS_HEIGHT), paint);
|
|
}
|
|
|
|
paint.setColor(CanvasKit.YELLOW);
|
|
canvas.drawPath(path, paint);
|
|
paint.delete();
|
|
path.delete();
|
|
});
|
|
|
|
gm('particles_canvas', (canvas) => {
|
|
const curveParticles = {
|
|
'MaxCount': 1000,
|
|
'Drawable': {
|
|
'Type': 'SkCircleDrawable',
|
|
'Radius': 2
|
|
},
|
|
'EffectCode': [
|
|
`void effectSpawn(inout Effect effect) {
|
|
effect.rate = 200;
|
|
effect.color = float4(1, 0, 0, 1);
|
|
}`
|
|
],
|
|
'Code': [
|
|
`void spawn(inout Particle p) {
|
|
p.lifetime = 3 + rand(p.seed);
|
|
p.vel.y = -50;
|
|
}
|
|
|
|
void update(inout Particle p) {
|
|
float w = mix(15, 3, p.age);
|
|
p.pos.x = sin(radians(p.age * 320)) * mix(25, 10, p.age) + mix(-w, w, rand(p.seed));
|
|
if (rand(p.seed) < 0.5) { p.pos.x = -p.pos.x; }
|
|
|
|
p.color.g = (mix(75, 220, p.age) + mix(-30, 30, rand(p.seed))) / 255;
|
|
}`
|
|
],
|
|
'Bindings': []
|
|
};
|
|
|
|
const particles = CanvasKit.MakeParticles(JSON.stringify(curveParticles));
|
|
particles.start(0, true);
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.WHITE);
|
|
const font = new CanvasKit.Font(null, 12);
|
|
|
|
canvas.clear(CanvasKit.BLACK);
|
|
|
|
// Draw a 5x5 set of different times in the particle system
|
|
// like a filmstrip of motion of particles.
|
|
const LEFT_MARGIN = 90;
|
|
const TOP_MARGIN = 100;
|
|
for (let row = 0; row < 5; row++) {
|
|
for (let column = 0; column < 5; column++) {
|
|
canvas.save();
|
|
canvas.translate(LEFT_MARGIN + column*100, TOP_MARGIN + row*100);
|
|
|
|
// Time moves in row-major order in increments of 0.02.
|
|
const particleTime = row/10 + column/50;
|
|
|
|
canvas.drawText('time ' + particleTime.toFixed(2), -30, 20, paint, font);
|
|
particles.update(particleTime);
|
|
|
|
particles.draw(canvas);
|
|
canvas.restore();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
const expect3x3MatricesToMatch = (expected, actual) => {
|
|
expect(expected.length).toEqual(9);
|
|
expect(actual.length).toEqual(9);
|
|
for (let i = 0; i < expected.length; i++) {
|
|
expect(expected[i]).toBeCloseTo(actual[i], 5);
|
|
}
|
|
};
|
|
|
|
const expect4x4MatricesToMatch = (expected, actual) => {
|
|
expect(expected.length).toEqual(16);
|
|
expect(actual.length).toEqual(16);
|
|
for (let i = 0; i < expected.length; i++) {
|
|
expect(expected[i]).toBeCloseTo(actual[i], 5);
|
|
}
|
|
};
|