1describe('CanvasKit\'s Path Behavior', function() { 2 let container = document.createElement('div'); 3 document.body.appendChild(container); 4 const CANVAS_WIDTH = 600; 5 const CANVAS_HEIGHT = 600; 6 7 beforeEach(function() { 8 container.innerHTML = ` 9 <canvas width=600 height=600 id=test></canvas> 10 <canvas width=600 height=600 id=report></canvas>`; 11 }); 12 13 afterEach(function() { 14 container.innerHTML = ''; 15 }); 16 17 let notSerifFontBuffer = null; 18 // This font is known to support kerning 19 const notoSerifFontLoaded = fetch('/assets/NotoSerif-Regular.ttf').then( 20 (response) => response.arrayBuffer()).then( 21 (buffer) => { 22 notSerifFontBuffer = buffer; 23 }); 24 25 it('can draw shaped and unshaped text', function(done) { 26 LoadCanvasKit.then(catchException(done, () => { 27 notoSerifFontLoaded.then(() => { 28 // This is taken from example.html 29 const surface = CanvasKit.MakeCanvasSurface('test'); 30 expect(surface).toBeTruthy('Could not make surface') 31 if (!surface) { 32 done(); 33 return; 34 } 35 const canvas = surface.getCanvas(); 36 const paint = new CanvasKit.SkPaint(); 37 38 paint.setColor(CanvasKit.BLUE); 39 paint.setStyle(CanvasKit.PaintStyle.Stroke); 40 41 const fontMgr = CanvasKit.SkFontMgr.RefDefault(); 42 const notoSerif = fontMgr.MakeTypefaceFromData(notSerifFontBuffer); 43 44 const textPaint = new CanvasKit.SkPaint(); 45 // use the built-in monospace typeface. 46 const textFont = new CanvasKit.SkFont(notoSerif, 20); 47 48 canvas.drawRect(CanvasKit.LTRBRect(30, 30, 200, 200), paint); 49 canvas.drawText('This text is not shaped, and overflows the boundry', 50 35, 50, textPaint, textFont); 51 52 const shapedText = new CanvasKit.ShapedText({ 53 font: textFont, 54 leftToRight: true, 55 text: 'This text *is* shaped, and wraps to the right width.', 56 width: 160, 57 }); 58 const textBoxX = 35; 59 const textBoxY = 55; 60 canvas.drawText(shapedText, textBoxX, textBoxY, textPaint); 61 const bounds = shapedText.getBounds(); 62 63 bounds.fLeft += textBoxX; 64 bounds.fRight += textBoxX; 65 bounds.fTop += textBoxY; 66 bounds.fBottom += textBoxY 67 68 canvas.drawRect(bounds, paint); 69 const SHAPE_TEST_TEXT = 'VAVAVAVAVAFIfi'; 70 const textFont2 = new CanvasKit.SkFont(notoSerif, 60); 71 const shapedText2 = new CanvasKit.ShapedText({ 72 font: textFont2, 73 leftToRight: true, 74 text: SHAPE_TEST_TEXT, 75 width: 600, 76 }); 77 78 canvas.drawText('no kerning ↓', 10, 240, textPaint, textFont); 79 canvas.drawText(SHAPE_TEST_TEXT, 10, 300, textPaint, textFont2); 80 canvas.drawText(shapedText2, 10, 300, textPaint); 81 canvas.drawText('kerning ↑', 10, 390, textPaint, textFont); 82 83 surface.flush(); 84 85 paint.delete(); 86 notoSerif.delete(); 87 textPaint.delete(); 88 textFont.delete(); 89 shapedText.delete(); 90 textFont2.delete(); 91 shapedText2.delete(); 92 fontMgr.delete(); 93 reportSurface(surface, 'text_shaping', done); 94 }); 95 })); 96 }); 97 98 it('can draw text following a path', function(done) { 99 LoadCanvasKit.then(catchException(done, () => { 100 const surface = CanvasKit.MakeCanvasSurface('test'); 101 expect(surface).toBeTruthy('Could not make surface') 102 if (!surface) { 103 done(); 104 return; 105 } 106 const canvas = surface.getCanvas(); 107 const paint = new CanvasKit.SkPaint(); 108 paint.setAntiAlias(true); 109 paint.setStyle(CanvasKit.PaintStyle.Stroke); 110 111 const font = new CanvasKit.SkFont(null, 24); 112 const fontPaint = new CanvasKit.SkPaint(); 113 fontPaint.setAntiAlias(true); 114 fontPaint.setStyle(CanvasKit.PaintStyle.Fill); 115 116 117 const arc = new CanvasKit.SkPath(); 118 arc.arcTo(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true); 119 arc.lineTo(210, 140); 120 arc.arcTo(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true); 121 122 // Only 1 dot should show up in the image, because we run out of path. 123 const str = 'This téxt should follow the curve across contours...'; 124 const textBlob = CanvasKit.SkTextBlob.MakeOnPath(str, arc, font); 125 126 canvas.drawPath(arc, paint); 127 canvas.drawTextBlob(textBlob, 0, 0, fontPaint); 128 129 surface.flush(); 130 131 textBlob.delete(); 132 arc.delete(); 133 paint.delete(); 134 font.delete(); 135 fontPaint.delete(); 136 137 reportSurface(surface, 'monospace_text_on_path', done); 138 })); 139 }); 140 141 it('can draw text following a path with a non-serif font', function(done) { 142 LoadCanvasKit.then(catchException(done, () => { 143 notoSerifFontLoaded.then(() => { 144 const surface = CanvasKit.MakeCanvasSurface('test'); 145 expect(surface).toBeTruthy('Could not make surface') 146 if (!surface) { 147 done(); 148 return; 149 } 150 const fontMgr = CanvasKit.SkFontMgr.RefDefault(); 151 const notoSerif = fontMgr.MakeTypefaceFromData(notSerifFontBuffer); 152 153 const canvas = surface.getCanvas(); 154 const paint = new CanvasKit.SkPaint(); 155 paint.setAntiAlias(true); 156 paint.setStyle(CanvasKit.PaintStyle.Stroke); 157 158 const font = new CanvasKit.SkFont(notoSerif, 24); 159 const fontPaint = new CanvasKit.SkPaint(); 160 fontPaint.setAntiAlias(true); 161 fontPaint.setStyle(CanvasKit.PaintStyle.Fill); 162 163 164 const arc = new CanvasKit.SkPath(); 165 arc.arcTo(CanvasKit.LTRBRect(20, 40, 280, 300), -160, 140, true); 166 arc.lineTo(210, 140); 167 arc.arcTo(CanvasKit.LTRBRect(20, 0, 280, 260), 160, -140, true); 168 169 const str = 'This téxt should follow the curve across contours...'; 170 const textBlob = CanvasKit.SkTextBlob.MakeOnPath(str, arc, font, 60.5); 171 172 canvas.drawPath(arc, paint); 173 canvas.drawTextBlob(textBlob, 0, 0, fontPaint); 174 175 surface.flush(); 176 177 textBlob.delete(); 178 arc.delete(); 179 paint.delete(); 180 notoSerif.delete(); 181 font.delete(); 182 fontPaint.delete(); 183 fontMgr.delete(); 184 reportSurface(surface, 'serif_text_on_path', done); 185 }); 186 })); 187 }); 188 189 // TODO more tests 190}); 191