[canvaskit] update shaping example to have emoji

Docs-Preview: https://skia.org/?cl=257998
Change-Id: I4892f00d80375874198fc60edadf84ffe41a5f5b
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/257998
Reviewed-by: Julia Lavrova <jlavrova@google.com>

modules/canvaskit/canvaskit/extra.html

@@ -108,15 +108,6 @@
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/skottie_sample_webfont.json').then((resp) => {
-    resp.text().then((str) => {
-      webfontJSON = str;
-      SkottieExample(CanvasKit, 'sk_webfont', webfontJSON, fullBounds, {
-        'Roboto-Regular': robotoData,
-      });
-    });
-  });
-
   fetch('https://storage.googleapis.com/skia-cdn/misc/flightAnim.gif').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       flightAnimGif = buffer;

site/user/modules/canvaskit.md

@@ -29,7 +29,7 @@ Samples
     margin: 2px;
   }
 
-  #patheffect, #ink {
+  #patheffect, #ink, #shaping {
     width: 400px;
     height: 400px;
   }
@@ -87,13 +87,13 @@ Samples
     <canvas id=sk_onboarding width=500 height=500></canvas>
   </a>
 
-  <h3>Text Shaping using ICU and Harfbuzz</h3>
+  <h3>SkParagraph (using ICU and Harfbuzz)</h3>
   <figure>
-    <canvas id=shaping width=400 height=400></canvas>
+    <canvas id=shaping width=500 height=500></canvas>
     <figcaption>
-      <a href="https://jsfiddle.skia.org/canvaskit/d5c61a106d57ff4ada119a46ddc3bfa479d343330d0c9e50da21f4ef113d0dee"
+      <a href="https://jsfiddle.skia.org/canvaskit/56cb197c724dfdfad0c3d8133d4fcab587e4c4e7f31576e62c17251637d3745c"
           target=_blank rel=noopener>
-        Text Shaping JSFiddle</a>
+        SkParagraph JSFiddle</a>
     </figcaption>
   </figure>
 
@@ -106,7 +106,7 @@ Samples
   var locate_file = '';
   if (window.WebAssembly && typeof window.WebAssembly.compile === 'function') {
     console.log('WebAssembly is supported!');
-    locate_file = 'https://unpkg.com/canvaskit-wasm@0.4.0/bin/';
+    locate_file = 'https://unpkg.com/canvaskit-wasm@0.9.0/bin/';
   } else {
     console.log('WebAssembly is not supported (yet) on this browser.');
     document.getElementById('demo').innerHTML = "<div>WASM not supported by your browser. Try a recent version of Chrome, Firefox, Edge, or Safari.</div>";
@@ -313,51 +313,87 @@ Samples
       console.log('Could not make surface');
       return;
     }
-    const context = CanvasKit.currentContext();
-    const skcanvas = surface.getCanvas();
-    const paint = new CanvasKit.SkPaint();
-    paint.setColor(CanvasKit.BLUE);
-    paint.setStyle(CanvasKit.PaintStyle.Stroke);
-
-    const textPaint = new CanvasKit.SkPaint();
-    const bigFont = new CanvasKit.SkFont(null, 30);
-    const smallFont = new CanvasKit.SkFont(null, 14);
-
-    const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo vitae ipsum hendrerit euismod quis rutrum nibh. Quisque non suscipit urna. Donec enim urna, facilisis vitae volutpat in, mattis at elit. Sed quis augue et dolor dignissim fringilla. Sed non massa eu neque tristique malesuada. ';
-
-    let X = 280;
-    let Y = 190;
-
-    function drawFrame() {
-      CanvasKit.setCurrentContext(context);
-      skcanvas.clear(CanvasKit.TRANSPARENT);
-
-      const shapedText = new CanvasKit.ShapedText({
-        font: smallFont,
-        leftToRight: true,
-        text: TEXT,
-        width: X - 10,
+    let robotoData = null;
+    fetch('https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf').then((resp) => {
+      resp.arrayBuffer().then((buffer) => {
+        robotoData = buffer;
+        requestAnimationFrame(drawFrame);
+      });
     });
 
-      skcanvas.drawRect(CanvasKit.LTRBRect(10, 10, X, Y), paint);
-      skcanvas.drawText(shapedText, 10, 10, textPaint, smallFont);
-      skcanvas.drawText('Try dragging the box!', 10, 380, textPaint, bigFont);
+    let emojiData = null;
+    fetch('https://storage.googleapis.com/skia-cdn/misc/NotoColorEmoji.ttf').then((resp) => {
+      resp.arrayBuffer().then((buffer) => {
+        emojiData = buffer;
+        requestAnimationFrame(drawFrame);
+      });
+    });
 
+    const skcanvas = surface.getCanvas();
+
+    const font = new CanvasKit.SkFont(null, 18);
+    const fontPaint = new CanvasKit.SkPaint();
+    fontPaint.setStyle(CanvasKit.PaintStyle.Fill);
+    fontPaint.setAntiAlias(true);
+
+    skcanvas.drawText(`Fetching Font data...`, 5, 450, fontPaint, font);
     surface.flush();
 
-      shapedText.delete();
+    const context = CanvasKit.currentContext();
 
-      window.requestAnimationFrame(drawFrame);
+    let paragraph = null;
+    let X = 10;
+    let Y = 10;
+    const str = 'The quick brown fox 🦊 ate a zesty hamburgerfons 🍔.\nThe 👩‍👩‍👧‍👧 laughed.';
+
+    function drawFrame() {
+      if (robotoData && emojiData && !paragraph) {
+        const fontMgr = CanvasKit.SkFontMgr.FromData([robotoData, emojiData]);
+
+        const paraStyle = new CanvasKit.ParagraphStyle({
+          textStyle: {
+            color: CanvasKit.BLACK,
+            fontFamilies: ['Roboto', 'Noto Color Emoji'],
+            fontSize: 50,
+          },
+          textAlign: CanvasKit.TextAlign.Left,
+          maxLines: 7,
+          ellipsis: '...',
+        });
+
+        const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
+        builder.addText(str);
+        paragraph = builder.build();
+      }
+      if (!paragraph) {
+        requestAnimationFrame(drawFrame);
+        return;
+      }
+      CanvasKit.setCurrentContext(context);
+      skcanvas.clear(CanvasKit.WHITE);
+
+      const wrapTo = 350 + 150 * Math.sin(Date.now() / 2000);
+      paragraph.layout(wrapTo);
+      skcanvas.drawParagraph(paragraph, 0, 0);
+      skcanvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint);
+
+      let posA = paragraph.getGlyphPositionAtCoordinate(X, Y);
+      const cp = str.codePointAt(posA.pos);
+      if (cp) {
+        const glyph = String.fromCodePoint(cp);
+        skcanvas.drawText(`At (${X.toFixed(2)}, ${Y.toFixed(2)}) glyph is '${glyph}'`, 5, 450, fontPaint, font);
+      }
+
+      surface.flush();
+      requestAnimationFrame(drawFrame);
     }
-    window.requestAnimationFrame(drawFrame);
 
     // Make animation interactive
     let interact = (e) => {
-      if (!e.pressure) {
-        return;
-      }
-      X = e.offsetX;
-      Y = e.offsetY;
+      // multiply by 4/5 to account for the difference in the canvas width and the CSS width.
+      // The 10 accounts for where the mouse actually is compared to where it is drawn.
+      X = (e.offsetX * 4/5) - 10;
+      Y = e.offsetY * 4/5;
     };
     document.getElementById('shaping').addEventListener('pointermove', interact);
     document.getElementById('shaping').addEventListener('pointerdown', interact);