describe('CanvasKit\'s Path Behavior', function() { let container = document.createElement('div'); document.body.appendChild(container); const CANVAS_WIDTH = 600; const CANVAS_HEIGHT = 600; beforeEach(function() { container.innerHTML = ` `; }); afterEach(function() { container.innerHTML = ''; }); let notSerifFontBuffer = null; // This font is known to support kerning const notoSerifFontLoaded = fetch('/assets/NotoSerif-Regular.ttf').then( (response) => response.arrayBuffer()).then( (buffer) => { notSerifFontBuffer = buffer; }); it('can draw shaped and unshaped text', function(done) { LoadCanvasKit.then(catchException(done, () => { notoSerifFontLoaded.then(() => { // This is taken from example.html const surface = CanvasKit.MakeCanvasSurface('test'); expect(surface).toBeTruthy('Could not make surface') if (!surface) { done(); return; } const canvas = surface.getCanvas(); const paint = new CanvasKit.SkPaint(); paint.setColor(CanvasKit.BLUE); paint.setStyle(CanvasKit.PaintStyle.Stroke); const fontMgr = CanvasKit.SkFontMgr.RefDefault(); const notoSerif = fontMgr.MakeTypefaceFromData(notSerifFontBuffer); const textPaint = new CanvasKit.SkPaint(); // use the built-in monospace typeface. const textFont = new CanvasKit.SkFont(notoSerif, 20); canvas.drawRect(CanvasKit.LTRBRect(30, 30, 200, 200), paint); canvas.drawText('This text is not shaped, and overflows the boundry', 35, 50, textPaint, textFont); const shapedText = new CanvasKit.ShapedText({ font: textFont, leftToRight: true, text: 'This text *is* shaped, and wraps to the right width.', width: 160, }); const textBoxX = 35; const textBoxY = 55; canvas.drawText(shapedText, textBoxX, textBoxY, textPaint); const bounds = shapedText.getBounds(); bounds.fLeft += textBoxX; bounds.fRight += textBoxX; bounds.fTop += textBoxY; bounds.fBottom += textBoxY canvas.drawRect(bounds, paint); const SHAPE_TEST_TEXT = 'VAVAVAVAVAFIfi'; const textFont2 = new CanvasKit.SkFont(notoSerif, 60); const shapedText2 = new CanvasKit.ShapedText({ font: textFont2, leftToRight: true, text: SHAPE_TEST_TEXT, width: 600, }); canvas.drawText('no kerning ↓', 10, 240, textPaint, textFont); canvas.drawText(SHAPE_TEST_TEXT, 10, 300, textPaint, textFont2); canvas.drawText(shapedText2, 10, 300, textPaint); canvas.drawText('kerning ↑', 10, 390, textPaint, textFont); surface.flush(); paint.delete(); notoSerif.delete(); textPaint.delete(); textFont.delete(); shapedText.delete(); textFont2.delete(); shapedText2.delete(); fontMgr.delete(); reportSurface(surface, 'text_shaping', done); }); })); }); it('can draw text following a path', function(done) { LoadCanvasKit.then(catchException(done, () => { const surface = CanvasKit.MakeCanvasSurface('test'); expect(surface).toBeTruthy('Could not make surface') if (!surface) { done(); return; } const canvas = surface.getCanvas(); const paint = new CanvasKit.SkPaint(); paint.setAntiAlias(true); paint.setStyle(CanvasKit.PaintStyle.Stroke); const font = new CanvasKit.SkFont(null, 24); const fontPaint = new CanvasKit.SkPaint(); fontPaint.setAntiAlias(true); fontPaint.setStyle(CanvasKit.PaintStyle.Fill); const arc = new CanvasKit.SkPath(); arc.arcTo(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true); arc.lineTo(210, 140); arc.arcTo(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true); // Only 1 dot should show up in the image, because we run out of path. const str = 'This téxt should follow the curve across contours...'; const textBlob = CanvasKit.SkTextBlob.MakeOnPath(str, arc, font); canvas.drawPath(arc, paint); canvas.drawTextBlob(textBlob, 0, 0, fontPaint); surface.flush(); textBlob.delete(); arc.delete(); paint.delete(); font.delete(); fontPaint.delete(); reportSurface(surface, 'monospace_text_on_path', done); })); }); it('can draw text following a path with a non-serif font', function(done) { LoadCanvasKit.then(catchException(done, () => { notoSerifFontLoaded.then(() => { const surface = CanvasKit.MakeCanvasSurface('test'); expect(surface).toBeTruthy('Could not make surface') if (!surface) { done(); return; } const fontMgr = CanvasKit.SkFontMgr.RefDefault(); const notoSerif = fontMgr.MakeTypefaceFromData(notSerifFontBuffer); const canvas = surface.getCanvas(); const paint = new CanvasKit.SkPaint(); paint.setAntiAlias(true); paint.setStyle(CanvasKit.PaintStyle.Stroke); const font = new CanvasKit.SkFont(notoSerif, 24); const fontPaint = new CanvasKit.SkPaint(); fontPaint.setAntiAlias(true); fontPaint.setStyle(CanvasKit.PaintStyle.Fill); const arc = new CanvasKit.SkPath(); arc.arcTo(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true); arc.lineTo(210, 140); arc.arcTo(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true); const str = 'This téxt should follow the curve across contours...'; const textBlob = CanvasKit.SkTextBlob.MakeOnPath(str, arc, font, 60.5); canvas.drawPath(arc, paint); canvas.drawTextBlob(textBlob, 0, 0, fontPaint); surface.flush(); textBlob.delete(); arc.delete(); paint.delete(); notoSerif.delete(); font.delete(); fontPaint.delete(); fontMgr.delete(); reportSurface(surface, 'serif_text_on_path', done); }); })); }); // TODO more tests });