AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[canvaskit] update shaping example to have emoji

Browse Source 
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>
This commit is contained in:
Kevin Lubick 2019-12-04 15:25:51 -05:00
parent f5542b6aa3
commit 0af13b3caf
2 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/canvaskit/canvaskit/extra.html
View File

@ -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;

108
site/user/modules/canvaskit.md
View File

@ -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();
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);
});
});
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 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 font = new CanvasKit.SkFont(null, 18);
const fontPaint = new CanvasKit.SkPaint();
fontPaint.setStyle(CanvasKit.PaintStyle.Fill);
fontPaint.setAntiAlias(true);
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. ';
skcanvas.drawText(`Fetching Font data...`, 5, 450, fontPaint, font);
surface.flush();
let X = 280;
let Y = 190;
const context = CanvasKit.currentContext();
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.TRANSPARENT);
skcanvas.clear(CanvasKit.WHITE);
const shapedText = new CanvasKit.ShapedText({
font: smallFont,
leftToRight: true,
text: TEXT,
width: X - 10,
});
const wrapTo = 350 + 150 * Math.sin(Date.now() / 2000);
paragraph.layout(wrapTo);
skcanvas.drawParagraph(paragraph, 0, 0);
skcanvas.drawLine(wrapTo, 0, wrapTo, 400, fontPaint);
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 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();
shapedText.delete();
window.requestAnimationFrame(drawFrame);
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);