Fix text on CanvasKit

Updates example to use text (and be more mobile friendly). Also make the compile step a bit nicer and remove SKOTTIE_HACK. Docs-Preview: https://skia.org/?cl=158664 Bug: skia: Change-Id: I4c465482058ad7d359729a492e29205c07f3933e Reviewed-on: https://skia-review.googlesource.com/c/158664 Reviewed-by: Kevin Lubick <kjlubick@google.com> Commit-Queue: Kevin Lubick <kjlubick@google.com>
2018-10-02 11:33:52 -04:00 · 2018-10-02 11:33:52 -04:00 · d45c7811ef
commit d45c7811ef
parent 6a76dab257
5 changed files with 78 additions and 58 deletions
--- a/experimental/canvaskit/canvas-kit/example.html
+++ b/experimental/canvaskit/canvas-kit/example.html
@ -138,7 +138,7 @@
      canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));

      canvas.drawPath(path, paint);
-      canvas.drawText('Try mousing over!', 10, 280, textPaint);
+      canvas.drawText('Try Clicking!', 10, 280, textPaint);
      canvas.flush();
      dpe.delete();
      path.delete();
@ -146,12 +146,17 @@
    }
    window.requestAnimationFrame(drawFrame);

-    // Make
-    document.getElementById('patheffect').addEventListener('mousemove', (e) => {
+    // Make animation interactive
+    let interact = (e) => {
+      if (!e.pressure) {
+        return;
+      }
      X = e.offsetX;
      Y = e.offsetY;
-    });
-
+    };
+    document.getElementById('patheffect').addEventListener('pointermove', interact);
+    document.getElementById('patheffect').addEventListener('pointerdown', interact);
+    preventScrolling(document.getElementById('patheffect'));
    // A client would need to delete this if it didn't go on for ever.
    //paint.delete();
  }
@ -206,6 +211,13 @@
    window.requestAnimationFrame(drawFrame);
  }

