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>
diff --git a/experimental/canvaskit/canvas-kit/example.html b/experimental/canvaskit/canvas-kit/example.html
index 1130b2a..85aeaa7 100644
--- 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);
}
diff --git a/experimental/canvaskit/canvaskit_bindings.cpp b/experimental/canvaskit/canvaskit_bindings.cpp
index 203d41c..004a069 100644
--- a/experimental/canvaskit/canvaskit_bindings.cpp
+++ b/experimental/canvaskit/canvaskit_bindings.cpp
@@ -218,8 +218,7 @@
.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)
diff --git a/experimental/canvaskit/compile.sh b/experimental/canvaskit/compile.sh
index 0c45186..7dabb10 100755
--- a/experimental/canvaskit/compile.sh
+++ b/experimental/canvaskit/compile.sh
@@ -20,10 +20,11 @@
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 @@
./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 @@
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 @@
--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 @@
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 @@
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 \
diff --git a/site/user/modules/canvaskit.md b/site/user/modules/canvaskit.md
index d1d4c2d..32bf626 100644
--- a/site/user/modules/canvaskit.md
+++ b/site/user/modules/canvaskit.md
@@ -51,11 +51,11 @@
</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 @@
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 @@
CanvasKitInit({
locateFile: (file) => locate_file + file,
}).then((CK) => {
+ CK.initFonts();
CanvasKit = CK;
DrawingExample(CanvasKit);
InkExample(CanvasKit);
@@ -152,6 +153,14 @@
});
});
+ 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 @@
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 @@
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 @@
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 @@
}
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 @@
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);
}
diff --git a/src/pathops/SkPathOpsTypes.cpp b/src/pathops/SkPathOpsTypes.cpp
index 5ced583..df46c20 100644
--- a/src/pathops/SkPathOpsTypes.cpp
+++ b/src/pathops/SkPathOpsTypes.cpp
@@ -103,7 +103,6 @@
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 @@
}
return result;
}
-#endif
SkOpGlobalState::SkOpGlobalState(SkOpContourHead* head,
SkArenaAlloc* allocator