experimental/canvaskit/tests/path.spec.js - skia - Git at Google

 // The increased timeout is especially needed with larger binaries
 // like in the debug/gpu build
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;

 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,
             }).ready().then((_CanvasKit) => {
                 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).
         let pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
         pixels = new Uint8ClampedArray(pixels.buffer);
         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) {
         LoadCanvasKit.then(catchException(done, () => {
             // This is taken from example.html
             const surface = CanvasKit.MakeCanvasSurface('test');
             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));
             paint.setStyle(CanvasKit.PaintStyle.Stroke);

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

             let rrect = new CanvasKit.SkPath()
                                .addRoundRect(100, 10, 140, 62,
                                              10, 4, true);

             canvas.drawPath(rrect, paint);
             rrect.delete();

             surface.flush();

             path.delete();
             paint.delete();

             reportSurface(surface, 'path_api_example', done);
         }));
         // See PathKit for more tests, since they share implementation
     });

     it('can draw directly to a canvas', function(done) {
         LoadCanvasKit.then(catchException(done, () => {
             // This is taken from example.html
             const surface = CanvasKit.MakeCanvasSurface('test');
             expect(surface).toBeTruthy('Could not make surface')
             if (!surface) {
                 done();
                 return;
             }
             const canvas = surface.getCanvas();
             const paint = new CanvasKit.SkPaint();
             paint.setStrokeWidth(2.0);
             paint.setAntiAlias(true);
             paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
             paint.setStyle(CanvasKit.PaintStyle.Stroke);

             canvas.drawLine(3, 10, 30, 15, paint);
             canvas.drawRoundRect(CanvasKit.LTRBRect(5, 35, 45, 80), 15, 10, paint);

             canvas.drawOval(CanvasKit.LTRBRect(5, 35, 45, 80), paint);

             canvas.drawArc(CanvasKit.LTRBRect(55, 35, 95, 80), 15, 270, true, paint);

             const font = new CanvasKit.SkFont(null, 20);
             canvas.drawText('this is ascii text', 5, 100, font, paint);

             const blob = CanvasKit.SkTextBlob.MakeFromText('Unicode chars 💩 é É ص', font);
             canvas.drawTextBlob(blob, 5, 130, paint);

             surface.flush();
             font.delete();
             blob.delete();
             paint.delete();

             reportSurface(surface, 'canvas_api_example', done);
         }));
         // See canvas2d for more API tests
     });

     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) {
         LoadCanvasKit.then(catchException(done, () => {
             const surface = CanvasKit.MakeCanvasSurface('test');
             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.setAntiAlias(true);

             const textFont = new CanvasKit.SkFont(null, 30);

             const dpe = CanvasKit.MakeSkDashPathEffect([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(path, paint);
             canvas.drawText('This is text', 10, 280, textFont, textPaint);
             surface.flush();
             dpe.delete();
             path.delete();

             reportSurface(surface, 'effect_and_text_example', done);
         }));
     });

     it('can create a path from an SVG string', function(done) {
         LoadCanvasKit.then(catchException(done, () => {
             //.This is a parallelagram from
             // https://upload.wikimedia.org/wikipedia/commons/e/e7/Simple_parallelogram.svg
             let path = CanvasKit.MakePathFromSVGString('M 205,5 L 795,5 L 595,295 L 5,295 L 205,5 z');

             let cmds = path.toCmds();
             expect(cmds).toBeTruthy();
             // 1 move, 4 lines, 1 close
             // each element in cmds is an array, with index 0 being the verb, and the rest being args
             expect(cmds.length).toBe(6);
             expect(cmds).toEqual([[CanvasKit.MOVE_VERB, 205, 5],
                                   [CanvasKit.LINE_VERB, 795, 5],
                                   [CanvasKit.LINE_VERB, 595, 295],
                                   [CanvasKit.LINE_VERB, 5, 295],
                                   [CanvasKit.LINE_VERB, 205, 5],
                                   [CanvasKit.CLOSE_VERB]]);
             path.delete();
             done();
         }));
     });

      it('can create an SVG string from a path', function(done) {
         LoadCanvasKit.then(catchException(done, () => {
             let cmds = [[CanvasKit.MOVE_VERB, 205, 5],
                        [CanvasKit.LINE_VERB, 795, 5],
                        [CanvasKit.LINE_VERB, 595, 295],
                        [CanvasKit.LINE_VERB, 5, 295],
                        [CanvasKit.LINE_VERB, 205, 5],
                        [CanvasKit.CLOSE_VERB]];
             let path = CanvasKit.MakePathFromCmds(cmds);

             let svgStr = path.toSVGString();
             // We output it in terse form, which is different than Wikipedia's version
             expect(svgStr).toEqual('M205 5L795 5L595 295L5 295L205 5Z');
             path.delete();
             done();
         }));
     });
 });
	// The increased timeout is especially needed with larger binaries
	// like in the debug/gpu build
	jasmine.DEFAULT_TIMEOUT_INTERVAL = 20000;

	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,
	}).ready().then((_CanvasKit) => {
	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).
	let pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
	pixels = new Uint8ClampedArray(pixels.buffer);
	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) {
	LoadCanvasKit.then(catchException(done, () => {
	// This is taken from example.html
	const surface = CanvasKit.MakeCanvasSurface('test');
	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));
	paint.setStyle(CanvasKit.PaintStyle.Stroke);

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

	let rrect = new CanvasKit.SkPath()
	.addRoundRect(100, 10, 140, 62,
	10, 4, true);

	canvas.drawPath(rrect, paint);
	rrect.delete();

	surface.flush();

	path.delete();
	paint.delete();

	reportSurface(surface, 'path_api_example', done);
	}));
	// See PathKit for more tests, since they share implementation
	});

	it('can draw directly to a canvas', function(done) {
	LoadCanvasKit.then(catchException(done, () => {
	// This is taken from example.html
	const surface = CanvasKit.MakeCanvasSurface('test');
	expect(surface).toBeTruthy('Could not make surface')
	if (!surface) {
	done();
	return;
	}
	const canvas = surface.getCanvas();
	const paint = new CanvasKit.SkPaint();
	paint.setStrokeWidth(2.0);
	paint.setAntiAlias(true);
	paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
	paint.setStyle(CanvasKit.PaintStyle.Stroke);

	canvas.drawLine(3, 10, 30, 15, paint);
	canvas.drawRoundRect(CanvasKit.LTRBRect(5, 35, 45, 80), 15, 10, paint);

	canvas.drawOval(CanvasKit.LTRBRect(5, 35, 45, 80), paint);

	canvas.drawArc(CanvasKit.LTRBRect(55, 35, 95, 80), 15, 270, true, paint);

	const font = new CanvasKit.SkFont(null, 20);
	canvas.drawText('this is ascii text', 5, 100, font, paint);

	const blob = CanvasKit.SkTextBlob.MakeFromText('Unicode chars 💩 é É ص', font);
	canvas.drawTextBlob(blob, 5, 130, paint);

	surface.flush();
	font.delete();
	blob.delete();
	paint.delete();

	reportSurface(surface, 'canvas_api_example', done);
	}));
	// See canvas2d for more API tests
	});

	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) {
	LoadCanvasKit.then(catchException(done, () => {
	const surface = CanvasKit.MakeCanvasSurface('test');
	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.setAntiAlias(true);

	const textFont = new CanvasKit.SkFont(null, 30);

	const dpe = CanvasKit.MakeSkDashPathEffect([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(path, paint);
	canvas.drawText('This is text', 10, 280, textFont, textPaint);
	surface.flush();
	dpe.delete();
	path.delete();

	reportSurface(surface, 'effect_and_text_example', done);
	}));
	});

	it('can create a path from an SVG string', function(done) {
	LoadCanvasKit.then(catchException(done, () => {
	//.This is a parallelagram from
	// https://upload.wikimedia.org/wikipedia/commons/e/e7/Simple_parallelogram.svg
	let path = CanvasKit.MakePathFromSVGString('M 205,5 L 795,5 L 595,295 L 5,295 L 205,5 z');

	let cmds = path.toCmds();
	expect(cmds).toBeTruthy();
	// 1 move, 4 lines, 1 close
	// each element in cmds is an array, with index 0 being the verb, and the rest being args
	expect(cmds.length).toBe(6);
	expect(cmds).toEqual([[CanvasKit.MOVE_VERB, 205, 5],
	[CanvasKit.LINE_VERB, 795, 5],
	[CanvasKit.LINE_VERB, 595, 295],
	[CanvasKit.LINE_VERB, 5, 295],
	[CanvasKit.LINE_VERB, 205, 5],
	[CanvasKit.CLOSE_VERB]]);
	path.delete();
	done();
	}));
	});

	it('can create an SVG string from a path', function(done) {
	LoadCanvasKit.then(catchException(done, () => {
	let cmds = [[CanvasKit.MOVE_VERB, 205, 5],
	[CanvasKit.LINE_VERB, 795, 5],
	[CanvasKit.LINE_VERB, 595, 295],
	[CanvasKit.LINE_VERB, 5, 295],
	[CanvasKit.LINE_VERB, 205, 5],
	[CanvasKit.CLOSE_VERB]];
	let path = CanvasKit.MakePathFromCmds(cmds);

	let svgStr = path.toSVGString();
	// We output it in terse form, which is different than Wikipedia's version
	expect(svgStr).toEqual('M205 5L795 5L595 295L5 295L205 5Z');
	path.delete();
	done();
	}));
	});
	});