+  function preventScrolling(canvas) {
+    canvas.addEventListener('touchmove', (e) => {
+      // Prevents touch events in the canvas from scrolling the canvas.
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  }

  function InkExample(CanvasKit) {
    const surface = CanvasKit.getWebGLSurface('ink');
@ -254,8 +266,9 @@
    }

    let hold = false;
-    document.getElementById('ink').addEventListener('mousemove', (e) => {
-      if (!e.buttons) {
+    let interact = (e) => {
+      let type = e.type;
+      if (type === 'lostpointercapture' || type === 'pointerup' || !e.pressure ) {
        hold = false;
        return;
      }
@ -270,7 +283,12 @@
        path.moveTo(e.offsetX, e.offsetY);
      }
      hold = true;
-    });
+    };
+    document.getElementById('ink').addEventListener('pointermove', interact);
+    document.getElementById('ink').addEventListener('pointerdown', interact);
+    document.getElementById('ink').addEventListener('lostpointercapture', interact);
+    document.getElementById('ink').addEventListener('pointerup', interact);
+    preventScrolling(document.getElementById('ink'));
    window.requestAnimationFrame(drawFrame);
  }

--- a/experimental/canvaskit/canvaskit_bindings.cpp
+++ b/experimental/canvaskit/canvaskit_bindings.cpp
@ -218,8 +218,7 @@ EMSCRIPTEN_BINDINGS(Skia) {
        .function("drawPath", &SkCanvas::drawPath)
        .function("drawRect", &SkCanvas::drawRect)
        .function("drawText", optional_override([](SkCanvas& self, std::string text, SkScalar x, SkScalar y, const SkPaint& p) {
-            return; // Currently broken, some memory things seem off.
-            //self.drawText(text.c_str(), text.length(), x, y, p);
+            self.drawText(text.c_str(), text.length(), x, y, p);
        }))
        .function("flush", &SkCanvas::flush)
        .function("save", &SkCanvas::save)
--- a/experimental/canvaskit/compile.sh
+++ b/experimental/canvaskit/compile.sh
@ -20,10 +20,11 @@ pushd $BASE_DIR/../..

 source $EMSDK/emsdk_env.sh

-RELEASE_CONF="-Oz --closure 1 --llvm-lto 3"
-
+RELEASE_CONF="-Oz --closure 1 --llvm-lto 3 -DSK_RELEASE"
+EXTRA_CFLAGS="\"-DSK_RELEASE\""
 if [[ $@ == *debug* ]]; then
  echo "Building a Debug build"
+  EXTRA_CFLAGS="\"-DSK_DEBUG\""
  RELEASE_CONF="-O0 --js-opts 0 -s SAFE_HEAP=1 -s ASSERTIONS=1 -g3 -DPATHKIT_TESTING -DSK_DEBUG"
 fi

@ -37,28 +38,30 @@ EMCXX=`which em++`
 ./bin/gn gen ${BUILD_DIR} \
  --args="cc=\"${EMCC}\" \
  cxx=\"${EMCXX}\" \
-  extra_cflags_cc=[\"-frtti\",\"-s\",\"USE_FREETYPE=1\", \"-DIS_WEBGL=1\"] \
-  extra_cflags=[\"-s\",\"USE_FREETYPE=1\",\"-s\",\"USE_LIBPNG=1\", \"-DIS_WEBGL=1\"] \
+  extra_cflags_cc=[\"-frtti\"] \
+  extra_cflags=[\"-s\",\"USE_FREETYPE=1\",\"-s\",\"USE_LIBPNG=1\", \"-DIS_WEBGL=1\",
+    ${EXTRA_CFLAGS}
+  ] \
  is_debug=false \
  is_official_build=true \
  is_component_build=false \
  target_cpu=\"wasm\" \
  \
-  skia_use_egl=true \
-  skia_use_vulkan=false \
-  skia_use_libwebp=false \
-  skia_use_libpng=true \
-  skia_use_lua=false \
  skia_use_dng_sdk=false \
-  skia_use_fontconfig=false \
-  skia_use_libjpeg_turbo=false \
-  skia_use_libheif=false \
+  skia_use_egl=true \
  skia_use_expat=false \
-  skia_use_vulkan=false \
+  skia_use_expat=false \
+  skia_use_fontconfig=false \
  skia_use_freetype=true \
  skia_use_icu=false \
-  skia_use_expat=false \
+  skia_use_libheif=false \
+  skia_use_libjpeg_turbo=false \
+  skia_use_libpng=true \
+  skia_use_libwebp=false \
+  skia_use_lua=false \
  skia_use_piex=false \
+  skia_use_vulkan=false \
+  skia_use_vulkan=false \
  skia_use_zlib=true \
  \
  skia_enable_gpu=true \
@ -69,27 +72,6 @@ ninja -C ${BUILD_DIR} libskia.a

 export EMCC_CLOSURE_ARGS="--externs $BASE_DIR/externs.js "

-# inspired by https://github.com/Zubnix/skia-wasm-port/blob/master/build_skia_wasm_bitcode.sh
-echo "Compiling bindings"
-${EMCC} \
-    $RELEASE_CONF \
-    -std=c++11 \
-    -Iinclude/c \
-    -Iinclude/codec \
-    -Iinclude/config \
-    -Iinclude/core \
-    -Iinclude/effects \
-    -Iinclude/gpu \
-    -Iinclude/gpu/gl \
-    -Iinclude/pathops \
-    -Iinclude/private \
-    -Iinclude/utils/ \
-    -Imodules/skottie/include \
-    -Isrc/core/ \
-    -Itools/fonts \
-    $BASE_DIR/canvaskit_bindings.cpp \
-    -o $BUILD_DIR/canvaskit_bindings.bc
-
 echo "Generating final wasm"

 # Skottie doesn't end up in libskia and is currently not its own library
@ -119,8 +101,7 @@ ${EMCC} \
    --bind \
    --pre-js $BASE_DIR/helper.js \
    --pre-js $BASE_DIR/interface.js \
-    -DSKOTTIE_HACK \
-    $BUILD_DIR/canvaskit_bindings.bc \
+    $BASE_DIR/canvaskit_bindings.cpp \
    $BUILD_DIR/libskia.a \
    modules/skottie/src/Skottie.cpp \
    modules/skottie/src/SkottieAdapter.cpp \
@ -129,6 +110,7 @@ ${EMCC} \
    modules/skottie/src/SkottieLayer.cpp \
    modules/skottie/src/SkottieLayerEffect.cpp \
    modules/skottie/src/SkottiePrecompLayer.cpp \
+    modules/skottie/src/SkottieProperty.cpp \
    modules/skottie/src/SkottieShapeLayer.cpp \
    modules/skottie/src/SkottieTextLayer.cpp \
    modules/skottie/src/SkottieValue.cpp \
@ -136,7 +118,6 @@ ${EMCC} \
    src/core/SkCubicMap.cpp \
    src/core/SkTime.cpp \
    src/pathops/SkOpBuilder.cpp \
-    src/pathops/SkPathOpsTypes.cpp \
    tools/fonts/SkTestFontMgr.cpp \
    tools/fonts/SkTestTypeface.cpp \
    src/utils/SkJSON.cpp \
--- a/site/user/modules/canvaskit.md
+++ b/site/user/modules/canvaskit.md
@ -51,11 +51,11 @@ Samples
 </style>

 <div id=demo>
-  <h3>An Interactive Path (use your mouse)</h3>
+  <h3>An Interactive Path</h3>
  <figure>
    <canvas id=patheffect width=400 height=400></canvas>
    <figcaption>
-      <a href="https://jsfiddle.skia.org/canvaskit/12b9c5260a146275df95e5834278954eda4049277a99865ed560abd0eee5cafa"
+      <a href="https://jsfiddle.skia.org/canvaskit/79bc0e7a670ef4aa45254acfcd537ffe787b5b3333c45b4107e1ab8c898fc834"
          target=_blank rel=noopener>
        Star JSFiddle</a>
    </figcaption>
@ -96,7 +96,7 @@ Samples
  var locate_file = '';
  if (window.WebAssembly && typeof window.WebAssembly.compile === 'function') {
    console.log('WebAssembly is supported!');
-    locate_file = 'https://storage.googleapis.com/skia-cdn/canvaskit-wasm/0.0.2/bin/';
+    locate_file = 'https://storage.googleapis.com/skia-cdn/canvaskit-wasm/0.0.3/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>";
@ -113,6 +113,7 @@ Samples
  CanvasKitInit({
    locateFile: (file) => locate_file + file,
  }).then((CK) => {
+    CK.initFonts();
    CanvasKit = CK;
    DrawingExample(CanvasKit);
    InkExample(CanvasKit);
@ -152,6 +153,14 @@ Samples
    });
  });

