3b760b6fa8
Also rename //modules/canvaskit/canvaskit to //modules/canvaskit/npm_build to make it more clear the purpose of that folder (what we ship to npm and stage our builds for local testing). Bug: skia:11203 Change-Id: I4299ded97d14f4155c36798d60e88a660ce6fe6a Reviewed-on: https://skia-review.googlesource.com/c/skia/+/372392 Reviewed-by: Kevin Lubick <kjlubick@google.com>
113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
const CanvasKitInit = require('./bin/canvaskit.js');
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
CanvasKitInit({
|
|
locateFile: (file) => __dirname + '/bin/'+file,
|
|
}).then((CanvasKit) => {
|
|
let canvas = CanvasKit.MakeCanvas(300, 300);
|
|
|
|
let img = fs.readFileSync(path.join(__dirname, 'test.png'));
|
|
img = canvas.decodeImage(img);
|
|
|
|
let fontData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff'));
|
|
canvas.loadFont(fontData, {
|
|
'family': 'Roboto',
|
|
'style': 'normal',
|
|
'weight': '400',
|
|
});
|
|
|
|
let ctx = canvas.getContext('2d');
|
|
ctx.font = '30px Roboto';
|
|
ctx.rotate(.1);
|
|
ctx.fillText('Awesome ', 50, 100);
|
|
ctx.strokeText('Groovy!', 250, 100);
|
|
|
|
// Draw line under Awesome
|
|
ctx.strokeStyle = 'rgba(125,0,0,0.5)';
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 6;
|
|
ctx.lineTo(50, 102);
|
|
ctx.lineTo(250, 102);
|
|
ctx.stroke();
|
|
|
|
// squished vertically
|
|
ctx.globalAlpha = 0.7
|
|
ctx.imageSmoothingQuality = 'medium';
|
|
ctx.drawImage(img, 150, 150, 150, 100);
|
|
ctx.rotate(-.2);
|
|
ctx.imageSmoothingEnabled = false;
|
|
ctx.drawImage(img, 100, 150, 400, 350, 10, 200, 150, 100);
|
|
|
|
console.log('<img src="' + canvas.toDataURL() + '" />');
|
|
|
|
fancyAPI(CanvasKit);
|
|
});
|
|
|
|
function fancyAPI(CanvasKit) {
|
|
let surface = CanvasKit.MakeSurface(300, 300);
|
|
const canvas = surface.getCanvas();
|
|
|
|
const paint = new CanvasKit.Paint();
|
|
|
|
const fontMgr = CanvasKit.FontMgr.RefDefault();
|
|
let robotoData = fs.readFileSync(path.join(__dirname, './Roboto-Regular.woff'));
|
|
const roboto = fontMgr.MakeTypefaceFromData(robotoData);
|
|
|
|
const textPaint = new CanvasKit.Paint();
|
|
textPaint.setColor(CanvasKit.Color(40, 0, 0));
|
|
textPaint.setAntiAlias(true);
|
|
|
|
const textFont = new CanvasKit.Font(roboto, 30);
|
|
|
|
const skpath = starPath(CanvasKit);
|
|
const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], 1);
|
|
|
|
paint.setPathEffect(dpe);
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
|
paint.setStrokeWidth(5.0);
|
|
paint.setAntiAlias(true);
|
|
paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
|
|
|
|
canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
|
|
|
|
canvas.drawPath(skpath, paint);
|
|
canvas.drawText('Try Clicking!', 10, 280, textPaint, textFont);
|
|
|
|
surface.flush();
|
|
|
|
const img = surface.makeImageSnapshot();
|
|
if (!img) {
|
|
console.error('no snapshot');
|
|
return;
|
|
}
|
|
const pngBytes = img.encodeToBytes();
|
|
if (!pngBytes) {
|
|
console.error('encoding failure');
|
|
return
|
|
}
|
|
// See https://stackoverflow.com/a/12713326
|
|
let b64encoded = Buffer.from(pngBytes).toString('base64');
|
|
console.log(`<img src="data:image/png;base64,${b64encoded}" />`);
|
|
|
|
// These delete calls free up memeory in the C++ WASM memory block.
|
|
dpe.delete();
|
|
skpath.delete();
|
|
textPaint.delete();
|
|
paint.delete();
|
|
roboto.delete();
|
|
textFont.delete();
|
|
|
|
surface.dispose();
|
|
}
|
|
|
|
function starPath(CanvasKit, X=128, Y=128, R=116) {
|
|
let p = new CanvasKit.Path();
|
|
p.moveTo(X + R, Y);
|
|
for (let i = 1; i < 8; i++) {
|
|
let a = 2.6927937 * i;
|
|
p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a));
|
|
}
|
|
return p;
|
|
}
|