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

update canvaskit docs to new API

Browse Source 
Also add a dynamic text shaping demo

No-Try: true
Docs-Preview: https://skia.org/?cl=195440
Bug: skia:
Change-Id: I1e220cecae080a6a643fed8a1b9771ba8fe60915
Reviewed-on: https://skia-review.googlesource.com/c/195440
Reviewed-by: Heather Miller <hcm@google.com>
Commit-Queue: Kevin Lubick <kjlubick@google.com>
This commit is contained in:
Kevin Lubick 2019-02-27 08:42:33 -05:00 committed by Skia Commit-Bot
parent 0f5eac7fc6
commit dc822b1c9e
2 changed files with 146 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
experimental/canvaskit/canvaskit/example.html
View File

@ -45,6 +45,7 @@
<h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
<canvas id=shape1 width=600 height=600></canvas>
<canvas id=shape2 width=600 height=600></canvas>
<h2> Skottie </h2>
<canvas id=sk_legos width=300 height=300></canvas>
@ -97,6 +98,7 @@
GradiantAPI1(CanvasKit);
TextShapingAPI1(CanvasKit, notoserifData);
TextShapingAPI2(CanvasKit, notoserifData);
});
fetch('https://storage.googleapis.com/skia-cdn/misc/lego_loader.json').then((resp) => {
@ -146,6 +148,7 @@
resp.arrayBuffer().then((buffer) => {
notoserifData = buffer;
TextShapingAPI1(CanvasKit, notoserifData);
TextShapingAPI2(CanvasKit, notoserifData);
});
});
@ -1160,4 +1163,67 @@
surface.delete();
}
function TextShapingAPI2(CanvasKit, notoserifData) {
if (!notoserifData || !CanvasKit) {
return;
}
const surface = CanvasKit.MakeCanvasSurface('shape2');
if (!surface) {
console.error('Could not make surface');
return;
}
const context = CanvasKit.currentContext();
const canvas = surface.getCanvas();
const paint = new CanvasKit.SkPaint();
paint.setColor(CanvasKit.BLUE);
paint.setStyle(CanvasKit.PaintStyle.Stroke);
const fontMgr = CanvasKit.SkFontMgr.RefDefault();
const notoSerif = fontMgr.MakeTypefaceFromData(notoserifData);
const textPaint = new CanvasKit.SkPaint();
const bigFont = new CanvasKit.SkFont(notoSerif, 40);
const smallFont = new CanvasKit.SkFont(notoSerif, 25);
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 = 80;
let Y = 90;
function drawFrame() {
CanvasKit.setCurrentContext(context);
canvas.clear(CanvasKit.TRANSPARENT);
const shapedText = new CanvasKit.ShapedText({
font: smallFont,
leftToRight: true,
text: TEXT,
width: (X * 2) - 10,
});
canvas.drawRect(CanvasKit.LTRBRect(10, 10, X*2, Y*2), paint);
canvas.drawText(shapedText, 10, 40, textPaint, smallFont);
canvas.drawText('Try Clicking!', 10, 480, textPaint, bigFont);
surface.flush();
shapedText.delete();
window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);
// Make animation interactive
let interact = (e) => {
if (!e.pressure) {
return;
}
X = e.offsetX;
Y = e.offsetY;
};
document.getElementById('shape2').addEventListener('pointermove', interact);
document.getElementById('shape2').addEventListener('pointerdown', interact);
preventScrolling(document.getElementById('shape2'));
}
</script>

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

@ -51,11 +51,11 @@ Samples
</style>
<div id=demo>
<h3>An Interactive Path</h3>
<h3>Go beyond the HTML Canvas2D</h3>
<figure>
<canvas id=patheffect width=400 height=400></canvas>
<figcaption>
<a href="https://jsfiddle.skia.org/canvaskit/28004d8841e7e497013263598241a3c1edc21dc1cf87a679abba307f39fa5fe6"
<a href="https://jsfiddle.skia.org/canvaskit/ea89749ae8c90bce807ea2e7e34fb7b09b950cee70d9db0a9cdfd2d67bd48ef0"
target=_blank rel=noopener>
Star JSFiddle</a>
</figcaption>
@ -87,6 +87,16 @@ Samples
<canvas id=sk_onboarding width=500 height=500></canvas>
</a>
<h3>Text Shaping using ICU and Harfbuzz</h3>
<figure>
<canvas id=shaping width=400 height=400></canvas>
<figcaption>
<a href="https://jsfiddle.skia.org/canvaskit/d5c61a106d57ff4ada119a46ddc3bfa479d343330d0c9e50da21f4ef113d0dee"
target=_blank rel=noopener>
Text Shaping JSFiddle</a>
</figcaption>
</figure>
</div>
<script type="text/javascript" charset="utf-8">
@ -96,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.3.1/bin/';
locate_file = 'https://unpkg.com/canvaskit-wasm@0.4.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>";
@ -116,6 +126,7 @@ Samples
CanvasKit = CK;
DrawingExample(CanvasKit);
InkExample(CanvasKit);
ShapingExample(CanvasKit);
// Set bounds to fix the 4:3 resolution of the legos
SkottieExample(CanvasKit, 'sk_legos', legoJSON, {fLeft: -50, fTop: 0, fRight: 350, fBottom: 300});
// Re-size to fit
@ -173,9 +184,10 @@ Samples
const textPaint = new CanvasKit.SkPaint();
textPaint.setColor(CanvasKit.Color(40, 0, 0, 1.0));
textPaint.setTextSize(30);
textPaint.setAntiAlias(true);
const textFont = new CanvasKit.SkFont(null, 30);
let i = 0;
let X = 200;
@ -196,7 +208,7 @@ Samples
canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
canvas.drawPath(path, paint);
canvas.drawText('Try Clicking!', 10, 380, textPaint);
canvas.drawText('Try Clicking!', 10, 380, textPaint, textFont);
canvas.flush();
dpe.delete();
path.delete();
@ -216,8 +228,9 @@ Samples
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();
// A client would need to delete this if it didn't go on forever.
// font.delete();
// paint.delete();
}
function InkExample(CanvasKit) {
@ -294,6 +307,66 @@ Samples
window.requestAnimationFrame(drawFrame);
}
function ShapingExample(CanvasKit) {
const surface = CanvasKit.MakeCanvasSurface('shaping');
if (!surface) {
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,
});
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);
surface.flush();
shapedText.delete();
window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);
// Make animation interactive
let interact = (e) => {
if (!e.pressure) {
return;
}
X = e.offsetX;
Y = e.offsetY;
};
document.getElementById('shaping').addEventListener('pointermove', interact);
document.getElementById('shaping').addEventListener('pointerdown', interact);
document.getElementById('shaping').addEventListener('lostpointercapture', interact);
document.getElementById('shaping').addEventListener('pointerup', interact);
preventScrolling(document.getElementById('shaping'));
window.requestAnimationFrame(drawFrame);
}
function starPath(CanvasKit, X=128, Y=128, R=116) {
let p = new CanvasKit.SkPath();
p.moveTo(X + R, Y);