evert/svgcanvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: set width & height

Browse Source
This commit is contained in:
Zeno Zeng 2022-03-09 22:49:40 +08:00
parent c192c00864
commit 8f27fe0974
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
rollup.config.js
View File

@ -27,7 +27,8 @@ export default [
input: 'test/rendering.test.js', input: 'test/rendering.test.js',
output: { output: {
file: 'dist/rendering.test.js', file: 'dist/rendering.test.js',
format: 'iife' format: 'iife',
sourcemap: true,
}, },
plugins: [nodeResolve(), commonjs()] plugins: [nodeResolve(), commonjs()]
}, },

43
test/rendering.test.js
View File

@ -43,19 +43,20 @@ const config = {
} }
class RenderingTester { class RenderingTester {
constructor(fn) { constructor(name, fn) {
this.fn = fn this.name = name;
this.fn = fn;
this.width = 600;
this.height = 600;
} }
async test() { async test() {
const width = 500;
const height = 500;
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const svgcanvas = new Element(); const svgcanvas = new Element();
[canvas, svgcanvas].forEach((canvas) => { [canvas, svgcanvas].forEach((canvas) => {
canvas.width = width canvas.width = this.width
canvas.height = height canvas.height = this.height
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
this.fn(ctx) this.fn(ctx)
}) })
@ -73,20 +74,22 @@ class RenderingTester {
const canvasPixels = this.getPixels(canvas); const canvasPixels = this.getPixels(canvas);
const diffPixels = this.diffPixels(svgPixels, canvasPixels); const diffPixels = this.diffPixels(svgPixels, canvasPixels);
const removeThinLinesPixels = this.removeThinLines(this.removeThinLines(diffPixels)); const removeThinLinesPixels = this.removeThinLines(this.removeThinLines(diffPixels));
const count = Math.max(this.countPixels(svgPixels), this.countPixels(canvasPixels)); const svgPixelsCount = this.countPixels(svgPixels);
const diffCount = this.countPixels(diffPixels); const canvasPixelsCount = this.countPixels(canvasPixels)
console.log({ count, diffCount }) const count = Math.max(svgPixelsCount, canvasPixelsCount);
if (count === 0 && diffCount === 0) { const diffPixelsCount = this.countPixels(removeThinLinesPixels);
console.log({ fn: this.name, count, diffCount: diffPixelsCount, svgPixelsCount, canvasPixelsCount })
if (count === 0 && diffPixelsCount === 0) {
return 0 return 0
} }
const diffRate = diffCount / count; const diffRate = diffPixelsCount / count;
return diffRate; return diffRate;
} }
getPixels(image) { getPixels(image) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const width = 100 * config.pixelDensity; const width = this.width;
const height = 100 * config.pixelDensity; const height = this.height;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -108,17 +111,16 @@ class RenderingTester {
diffPixels(imgData1, imgData2) { diffPixels(imgData1, imgData2) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const width = 100 * config.pixelDensity; const width = this.width;
const height = 100 * config.pixelDensity; const height = this.height;
const diffImgData = canvas.getContext('2d').getImageData(0, 0, width, height); const diffImgData = canvas.getContext('2d').getImageData(0, 0, width, height);
let $this = this;
for (var i = 0; i < imgData1.data.length; i += 4) { for (var i = 0; i < imgData1.data.length; i += 4) {
var indexes = [i, i + 1, i + 2, i + 3]; var indexes = [i, i + 1, i + 2, i + 3];
indexes.forEach(function (i) { indexes.forEach(function (i) {
diffImgData.data[i] = 0; diffImgData.data[i] = 0;
}); });
if (indexes.some(function (i) { if (indexes.some(function (i) {
return Math.abs(imgData1.data[i] - imgData2.data[i]) > $this.maxPixelDiff; return Math.abs(imgData1.data[i] - imgData2.data[i]) > 0;
})) { })) {
diffImgData.data[i + 3] = 255; // set black diffImgData.data[i + 3] = 255; // set black
} }
@ -128,8 +130,8 @@ class RenderingTester {
removeThinLines(imageData) { removeThinLines(imageData) {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const width = 100 * config.pixelDensity; const width = this.width;
const height = 100 * config.pixelDensity; const height = this.height;
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
@ -182,9 +184,8 @@ class RenderingTester {
describe('RenderTest', () => { describe('RenderTest', () => {
for (let fn of Object.keys(tests)) { for (let fn of Object.keys(tests)) {
it(`should render same results for ${fn}`, async () => { it(`should render same results for ${fn}`, async () => {
const tester = new RenderingTester(tests[fn]); const tester = new RenderingTester(fn, tests[fn]);
const diffRate = await tester.test(); const diffRate = await tester.test();
console.log({ diffRate, fn });
expect(diffRate).to.lessThan(0.05); expect(diffRate).to.lessThan(0.05);
}) })
} }