+  function preventScrolling(canvas) {
+    canvas.addEventListener('touchmove', (e) => {
+      // Prevents touch events in the canvas from scrolling the canvas.
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  }
+
  function DrawingExample(CanvasKit) {
    const surface = CanvasKit.getWebGLSurface('patheffect');
    if (!surface) {
@ -163,6 +172,11 @@ Samples

    const paint = new CanvasKit.SkPaint();

+    const textPaint = new CanvasKit.SkPaint();
+    textPaint.setColor(CanvasKit.Color(40, 0, 0, 1.0));
+    textPaint.setTextSize(30);
+    textPaint.setAntiAlias(true);
+
    let i = 0;

    let X = 200;
@ -183,6 +197,7 @@ Samples
      canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));

      canvas.drawPath(path, paint);
+      canvas.drawText('Try Clicking!', 10, 380, textPaint);
      canvas.flush();
      dpe.delete();
      path.delete();
@ -191,13 +206,16 @@ Samples
    window.requestAnimationFrame(drawFrame);

    // Make animation interactive
-    document.getElementById('patheffect').addEventListener('mousemove', (e) => {
+    let interact = (e) => {
      if (!e.buttons) {
        return;
      }
      X = e.offsetX;
      Y = e.offsetY;
-    });
+    };
+    document.getElementById('patheffect').addEventListener('pointermove', interact);
+    document.getElementById('patheffect').addEventListener('pointerdown', interact);
+    preventScrolling(document.getElementById('patheffect'));

    // A client would need to delete this if it didn't go on for ever.
    //paint.delete();
@ -251,8 +269,9 @@ Samples
    }

    let hold = false;
-    document.getElementById('ink').addEventListener('mousemove', (e) => {
-      if (!e.buttons) {
+    let interact = (e) => {
+      let type = e.type;
+      if (type === 'lostpointercapture' || type === 'pointerup' || !e.pressure ) {
        hold = false;
        return;
      }
@ -267,7 +286,12 @@ Samples
        path.moveTo(e.offsetX, e.offsetY);
      }
      hold = true;
-    });
+    };
+    document.getElementById('ink').addEventListener('pointermove', interact);
+    document.getElementById('ink').addEventListener('pointerdown', interact);
+    document.getElementById('ink').addEventListener('lostpointercapture', interact);
+    document.getElementById('ink').addEventListener('pointerup', interact);
+    preventScrolling(document.getElementById('ink'));
    window.requestAnimationFrame(drawFrame);
  }

--- a/src/pathops/SkPathOpsTypes.cpp
+++ b/src/pathops/SkPathOpsTypes.cpp
@ -103,7 +103,6 @@ static bool less_or_equal_ulps(float a, float b, int epsilon) {
    return aBits < bBits + epsilon;
 }

-#ifndef SKOTTIE_HACK
 // equality using the same error term as between
 bool AlmostBequalUlps(float a, float b) {
    const int UlpsEpsilon = 2;
@ -228,7 +227,6 @@ double SkDCubeRoot(double x) {
    }
    return result;
 }
-#endif

 SkOpGlobalState::SkOpGlobalState(SkOpContourHead* head,
                                 SkArenaAlloc* allocator