2018-10-17 11:57:18 +00:00
|
|
|
// The increased timeout is especially needed with larger binaries
|
|
|
|
// like in the debug/gpu build
|
2018-10-18 14:00:00 +00:00
|
|
|
jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;
|
2018-10-16 14:15:01 +00:00
|
|
|
|
|
|
|
describe('CanvasKit\'s Path Behavior', function() {
|
|
|
|
// Note, don't try to print the CanvasKit object - it can cause Karma/Jasmine to lock up.
|
|
|
|
var CanvasKit = null;
|
|
|
|
const LoadCanvasKit = new Promise(function(resolve, reject) {
|
|
|
|
if (CanvasKit) {
|
|
|
|
resolve();
|
|
|
|
} else {
|
|
|
|
CanvasKitInit({
|
|
|
|
locateFile: (file) => '/canvaskit/'+file,
|
2019-01-04 19:16:19 +00:00
|
|
|
}).ready().then((_CanvasKit) => {
|
2018-10-16 14:15:01 +00:00
|
|
|
CanvasKit = _CanvasKit;
|
|
|
|
resolve();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
let container = document.createElement('div');
|
|
|
|
document.body.appendChild(container);
|
|
|
|
const CANVAS_WIDTH = 600;
|
|
|
|
const CANVAS_HEIGHT = 600;
|
|
|
|
|
|
|
|
beforeEach(function() {
|
|
|
|
container.innerHTML = `
|
|
|
|
<canvas width=600 height=600 id=test></canvas>
|
|
|
|
<canvas width=600 height=600 id=report></canvas>`;
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(function() {
|
|
|
|
container.innerHTML = '';
|
|
|
|
});
|
|
|
|
|
|
|
|
function reportSurface(surface, testname, done) {
|
|
|
|
// In docker, the webgl canvas is blank, but the surface has the pixel
|
|
|
|
// data. So, we copy it out and draw it to a normal canvas to take a picture.
|
|
|
|
// To be consistent across CPU and GPU, we just do it for all configurations
|
|
|
|
// (even though the CPU canvas shows up after flush just fine).
|
2018-12-04 18:57:36 +00:00
|
|
|
let pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
|
|
|
|
pixels = new Uint8ClampedArray(pixels.buffer);
|
2018-10-16 14:15:01 +00:00
|
|
|
var imageData = new ImageData(pixels, CANVAS_WIDTH, CANVAS_HEIGHT);
|
|
|
|
|
|
|
|
let reportingCanvas = document.getElementById('report');
|
|
|
|
reportingCanvas.getContext('2d').putImageData(imageData, 0, 0);
|
|
|
|
reportCanvas(reportingCanvas, testname).then(() => {
|
|
|
|
done();
|
|
|
|
}).catch(reportError(done));
|
|
|
|
}
|
|
|
|
|
|
|
|
it('can draw a path', function(done) {
|
2018-11-05 12:51:40 +00:00
|
|
|
LoadCanvasKit.then(catchException(done, () => {
|
2018-10-16 14:15:01 +00:00
|
|
|
// This is taken from example.html
|
2018-10-17 11:57:18 +00:00
|
|
|
const surface = CanvasKit.MakeCanvasSurface('test');
|
2018-10-16 14:15:01 +00:00
|
|
|
expect(surface).toBeTruthy('Could not make surface')
|
|
|
|
if (!surface) {
|
|
|
|
done();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const canvas = surface.getCanvas();
|
|
|
|
const paint = new CanvasKit.SkPaint();
|
|
|
|
paint.setStrokeWidth(1.0);
|
|
|
|
paint.setAntiAlias(true);
|
|
|
|
paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
|
2018-11-05 12:51:40 +00:00
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
2018-10-16 14:15:01 +00:00
|
|
|
|
|
|
|
const path = new CanvasKit.SkPath();
|
|
|
|
path.moveTo(20, 5);
|
|
|
|
path.lineTo(30, 20);
|
|
|
|
path.lineTo(40, 10);
|
|
|
|
path.lineTo(50, 20);
|
|
|
|
path.lineTo(60, 0);
|
|
|
|
path.lineTo(20, 5);
|
|
|
|
|
|
|
|
path.moveTo(20, 80);
|
|
|
|
path.cubicTo(90, 10, 160, 150, 190, 10);
|
|
|
|
|
|
|
|
path.moveTo(36, 148);
|
|
|
|
path.quadTo(66, 188, 120, 136);
|
|
|
|
path.lineTo(36, 148);
|
|
|
|
|
|
|
|
path.moveTo(150, 180);
|
|
|
|
path.arcTo(150, 100, 50, 200, 20);
|
|
|
|
path.lineTo(160, 160);
|
|
|
|
|
|
|
|
path.moveTo(20, 120);
|
|
|
|
path.lineTo(20, 120);
|
|
|
|
|
|
|
|
path.transform([2, 0, 0,
|
|
|
|
0, 2, 0,
|
|
|
|
0, 0, 1 ])
|
|
|
|
|
|
|
|
canvas.drawPath(path, paint);
|
|
|
|
surface.flush();
|
|
|
|
|
|
|
|
path.delete();
|
|
|
|
paint.delete();
|
|
|
|
|
|
|
|
reportSurface(surface, 'path_api_example', done);
|
2018-11-05 12:51:40 +00:00
|
|
|
}));
|
2018-10-16 14:15:01 +00:00
|
|
|
// See CanvasKit for more tests, since they share implementation
|
|
|
|
});
|
|
|
|
|
|
|
|
function starPath(CanvasKit, X=128, Y=128, R=116) {
|
|
|
|
let p = new CanvasKit.SkPath();
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
it('can apply an effect and draw text', function(done) {
|
2018-11-05 12:51:40 +00:00
|
|
|
LoadCanvasKit.then(catchException(done, () => {
|
2018-10-17 11:57:18 +00:00
|
|
|
const surface = CanvasKit.MakeCanvasSurface('test');
|
2018-10-16 14:15:01 +00:00
|
|
|
expect(surface).toBeTruthy('Could not make surface')
|
|
|
|
if (!surface) {
|
|
|
|
done();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const canvas = surface.getCanvas();
|
|
|
|
const path = starPath(CanvasKit);
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
const dpe = CanvasKit.MakeSkDashPathEffect([15, 5, 5, 10], 1);
|
|
|
|
|
|
|
|
paint.setPathEffect(dpe);
|
2018-11-05 12:51:40 +00:00
|
|
|
paint.setStyle(CanvasKit.PaintStyle.Stroke);
|
2018-10-16 14:15:01 +00:00
|
|
|
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(path, paint);
|
|
|
|
canvas.drawText('This is text', 10, 280, textPaint);
|
|
|
|
surface.flush();
|
|
|
|
dpe.delete();
|
|
|
|
path.delete();
|
|
|
|
|
|
|
|
reportSurface(surface, 'effect_and_text_example', done);
|
2018-11-05 12:51:40 +00:00
|
|
|
}));
|
2018-10-16 14:15:01 +00:00
|
|
|
});
|
|
|
|
});
|