1 describe('Path Behavior', () => {
4 beforeEach(async () => {
6 container = document.createElement('div');
7 container.innerHTML = `
8 <canvas width=600 height=600 id=test></canvas>
9 <canvas width=600 height=600 id=report></canvas>`;
10 document.body.appendChild(container);
14 document.body.removeChild(container);
17 gm('path_api_example', (canvas) => {
18 const paint = new CanvasKit.Paint();
19 paint.setStrokeWidth(1.0);
20 paint.setAntiAlias(true);
21 paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
22 paint.setStyle(CanvasKit.PaintStyle.Stroke);
24 const path = new CanvasKit.Path();
33 path.cubicTo(90, 10, 160, 150, 190, 10);
36 path.quadTo(66, 188, 120, 136);
39 path.moveTo(150, 180);
40 path.arcToTangent(150, 100, 50, 200, 20);
41 path.lineTo(160, 160);
46 path.transform([2, 0, 0,
50 canvas.drawPath(path, paint);
52 const rrect = CanvasKit.RRectXY([100, 10, 140, 62], 10, 4);
54 const rrectPath = new CanvasKit.Path().addRRect(rrect, true);
56 canvas.drawPath(rrectPath, paint);
61 // See PathKit for more tests, since they share implementation
64 it('can create a path from an SVG string', () => {
65 //.This is a parallelogram from
66 // https://upload.wikimedia.org/wikipedia/commons/e/e7/Simple_parallelogram.svg
67 const path = CanvasKit.Path.MakeFromSVGString(
68 'M 205,5 L 795,5 L 595,295 L 5,295 L 205,5 z');
70 const cmds = path.toCmds();
71 expect(cmds).toBeTruthy();
72 // 1 move, 4 lines, 1 close
73 // each element in cmds is an array, with index 0 being the verb, and the rest being args
74 expect(cmds).toEqual(Float32Array.of(
75 CanvasKit.MOVE_VERB, 205, 5,
76 CanvasKit.LINE_VERB, 795, 5,
77 CanvasKit.LINE_VERB, 595, 295,
78 CanvasKit.LINE_VERB, 5, 295,
79 CanvasKit.LINE_VERB, 205, 5,
80 CanvasKit.CLOSE_VERB));
84 it('can create a path by combining two other paths', () => {
85 // Get the intersection of two overlapping squares and verify that it is the smaller square.
86 const pathOne = new CanvasKit.Path();
87 pathOne.addRect([10, 10, 20, 20]);
89 const pathTwo = new CanvasKit.Path();
90 pathTwo.addRect([15, 15, 30, 30]);
92 const path = CanvasKit.Path.MakeFromOp(pathOne, pathTwo, CanvasKit.PathOp.Intersect);
93 const cmds = path.toCmds();
94 expect(cmds).toBeTruthy();
95 expect(cmds).toEqual(Float32Array.of(
96 CanvasKit.MOVE_VERB, 15, 15,
97 CanvasKit.LINE_VERB, 20, 15,
98 CanvasKit.LINE_VERB, 20, 20,
99 CanvasKit.LINE_VERB, 15, 20,
100 CanvasKit.CLOSE_VERB));
106 it('can create an SVG string from a path', () => {
107 const cmds = [CanvasKit.MOVE_VERB, 205, 5,
108 CanvasKit.LINE_VERB, 795, 5,
109 CanvasKit.LINE_VERB, 595, 295,
110 CanvasKit.LINE_VERB, 5, 295,
111 CanvasKit.LINE_VERB, 205, 5,
112 CanvasKit.CLOSE_VERB];
113 const path = CanvasKit.Path.MakeFromCmds(cmds);
115 const svgStr = path.toSVGString();
116 // We output it in terse form, which is different than Wikipedia's version
117 expect(svgStr).toEqual('M205 5L795 5L595 295L5 295L205 5Z');
121 it('can create a path with malloced verbs, points, weights', () => {
122 const mVerbs = CanvasKit.Malloc(Uint8Array, 6);
123 const mPoints = CanvasKit.Malloc(Float32Array, 18);
124 const mWeights = CanvasKit.Malloc(Float32Array, 1);
125 mVerbs.toTypedArray().set([CanvasKit.MOVE_VERB, CanvasKit.LINE_VERB,
126 CanvasKit.QUAD_VERB, CanvasKit.CONIC_VERB, CanvasKit.CUBIC_VERB, CanvasKit.CLOSE_VERB
129 mPoints.toTypedArray().set([
133 9,10,11,12, // conicTo
134 13,14,15,16,17,18, // cubicTo
137 mWeights.toTypedArray().set([117]);
139 let path = CanvasKit.Path.MakeFromVerbsPointsWeights(mVerbs, mPoints, mWeights);
141 let cmds = path.toCmds();
142 expect(cmds).toEqual(Float32Array.of(
143 CanvasKit.MOVE_VERB, 1, 2,
144 CanvasKit.LINE_VERB, 3, 4,
145 CanvasKit.QUAD_VERB, 5, 6, 7, 8,
146 CanvasKit.CONIC_VERB, 9, 10, 11, 12, 117,
147 CanvasKit.CUBIC_VERB, 13, 14, 15, 16, 17, 18,
148 CanvasKit.CLOSE_VERB,
152 // If given insufficient points, it stops early (but doesn't read out of bounds).
153 path = CanvasKit.Path.MakeFromVerbsPointsWeights(mVerbs, mPoints.subarray(0, 10), mWeights);
155 cmds = path.toCmds();
156 expect(cmds).toEqual(Float32Array.of(
157 CanvasKit.MOVE_VERB, 1, 2,
158 CanvasKit.LINE_VERB, 3, 4,
159 CanvasKit.QUAD_VERB, 5, 6, 7, 8,
162 CanvasKit.Free(mVerbs);
163 CanvasKit.Free(mPoints);
164 CanvasKit.Free(mWeights);
167 it('can create and update a path with verbs and points (no weights)', () => {
168 const path = CanvasKit.Path.MakeFromVerbsPointsWeights(
169 [CanvasKit.MOVE_VERB, CanvasKit.LINE_VERB],
171 let cmds = path.toCmds();
172 expect(cmds).toEqual(Float32Array.of(
173 CanvasKit.MOVE_VERB, 1, 2,
174 CanvasKit.LINE_VERB, 3, 4
177 path.addVerbsPointsWeights(
178 [CanvasKit.QUAD_VERB, CanvasKit.CLOSE_VERB],
182 cmds = path.toCmds();
183 expect(cmds).toEqual(Float32Array.of(
184 CanvasKit.MOVE_VERB, 1, 2,
185 CanvasKit.LINE_VERB, 3, 4,
186 CanvasKit.QUAD_VERB, 5, 6, 7, 8,
193 it('can add points to a path in bulk', () => {
194 const mVerbs = CanvasKit.Malloc(Uint8Array, 6);
195 const mPoints = CanvasKit.Malloc(Float32Array, 18);
196 const mWeights = CanvasKit.Malloc(Float32Array, 1);
197 mVerbs.toTypedArray().set([CanvasKit.MOVE_VERB, CanvasKit.LINE_VERB,
198 CanvasKit.QUAD_VERB, CanvasKit.CONIC_VERB, CanvasKit.CUBIC_VERB, CanvasKit.CLOSE_VERB
201 mPoints.toTypedArray().set([
205 9,10,11,12, // conicTo
206 13,14,15,16,17,18, // cubicTo
209 mWeights.toTypedArray().set([117]);
211 const path = new CanvasKit.Path();
213 path.addVerbsPointsWeights(mVerbs, mPoints, mWeights);
215 let cmds = path.toCmds();
216 expect(cmds).toEqual(Float32Array.of(
217 CanvasKit.MOVE_VERB, 0, 0,
218 CanvasKit.LINE_VERB, 77, 88,
219 CanvasKit.MOVE_VERB, 1, 2,
220 CanvasKit.LINE_VERB, 3, 4,
221 CanvasKit.QUAD_VERB, 5, 6, 7, 8,
222 CanvasKit.CONIC_VERB, 9, 10, 11, 12, 117,
223 CanvasKit.CUBIC_VERB, 13, 14, 15, 16, 17, 18,
224 CanvasKit.CLOSE_VERB,
228 cmds = path.toCmds();
229 expect(cmds).toEqual(new Float32Array(0));
232 CanvasKit.Free(mVerbs);
233 CanvasKit.Free(mPoints);
234 CanvasKit.Free(mWeights);
237 it('can retrieve points from a path', () => {
238 const path = new CanvasKit.Path();
239 path.addRect([10, 15, 20, 25]);
241 let pt = path.getPoint(0);
242 expect(pt[0]).toEqual(10);
243 expect(pt[1]).toEqual(15);
245 path.getPoint(2, pt);
246 expect(pt[0]).toEqual(20);
247 expect(pt[1]).toEqual(25);
249 path.getPoint(1000, pt); // off the end returns (0, 0) as per the docs.
250 expect(pt[0]).toEqual(0);
251 expect(pt[1]).toEqual(0);
256 gm('offset_path', (canvas) => {
257 const path = starPath(CanvasKit);
259 const paint = new CanvasKit.Paint();
260 paint.setStyle(CanvasKit.PaintStyle.Stroke);
261 paint.setStrokeWidth(5.0);
262 paint.setAntiAlias(true);
263 paint.setColor(CanvasKit.BLACK);
265 canvas.clear(CanvasKit.WHITE);
267 canvas.drawPath(path, paint);
269 canvas.drawPath(path, paint);
275 gm('oval_path', (canvas) => {
276 const paint = new CanvasKit.Paint();
278 paint.setStyle(CanvasKit.PaintStyle.Stroke);
279 paint.setStrokeWidth(5.0);
280 paint.setAntiAlias(true);
281 paint.setColor(CanvasKit.BLACK);
283 canvas.clear(CanvasKit.WHITE);
285 const path = new CanvasKit.Path();
287 path.lineTo(10, 120);
288 path.addOval(CanvasKit.LTRBRect(10, 20, 100, 200), false, 3);
289 path.lineTo(300, 300);
291 canvas.drawPath(path, paint);
297 gm('bounds_path', (canvas) => {
298 const paint = new CanvasKit.Paint();
300 paint.setStyle(CanvasKit.PaintStyle.Stroke);
301 paint.setStrokeWidth(5.0);
302 paint.setAntiAlias(true);
303 paint.setColor(CanvasKit.BLACK);
305 canvas.clear(CanvasKit.WHITE);
307 const path = new CanvasKit.Path();
308 // Arbitrary points to make an interesting curve.
309 path.moveTo(97, 225);
310 path.cubicTo(20, 400, 404, 75, 243, 271);
312 canvas.drawPath(path, paint);
314 const bounds = new Float32Array(4);
315 path.getBounds(bounds);
317 paint.setColor(CanvasKit.BLUE);
318 paint.setStrokeWidth(3.0);
319 canvas.drawRect(bounds, paint);
321 path.computeTightBounds(bounds);
322 paint.setColor(CanvasKit.RED);
323 paint.setStrokeWidth(3.0);
324 canvas.drawRect(bounds, paint);
330 gm('arcto_path', (canvas) => {
331 const paint = new CanvasKit.Paint();
333 paint.setStyle(CanvasKit.PaintStyle.Stroke);
334 paint.setStrokeWidth(5.0);
335 paint.setAntiAlias(true);
336 paint.setColor(CanvasKit.BLACK);
338 canvas.clear(CanvasKit.WHITE);
340 const path = new CanvasKit.Path();
342 // - x1, y1, x2, y2, radius
343 path.arcToTangent(40, 0, 40, 40, 40);
344 // - oval (as Rect), startAngle, sweepAngle, forceMoveTo
345 path.arcToOval(CanvasKit.LTRBRect(90, 10, 120, 200), 30, 300, true);
346 // - rx, ry, xAxisRotate, useSmallArc, isCCW, x, y
348 path.arcToRotated(24, 24, 45, true, false, 82, 156);
350 canvas.drawPath(path, paint);
356 gm('path_relative', (canvas) => {
357 const paint = new CanvasKit.Paint();
358 paint.setStrokeWidth(1.0);
359 paint.setAntiAlias(true);
360 paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
361 paint.setStyle(CanvasKit.PaintStyle.Stroke);
363 const path = new CanvasKit.Path();
365 .rLineTo(10, 15) // 30, 20
366 .rLineTo(10, -5); // 40, 10
367 path.rLineTo(10, 10); // 50, 20
368 path.rLineTo(10, -20); // 60, 0
369 path.rLineTo(-40, 5); // 20, 5
372 .rCubicTo(70, -70, 140, 70, 170, -70); // 90, 10, 160, 150, 190, 10
375 .rQuadTo(30, 40, 84, -12) // 66, 188, 120, 136
378 path.moveTo(150, 180)
379 .rArcTo(24, 24, 45, true, false, -68, -24); // 82, 156
380 path.lineTo(160, 160);
382 canvas.drawPath(path, paint);
388 it('can measure the contours of a path', () => {
389 const path = new CanvasKit.Path();
391 .lineTo(40, 50); // should be length 50 because of the 3/4/5 triangle rule
398 const meas = new CanvasKit.ContourMeasureIter(path, false, 1);
399 let cont = meas.next();
400 expect(cont).toBeTruthy();
402 expect(cont.length()).toBeCloseTo(50.0, 3);
403 const pt = cont.getPosTan(28.7); // arbitrary point
404 expect(pt[0]).toBeCloseTo(27.22, 3); // x
405 expect(pt[1]).toBeCloseTo(32.96, 3); // y
406 expect(pt[2]).toBeCloseTo(0.6, 3); // dy
407 expect(pt[3]).toBeCloseTo(0.8, 3); // dy
409 pt.set([-1, -1, -1, -1]); // fill with sentinel values.
410 cont.getPosTan(28.7, pt); // arbitrary point again, passing in an array to copy into.
411 expect(pt[0]).toBeCloseTo(27.22, 3); // x
412 expect(pt[1]).toBeCloseTo(32.96, 3); // y
413 expect(pt[2]).toBeCloseTo(0.6, 3); // dy
414 expect(pt[3]).toBeCloseTo(0.8, 3); // dy
416 const subpath = cont.getSegment(20, 40, true); // make sure this doesn't crash
420 expect(cont).toBeTruthy();
421 expect(cont.length()).toBeCloseTo(51.231, 3);
424 expect(meas.next()).toBeFalsy();
430 gm('drawpoly_path', (canvas) => {
431 const paint = new CanvasKit.Paint();
432 paint.setStrokeWidth(1.0);
433 paint.setAntiAlias(true);
434 paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
435 paint.setStyle(CanvasKit.PaintStyle.Stroke);
437 const points = [5, 5, 30, 20, 55, 5, 55, 50, 30, 30, 5, 50];
439 const pointsObj = CanvasKit.Malloc(Float32Array, 6 * 2);
440 const mPoints = pointsObj.toTypedArray();
441 mPoints.set([105, 105, 130, 120, 155, 105, 155, 150, 130, 130, 105, 150]);
443 const path = new CanvasKit.Path();
444 path.addPoly(points, true)
446 .addPoly(mPoints, true);
448 canvas.drawPath(path, paint);
449 CanvasKit.Free(pointsObj);
455 // Test trim, adding paths to paths, and a bunch of other path methods.
456 gm('trim_path', (canvas) => {
457 canvas.clear(CanvasKit.WHITE);
459 const paint = new CanvasKit.Paint();
460 paint.setStrokeWidth(1.0);
461 paint.setAntiAlias(true);
462 paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
463 paint.setStyle(CanvasKit.PaintStyle.Stroke);
465 const arcpath = new CanvasKit.Path();
466 arcpath.arc(400, 400, 100, 0, -90, false) // x, y, radius, startAngle, endAngle, ccw
468 .conicTo(10, 20, 30, 40, 5)
469 .rConicTo(60, 70, 80, 90, 5)
470 .trim(0.2, 1, false);
472 const path = new CanvasKit.Path();
473 path.addArc(CanvasKit.LTRBRect(10, 20, 100, 200), 30, 300)
474 .addRect(CanvasKit.LTRBRect(200, 200, 300, 300)) // test single arg, default cw
475 .addRect(CanvasKit.LTRBRect(240, 240, 260, 260), true) // test two arg, true means ccw
476 .addRect([260, 260, 290, 290], true) // test five arg, true means ccw
477 .addRRect([300, 10, 500, 290, // Rect in LTRB order
478 60, 60, 60, 60, 60, 60, 60, 60], // all radii are the same
480 .addRRect(CanvasKit.RRectXY([350, 60, 450, 240], 20, 80), true) // Rect, rx, ry, ccw
482 .transform(0.54, -0.84, 390.35,
486 canvas.drawPath(path, paint);
492 gm('winding_example', (canvas) => {
493 // Inspired by https://fiddle.skia.org/c/@Path_FillType_a
494 const path = new CanvasKit.Path();
495 // Draw overlapping rects on top
496 path.addRect(CanvasKit.LTRBRect(10, 10, 30, 30), false);
497 path.addRect(CanvasKit.LTRBRect(20, 20, 40, 40), false);
498 // Draw overlapping rects on bottom, with different direction lines.
499 path.addRect(CanvasKit.LTRBRect(10, 60, 30, 80), false);
500 path.addRect(CanvasKit.LTRBRect(20, 70, 40, 90), true);
502 expect(path.getFillType()).toEqual(CanvasKit.FillType.Winding);
504 // Draw the two rectangles on the left side.
505 const paint = new CanvasKit.Paint();
506 paint.setStyle(CanvasKit.PaintStyle.Stroke);
507 canvas.drawPath(path, paint);
509 const clipRect = CanvasKit.LTRBRect(0, 0, 51, 100);
510 paint.setStyle(CanvasKit.PaintStyle.Fill);
512 for (const fillType of [CanvasKit.FillType.Winding, CanvasKit.FillType.EvenOdd]) {
513 canvas.translate(51, 0);
515 canvas.clipRect(clipRect, CanvasKit.ClipOp.Intersect, false);
516 path.setFillType(fillType);
517 canvas.drawPath(path, paint);
525 gm('as_winding', (canvas) => {
526 const evenOddPath = new CanvasKit.Path();
527 // Draw overlapping rects
528 evenOddPath.addRect(CanvasKit.LTRBRect(10, 10, 70, 70), false);
529 evenOddPath.addRect(CanvasKit.LTRBRect(30, 30, 50, 50), false);
530 evenOddPath.setFillType(CanvasKit.FillType.EvenOdd);
532 const evenOddCmds = evenOddPath.toCmds();
533 expect(evenOddCmds).toEqual(Float32Array.of(
534 CanvasKit.MOVE_VERB, 10, 10,
535 CanvasKit.LINE_VERB, 70, 10,
536 CanvasKit.LINE_VERB, 70, 70,
537 CanvasKit.LINE_VERB, 10, 70,
538 CanvasKit.CLOSE_VERB,
539 CanvasKit.MOVE_VERB, 30, 30, // This contour is drawn
540 CanvasKit.LINE_VERB, 50, 30, // clockwise, as specified.
541 CanvasKit.LINE_VERB, 50, 50,
542 CanvasKit.LINE_VERB, 30, 50,
546 const windingPath = evenOddPath.makeAsWinding();
548 expect(windingPath.getFillType()).toBe(CanvasKit.FillType.Winding);
549 const windingCmds = windingPath.toCmds();
550 expect(windingCmds).toEqual(Float32Array.of(
551 CanvasKit.MOVE_VERB, 10, 10,
552 CanvasKit.LINE_VERB, 70, 10,
553 CanvasKit.LINE_VERB, 70, 70,
554 CanvasKit.LINE_VERB, 10, 70,
555 CanvasKit.CLOSE_VERB,
556 CanvasKit.MOVE_VERB, 30, 50, // This contour has been
557 CanvasKit.LINE_VERB, 50, 50, // re-drawn counter-clockwise
558 CanvasKit.LINE_VERB, 50, 30, // so that it covers the same
559 CanvasKit.LINE_VERB, 30, 30, // area, but with the winding fill type.
563 const paint = new CanvasKit.Paint();
564 paint.setStyle(CanvasKit.PaintStyle.Fill);
565 const font = new CanvasKit.Font(null, 20);
567 canvas.drawText('Original path (even odd)', 5, 20, paint, font);
568 canvas.translate(0, 50);
569 canvas.drawPath(evenOddPath, paint);
571 canvas.translate(300, 0);
572 canvas.drawPath(windingPath, paint);
574 canvas.translate(0, -50);
575 canvas.drawText('makeAsWinding path', 5, 20, paint, font);
577 evenOddPath.delete();
578 windingPath.delete();