From 8e89f60c49b51371ad3d78675f8c4639e64d22ee Mon Sep 17 00:00:00 2001 From: Kevin Lubick Date: Wed, 2 Jun 2021 10:03:33 -0400 Subject: [PATCH] [canvaskit] Update docs to account for API changes canvas.flush() was removed. This updates all examples to use surface.requestAnimationFrame(), which is cleaner. Change-Id: I79fa308dc321865318b7f5d4723f3f803c0b071a No-Try: true Docs-Preview: https://skia.org/?cl=414856 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/414856 Reviewed-by: Herb Derby --- site/docs/user/modules/canvaskit.md | 110 ++++++++++------------------ 1 file changed, 38 insertions(+), 72 deletions(-) diff --git a/site/docs/user/modules/canvaskit.md b/site/docs/user/modules/canvaskit.md index baa1a14a36..fbd7310867 100644 --- a/site/docs/user/modules/canvaskit.md +++ b/site/docs/user/modules/canvaskit.md @@ -55,7 +55,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support.
- SkParagraph JSFiddle
@@ -63,7 +63,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support.
- Shader JSFiddle
@@ -78,19 +78,19 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support.

Play back bodymovin lottie files with skottie (click for fiddles)

- - - - @@ -99,7 +99,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support.
- Star JSFiddle
@@ -107,7 +107,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support.
- Ink JSFiddle
@@ -202,10 +202,6 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. if (!surface) { console.log('Could not make surface'); } - const context = CanvasKit.currentContext(); - - const canvas = surface.getCanvas(); - const paint = new CanvasKit.Paint(); const textPaint = new CanvasKit.Paint(); @@ -219,9 +215,8 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. let X = 200; let Y = 200; - function drawFrame() { + function drawFrame(canvas) { const path = starPath(CanvasKit, X, Y); - CanvasKit.setCurrentContext(context); const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], i/5); i++; @@ -235,12 +230,11 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. canvas.drawPath(path, paint); canvas.drawText('Try Clicking!', 10, 380, textPaint, textFont); - canvas.flush(); dpe.delete(); path.delete(); - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); } - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); // Make animation interactive let interact = (e) => { @@ -264,10 +258,6 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. if (!surface) { console.log('Could not make surface'); } - const context = CanvasKit.currentContext(); - - const canvas = surface.getCanvas(); - let paint = new CanvasKit.Paint(); paint.setAntiAlias(true); paint.setColor(CanvasKit.Color(0, 0, 0, 1.0)); @@ -295,15 +285,12 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. let paths = [path]; let paints = [paint]; - function drawFrame() { - CanvasKit.setCurrentContext(context); - + function drawFrame(canvas) { + canvas.clear(CanvasKit.WHITE); for (let i = 0; i < paints.length && i < paths.length; i++) { canvas.drawPath(paths[i], paints[i]); } - canvas.flush(); - - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); } let hold = false; @@ -330,7 +317,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. document.getElementById('ink').addEventListener('lostpointercapture', interact); document.getElementById('ink').addEventListener('pointerup', interact); preventScrolling(document.getElementById('ink')); - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); } function ShapingExample(CanvasKit) { @@ -343,7 +330,6 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. fetch('https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf').then((resp) => { resp.arrayBuffer().then((buffer) => { robotoData = buffer; - requestAnimationFrame(drawFrame); }); }); @@ -351,28 +337,21 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. 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.Font(null, 18); const fontPaint = new CanvasKit.Paint(); fontPaint.setStyle(CanvasKit.PaintStyle.Fill); fontPaint.setAntiAlias(true); - skcanvas.drawText(`Fetching Font data...`, 5, 450, fontPaint, font); - surface.flush(); - - const context = CanvasKit.currentContext(); - let paragraph = null; - let X = 10; - let Y = 10; + let X = 250; + let Y = 250; const str = 'The quick brown fox ๐ŸฆŠ ate a zesty hamburgerfons ๐Ÿ”.\nThe ๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง laughed.'; - function drawFrame() { + function drawFrame(canvas) { + surface.requestAnimationFrame(drawFrame); if (robotoData && emojiData && !paragraph) { const fontMgr = CanvasKit.FontMgr.FromData([robotoData, emojiData]); @@ -392,28 +371,25 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. paragraph = builder.build(); } if (!paragraph) { - requestAnimationFrame(drawFrame); + canvas.drawText(`Fetching Font data...`, 5, 450, fontPaint, font); return; } - CanvasKit.setCurrentContext(context); - skcanvas.clear(CanvasKit.WHITE); + canvas.clear(CanvasKit.WHITE); - const wrapTo = 350 + 150 * Math.sin(Date.now() / 2000); + let wrapTo = 350 + 150 * Math.sin(Date.now() / 2000); paragraph.layout(wrapTo); - skcanvas.drawParagraph(paragraph, 0, 0); - skcanvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint); + canvas.drawParagraph(paragraph, 0, 0); + canvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint); - let posA = paragraph.getGlyphPositionAtCoordinate(X, Y); + const 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); + canvas.drawText(`At (${X.toFixed(2)}, ${Y.toFixed(2)}) glyph is '${glyph}'`, 5, 450, fontPaint, font); } - - surface.flush(); - requestAnimationFrame(drawFrame); } + surface.requestAnimationFrame(drawFrame); // Make animation interactive let interact = (e) => { // multiply by 4/5 to account for the difference in the canvas width and the CSS width. @@ -426,7 +402,7 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. document.getElementById('shaping').addEventListener('lostpointercapture', interact); document.getElementById('shaping').addEventListener('pointerup', interact); preventScrolling(document.getElementById('shaping')); - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); } function starPath(CanvasKit, X=128, Y=128, R=116) { @@ -453,22 +429,18 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. if (!surface) { console.log('Could not make surface'); } - const context = CanvasKit.currentContext(); - const canvas = surface.getCanvas(); - let firstFrame = new Date().getTime(); - function drawFrame() { + function drawFrame(canvas) { let now = new Date().getTime(); let seek = ((now - firstFrame) / duration) % 1.0; - CanvasKit.setCurrentContext(context); - animation.seek(seek); + animation.seek(seek); animation.render(canvas, bounds); - canvas.flush(); - window.requestAnimationFrame(drawFrame); + + surface.requestAnimationFrame(drawFrame); } - window.requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); //animation.delete(); } @@ -480,7 +452,6 @@ Skia's [Lottie animation](https://skia.org/docs/user/modules/skottie) support. if (!surface) { throw 'Could not make surface'; } - const skcanvas = surface.getCanvas(); const paint = new CanvasKit.Paint(); const prog = ` @@ -501,13 +472,9 @@ half4 main(float2 p) { } `; - // If there are multiple contexts on the screen, we need to make sure - // we switch to this one before we draw. - const context = CanvasKit.currentContext(); const fact = CanvasKit.RuntimeEffect.Make(prog); - function drawFrame() { - CanvasKit.setCurrentContext(context); - skcanvas.clear(CanvasKit.WHITE); + function drawFrame(canvas) { + canvas.clear(CanvasKit.WHITE); const shader = fact.makeShader([ Math.sin(Date.now() / 2000) / 5, 256, 256, @@ -516,12 +483,11 @@ half4 main(float2 p) { true/*=opaque*/); paint.setShader(shader); - skcanvas.drawRect(CanvasKit.LTRBRect(0, 0, 512, 512), paint); - surface.flush(); - requestAnimationFrame(drawFrame); + canvas.drawRect(CanvasKit.LTRBRect(0, 0, 512, 512), paint); shader.delete(); + surface.requestAnimationFrame(drawFrame); } - requestAnimationFrame(drawFrame); + surface.requestAnimationFrame(drawFrame); } function Camera3D(canvas, textureImgData, normalImgData) {