describe('PathKit\'s Path Behavior', function() { // see https://fiddle.skia.org/c/@discrete_path function drawStar() { let path = PathKit.NewPath(); let R = 115.2, C = 128.0; path.moveTo(C + R + 22, C); for (let i = 1; i < 8; i++) { let a = 2.6927937 * i; path.lineTo(C + R * Math.cos(a) + 22, C + R * Math.sin(a)); } path.closePath(); return path; } describe('Dash Path Effect', function() { it('performs dash in-place with start, stop, phase', function(done) { LoadPathKit.then(catchException(done, () => { let orig = drawStar(); let dashed = drawStar(); let notACopy = dashed.dash(10, 3, 0); let phased = drawStar().dash(10, 3, 2); expect(dashed === notACopy).toBe(true); expect(dashed.equals(phased)).toBe(false); expect(dashed.equals(orig)).toBe(false); reportPath(dashed, 'dashed_no_phase', () => { reportPath(phased, 'dashed_with_phase', done); orig.delete(); dashed.delete(); phased.delete(); }); })); }); }); describe('Trim Path Effect', function() { it('performs trim in-place with start, stop, phase', function(done) { LoadPathKit.then(catchException(done, () => { let orig = drawStar(); let trimmed = drawStar(); let notACopy = trimmed.trim(0.25, .8); let complement = drawStar().trim(.1, .9, true); expect(trimmed === notACopy).toBe(true); expect(trimmed.equals(complement)).toBe(false); expect(trimmed.equals(orig)).toBe(false); expect(complement.equals(orig)).toBe(false); reportPath(trimmed, 'trimmed_non_complement', () => { reportPath(complement, 'trimmed_complement', done); orig.delete(); trimmed.delete(); complement.delete(); }); })); }); }); describe('Transform Path Effect', function() { it('performs matrix transform in-place', function(done) { LoadPathKit.then(catchException(done, () => { let orig = drawStar(); let scaled = drawStar(); let notACopy = scaled.transform(3, 0, 0, 0, 3, 0, 0, 0, 1); let scaled2 = drawStar().transform([3, 0, 0, 0, 3, 0, 0, 0, 1]); expect(scaled === notACopy).toBe(true); expect(scaled.equals(scaled2)).toBe(true); expect(scaled.equals(orig)).toBe(false); reportPath(scaled, 'transformed_scale', () => { reportPath(scaled2, 'transformed_scale2', done); orig.delete(); scaled.delete(); scaled2.delete(); }); })); }); }); describe('Stroke Path Effect', function() { it('creates a stroked path in-place', function(done) { LoadPathKit.then(catchException(done, () => { let orig = drawStar(); let stroked = drawStar(); let notACopy = stroked.stroke({ width: 15, join: PathKit.StrokeJoin.BEVEL, cap: PathKit.StrokeCap.BUTT, miter_limit: 2, }); // Don't have to specify all of the fields, defaults will // be used instead. let rounded = drawStar().stroke({ width: 10, join: PathKit.StrokeJoin.ROUND, cap:PathKit.StrokeCap.SQUARE, }); expect(stroked === notACopy).toBe(true); expect(stroked.equals(rounded)).toBe(false); expect(stroked.equals(orig)).toBe(false); reportPath(stroked, 'stroke_bevel_butt', () => { reportPath(rounded, 'stroke_round_square', done); orig.delete(); stroked.delete(); rounded.delete(); }); })); }); it('can use res_scale for more precision', function(done) { LoadPathKit.then(catchException(done, () => { let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); // Set canvas size and make it a bit bigger to zoom in on the lines standardizedCanvasSize(ctx); const circle = PathKit.NewPath(); circle.ellipse(0, 0, 1, 1, 0, 0, Math.PI * 2); let scales = [1, 3, 5, 10, 30, 100]; // White background ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < scales.length; i++) { ctx.save(); const row = Math.floor(i / 3); const col = i % 3; ctx.translate(100 * col + 50, 100 * row + 50); ctx.scale(30, 30); // Grey circle ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; ctx.beginPath(); circle.toCanvas(ctx); ctx.fill(); // Pink stroke, with given res_scale option const line = circle.copy().stroke({ width: 0.5, res_scale: scales[i], }); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.beginPath(); line.toCanvas(ctx); ctx.fill(); line.delete(); ctx.restore(); } ctx.fillStyle = 'black'; ctx.font = '14px serif'; ctx.fillText('notice for lower res_scale values, the stroked circles ' + '(pink) are not round', 10, 200); circle.delete(); reportCanvas(canvas, 'res_scale').then(() => { done(); }).catch(reportError(done)); })); }); }); });