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

Added clipping test

Browse Source
This commit is contained in:
k1w1 2022-12-24 14:15:14 -08:00
parent f3cac336d2
commit fd024674c0
3 changed files with 143 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
test/index.js
View File

@ -1,71 +1,73 @@
import {Element} from '../index'
import arc from './tests/arc'
import arcTo from './tests/arcTo'
import arcTo2 from './tests/arcTo2'
import arcToScaled from './tests/arcToScaled'
import emptyArc from './tests/emptyArc'
import ellipse from './tests/ellipse'
import ellipse2 from './tests/ellipse2'
import fillstyle from './tests/fillstyle'
import globalAlpha from './tests/globalalpha'
import gradient from './tests/gradient'
import linecap from './tests/linecap'
import linewidth from './tests/linewidth'
import scaledLine from './tests/scaledLine'
import rgba from './tests/rgba'
import rotate from './tests/rotate'
import saveandrestore from './tests/saveandrestore'
import setLineDash from './tests/setLineDash'
import text from './tests/text'
import tiger from './tests/tiger'
import transform from './tests/transform'
import { Element } from "../index";
import arc from "./tests/arc";
import arcTo from "./tests/arcTo";
import arcTo2 from "./tests/arcTo2";
import arcToScaled from "./tests/arcToScaled";
import emptyArc from "./tests/emptyArc";
import ellipse from "./tests/ellipse";
import ellipse2 from "./tests/ellipse2";
import fillstyle from "./tests/fillstyle";
import globalAlpha from "./tests/globalalpha";
import gradient from "./tests/gradient";
import linecap from "./tests/linecap";
import linewidth from "./tests/linewidth";
import scaledLine from "./tests/scaledLine";
import rgba from "./tests/rgba";
import rotate from "./tests/rotate";
import saveandrestore from "./tests/saveandrestore";
import setLineDash from "./tests/setLineDash";
import text from "./tests/text";
import tiger from "./tests/tiger";
import transform from "./tests/transform";
import pattern from "./tests/pattern";
import path2D from './tests/path2D';
import path2D from "./tests/path2D";
import clip from "./tests/clip";
const tests = [
tiger,
arc,
arcTo,
arcTo2,
arcToScaled,
emptyArc,
ellipse,
ellipse2,
fillstyle,
globalAlpha,
gradient,
linecap,
linewidth,
scaledLine,
rgba,
rotate,
saveandrestore,
setLineDash,
text,
transform,
pattern,
path2D
tiger,
arc,
arcTo,
arcTo2,
arcToScaled,
clip,
emptyArc,
ellipse,
ellipse2,
fillstyle,
globalAlpha,
gradient,
linecap,
linewidth,
scaledLine,
rgba,
rotate,
saveandrestore,
setLineDash,
text,
transform,
pattern,
path2D,
];
for (let fn of tests) {
let name = fn.name;
// Container
const container = document.createElement('div');
container.className = 'example';
container.id = 'example-' + name;
container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`
// Canvas
const canvas = document.createElement('canvas');
container.querySelector('.canvas').appendChild(canvas);
// SVGCanvas
const svgcanvas = new Element();
container.querySelector('.svg').appendChild(svgcanvas.getElement());
document.querySelector('body').appendChild(container);
// Render
for (let c of [canvas, svgcanvas]) {
c.width = 500;
c.height = 500;
const ctx = c.getContext('2d');
fn(ctx);
}
let name = fn.name;
// Container
const container = document.createElement("div");
container.className = "example";
container.id = "example-" + name;
container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`;
// Canvas
const canvas = document.createElement("canvas");
container.querySelector(".canvas").appendChild(canvas);
// SVGCanvas
const svgcanvas = new Element();
container.querySelector(".svg").appendChild(svgcanvas.getElement());
document.querySelector("body").appendChild(container);
// Render
for (let c of [canvas, svgcanvas]) {
c.width = 500;
c.height = 500;
const ctx = c.getContext("2d");
fn(ctx);
}
}

38
test/tests/clip.js Normal file
View File

@ -0,0 +1,38 @@
export default function clip(ctx) {
// Draw a line with clipped areas removed.
var scaleX = 1.5,
scaleY = 1.2;
ctx.rotate(Math.PI / 10);
ctx.scale(scaleX, scaleY);
ctx.translate(200, 25);
// Draw unclipped line
ctx.beginPath();
ctx.moveTo(5, 10);
ctx.lineTo(195, 200);
ctx.stroke();
ctx.save();
// Remove clipped areas
ctx.beginPath();
ctx.rect(20, 30, 30, 10);
ctx.rect(0, 0, 300, 300);
// ctx.stroke(); // Uncomment for debugging clip.
ctx.clip("evenodd");
// Draw line.
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 200);
ctx.stroke();
ctx.restore();
// Draw unclipped line
ctx.beginPath();
ctx.moveTo(15, 10);
ctx.lineTo(205, 200);
ctx.stroke();
}

59
test/tests/path2D.js
View File

@ -1,29 +1,48 @@
function makePath(ctx, arg) {
if (ctx.createPath) {
return ctx.createPath(arg);
} else {
return new Path2D(arg);
}
if (ctx.createPath) {
return ctx.createPath(arg);
} else {
return new Path2D(arg);
}
}
export default function path2D(ctx) {
const path1 = makePath(ctx, `M 230 80
const path1 = makePath(
ctx,
`M 230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z`);
L 275 80 Z`
);
ctx.strokeStyle = 'red';
ctx.stroke(path1);
ctx.fillStyle = 'grey';
ctx.fill(path1);
ctx.save();
ctx.strokeStyle = "red";
ctx.stroke(path1);
ctx.fillStyle = "grey";
ctx.fill(path1);
ctx.translate(10, 25);
ctx.lineWidth = 10;
ctx.stroke(path1);
ctx.translate(10, 25);
ctx.lineWidth = 10;
ctx.stroke(path1);
ctx.rotate(Math.PI / 4);
ctx.scale(1.5, 1.5);
ctx.translate(10, 25);
ctx.rotate(Math.PI / 4);
ctx.scale(1.5, 1.5);
ctx.translate(10, 25);
ctx.strokeStyle = 'blue';
ctx.stroke(path1);
};
ctx.strokeStyle = "blue";
ctx.stroke(path1);
ctx.restore();
ctx.save();
// Stroke and fill the same path.
ctx.beginPath();
ctx.rect(10, 10, 40, 20);
ctx.save();
ctx.strokeStyle = "red";
ctx.stroke();
ctx.restore();
ctx.save();
ctx.fillStyle = "green";
ctx.fill();
ctx.restore();
ctx.restore();
}