mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
test: update unit test for board/lib/context
This commit is contained in:
chenshenhai
parent
ed53e882ce
commit
00c245f48f
3 changed files with 670 additions and 70 deletions
|
|
@ -310,6 +310,77 @@ Array [
|
|||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.createPattern 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 600,
|
||||
"width": 600,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.drawImage 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 0,
|
||||
"dWidth": 0,
|
||||
"dx": 22,
|
||||
"dy": 24,
|
||||
"img": <img />,
|
||||
"sHeight": 0,
|
||||
"sWidth": 0,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"dHeight": 104,
|
||||
"dWidth": 102,
|
||||
"dx": 22,
|
||||
"dy": 24,
|
||||
"img": <img />,
|
||||
"sHeight": 204,
|
||||
"sWidth": 202,
|
||||
"sx": 122,
|
||||
"sy": 124,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.fill 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
|
|
@ -365,6 +436,28 @@ Array [
|
|||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.fillText 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"maxWidth": null,
|
||||
"text": "Hello world",
|
||||
"x": 100,
|
||||
"y": 200,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillText",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.lineTo 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
|
|
@ -510,3 +603,277 @@ Array [
|
|||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.restore 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 20,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"x": 300,
|
||||
"y": 150,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.rotate 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 400,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
0.8660254037844387,
|
||||
0.49999999999999994,
|
||||
-0.49999999999999994,
|
||||
0.8660254037844387,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "rect",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
0.8660254037844387,
|
||||
0.49999999999999994,
|
||||
-0.49999999999999994,
|
||||
0.8660254037844387,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "stroke",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.save 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 20,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"x": 300,
|
||||
"y": 150,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.scale 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 400,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
3,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "rect",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
2,
|
||||
0,
|
||||
0,
|
||||
3,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "stroke",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.stroke 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 400,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "rect",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "stroke",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board: src/lib/context Context.translate 1`] = `
|
||||
Array [
|
||||
Object {
|
||||
"props": Object {
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 400,
|
||||
"width": 200,
|
||||
"x": 20,
|
||||
"y": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
100,
|
||||
120,
|
||||
],
|
||||
"type": "rect",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
100,
|
||||
120,
|
||||
],
|
||||
"type": "stroke",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -115,7 +115,6 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
test('Context.setFillStyle', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
|
|
@ -129,7 +128,6 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
expect(ctx2d.fillStyle).toStrictEqual(color);
|
||||
});
|
||||
|
||||
|
||||
test('Context.fill', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
|
|
@ -141,7 +139,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.arc', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -156,8 +154,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
test('Context.rect', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -172,7 +169,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.fillRect', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -193,7 +190,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
// props: { x: 0, y: 0, width: 2000, height: 1800 }
|
||||
// }
|
||||
// ]);
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.clearRect', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -207,7 +204,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.beginPath', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -222,8 +219,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
test('Context.closePath', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -238,7 +234,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.lineTo', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -253,7 +249,7 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
|
||||
test('Context.moveTo', async () => {
|
||||
const opts = deepClone(options);
|
||||
|
|
@ -313,7 +309,6 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
expect(ctx2d.getLineDash()).toStrictEqual(lineDash.map(n => n * opts.devicePixelRatio));
|
||||
});
|
||||
|
||||
|
||||
test('Context.setStrokeStyle', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
|
|
@ -327,67 +322,305 @@ describe('@idraw/board: src/lib/context', () => {
|
|||
expect(ctx2d.strokeStyle).toStrictEqual(color);
|
||||
});
|
||||
|
||||
// test('Context.isPointInPath', async () => {
|
||||
// const opts = deepClone(options);
|
||||
// const canvas = document.createElement('canvas');
|
||||
// canvas.width = opts.contextWidth;
|
||||
// canvas.height = opts.contextHeight;
|
||||
// // const lineDash = [10, 20];
|
||||
// const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
// const ctx = new Context(ctx2d, opts);
|
||||
// const x = 50;
|
||||
// const y = 50;
|
||||
// const w = 50;
|
||||
// const h = 50;
|
||||
// TODO
|
||||
test('Context.isPointInPath', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
// const lineDash = [10, 20];
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const x = 50;
|
||||
const y = 50;
|
||||
const w = 50;
|
||||
const h = 50;
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.moveTo(x, y);
|
||||
// ctx.lineTo(x + w, y);
|
||||
// ctx.lineTo(x + w, y + h);
|
||||
// ctx.lineTo(x, y + h);
|
||||
// ctx.lineTo(x, y);
|
||||
// ctx.closePath();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + w, y);
|
||||
ctx.lineTo(x + w, y + h);
|
||||
ctx.lineTo(x, y + h);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.closePath();
|
||||
|
||||
// // @ts-ignore
|
||||
// const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', calls);
|
||||
// // expect(calls).toMatchSnapshot();
|
||||
// console.log('ctx.isPointInPath(51, 51) =', ctx.isPointInPath(60, 60))
|
||||
// expect(ctx.isPointInPath(51, 51))
|
||||
// .toStrictEqual(ctx2d.isPointInPath(60 * opts.devicePixelRatio, 60 * opts.devicePixelRatio));
|
||||
// });
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
expect(ctx.isPointInPath(51, 51))
|
||||
.toStrictEqual(ctx2d.isPointInPath(60 * opts.devicePixelRatio, 60 * opts.devicePixelRatio));
|
||||
});
|
||||
|
||||
// test('Context.isPointInPathWithoutScroll', async () => {
|
||||
// const opts = deepClone(options);
|
||||
// const canvas = document.createElement('canvas');
|
||||
// canvas.width = opts.contextWidth;
|
||||
// canvas.height = opts.contextHeight;
|
||||
// // const lineDash = [10, 20];
|
||||
// const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
// const ctx = new Context(ctx2d, opts);
|
||||
// TODO
|
||||
test('Context.isPointInPathWithoutScroll', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
// const lineDash = [10, 20];
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
|
||||
// ctx.setTransform({
|
||||
// scale: 2,
|
||||
// scrollX: 10,
|
||||
// scrollY: 10,
|
||||
// })
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.rect(50, 50, 100, 100);
|
||||
// ctx.closePath();
|
||||
// // @ts-ignore
|
||||
// const calls = ctx2d.__getDrawCalls();
|
||||
// // expect(calls).toMatchSnapshot();
|
||||
// console.log('ctx.isPointInPathWithoutScroll(51, 51) =', ctx.isPointInPathWithoutScroll(51, 51))
|
||||
// expect(ctx.isPointInPathWithoutScroll(51, 51))
|
||||
// .toStrictEqual(
|
||||
// ctx2d.isPointInPath(
|
||||
// 60 * opts.devicePixelRatio,
|
||||
// 60 * opts.devicePixelRatio
|
||||
// )
|
||||
// );
|
||||
// });
|
||||
ctx.setTransform({
|
||||
scale: 2,
|
||||
scrollX: 10,
|
||||
scrollY: 10,
|
||||
})
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.rect(50, 50, 100, 100);
|
||||
ctx.closePath();
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
expect(ctx.isPointInPathWithoutScroll(51, 51))
|
||||
.toStrictEqual(
|
||||
ctx2d.isPointInPath(
|
||||
60 * opts.devicePixelRatio,
|
||||
60 * opts.devicePixelRatio
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
test('Context.setStrokeStyle', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const color = '#f0f0f0';
|
||||
ctx.setStrokeStyle(color);
|
||||
expect(ctx2d.strokeStyle).toStrictEqual(color);
|
||||
});
|
||||
|
||||
test('Context.stroke', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
ctx.rect(10, 20, 100, 200);
|
||||
ctx.stroke();
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.translate', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const x = 50;
|
||||
const y = 60;
|
||||
ctx.translate(x, y);
|
||||
ctx.rect(10, 20, 100, 200);
|
||||
ctx.stroke();
|
||||
ctx.translate(-x, -y);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.rotate', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const radian = Math.PI / 6;
|
||||
ctx.rotate(radian);
|
||||
ctx.rect(10, 20, 100, 200);
|
||||
ctx.stroke();
|
||||
ctx.rotate(-radian);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.drawImage', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const img = new Image();
|
||||
const dx = 11;
|
||||
const dy = 12;
|
||||
const dw = 51;
|
||||
const dh = 52;
|
||||
const sx = 61;
|
||||
const sy = 62;
|
||||
const sw = 101
|
||||
const sh = 102;
|
||||
ctx.drawImage(img, dx, dy);
|
||||
ctx.drawImage(img, dx, dy, dw, dh);
|
||||
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.createPattern', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const img = new Image();
|
||||
const pattern = ctx.createPattern(img, 'repeat') as CanvasPattern;
|
||||
ctx.setFillStyle(pattern);
|
||||
ctx.fillRect(0, 0, 300, 300);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(ctx2d.fillStyle).toStrictEqual(pattern);
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.measureText', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
ctx.setFont({ fontSize: 20 });
|
||||
const size = ctx.measureText('Hello World!');
|
||||
expect(size.width).toStrictEqual(12);
|
||||
});
|
||||
|
||||
test('Context.setTextAlign', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const textAlign = 'center';
|
||||
ctx.setTextAlign(textAlign);
|
||||
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
|
||||
expect(ctx2d.textAlign).toStrictEqual(textAlign);
|
||||
});
|
||||
|
||||
test('Context.fillText', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
ctx.fillText('Hello world', 50, 100);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.setFont', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const fontSize = 22;
|
||||
const fontFamily = 'Hello';
|
||||
const fontWeight = 'bold';
|
||||
ctx.setFont({
|
||||
fontSize, fontFamily, fontWeight
|
||||
});
|
||||
// console.log('ctx2d.font =', ctx2d.font);
|
||||
expect(ctx2d.font).toStrictEqual([fontWeight, (fontSize * opts.devicePixelRatio) + 'px', fontFamily].join(' '))
|
||||
});
|
||||
|
||||
test('Context.setTextBaseline', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const textBaseline = 'bottom';
|
||||
ctx.setTextBaseline(textBaseline);
|
||||
expect(ctx2d.textBaseline).toStrictEqual(textBaseline)
|
||||
});
|
||||
|
||||
test('Context.setGlobalAlpha', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const globalAlpha = 0.45;
|
||||
ctx.setGlobalAlpha(globalAlpha);
|
||||
expect(ctx2d.globalAlpha).toStrictEqual(globalAlpha)
|
||||
});
|
||||
|
||||
test('Context.save', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
ctx.save();
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 100, 100);
|
||||
ctx.restore();
|
||||
ctx.fillRect(150, 75, 100, 100);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
test('Context.restore', async () => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
ctx.save();
|
||||
ctx.setFillStyle('#f0f0f0');
|
||||
ctx.fillRect(10, 10, 100, 100);
|
||||
ctx.restore();
|
||||
ctx.fillRect(150, 75, 100, 100);
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Context.scale', async() => {
|
||||
const opts = deepClone(options);
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = opts.contextWidth;
|
||||
canvas.height = opts.contextHeight;
|
||||
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
const ctx = new Context(ctx2d, opts);
|
||||
const scaleX = 2;
|
||||
const scaleY = 3;
|
||||
ctx.scale(scaleX, scaleY);
|
||||
ctx.rect(10, 20, 100, 200);
|
||||
ctx.stroke();
|
||||
// @ts-ignore
|
||||
const calls = ctx2d.__getDrawCalls();
|
||||
// console.log('calls =', JSON.stringify(calls, null, 2));
|
||||
expect(calls).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ class Context implements TypeContext {
|
|||
};
|
||||
}
|
||||
|
||||
setFillStyle(color: string | CanvasPattern) {
|
||||
setFillStyle(color: string | CanvasPattern | CanvasGradient) {
|
||||
this._ctx.fillStyle = color;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue