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 { Element } from "../index";
import arc from './tests/arc' import arc from "./tests/arc";
import arcTo from './tests/arcTo' import arcTo from "./tests/arcTo";
import arcTo2 from './tests/arcTo2' import arcTo2 from "./tests/arcTo2";
import arcToScaled from './tests/arcToScaled' import arcToScaled from "./tests/arcToScaled";
import emptyArc from './tests/emptyArc' import emptyArc from "./tests/emptyArc";
import ellipse from './tests/ellipse' import ellipse from "./tests/ellipse";
import ellipse2 from './tests/ellipse2' import ellipse2 from "./tests/ellipse2";
import fillstyle from './tests/fillstyle' import fillstyle from "./tests/fillstyle";
import globalAlpha from './tests/globalalpha' import globalAlpha from "./tests/globalalpha";
import gradient from './tests/gradient' import gradient from "./tests/gradient";
import linecap from './tests/linecap' import linecap from "./tests/linecap";
import linewidth from './tests/linewidth' import linewidth from "./tests/linewidth";
import scaledLine from './tests/scaledLine' import scaledLine from "./tests/scaledLine";
import rgba from './tests/rgba' import rgba from "./tests/rgba";
import rotate from './tests/rotate' import rotate from "./tests/rotate";
import saveandrestore from './tests/saveandrestore' import saveandrestore from "./tests/saveandrestore";
import setLineDash from './tests/setLineDash' import setLineDash from "./tests/setLineDash";
import text from './tests/text' import text from "./tests/text";
import tiger from './tests/tiger' import tiger from "./tests/tiger";
import transform from './tests/transform' import transform from "./tests/transform";
import pattern from "./tests/pattern"; import pattern from "./tests/pattern";
import path2D from './tests/path2D'; import path2D from "./tests/path2D";
import clip from "./tests/clip";
const tests = [ const tests = [
tiger, tiger,
arc, arc,
arcTo, arcTo,
arcTo2, arcTo2,
arcToScaled, arcToScaled,
emptyArc, clip,
ellipse, emptyArc,
ellipse2, ellipse,
fillstyle, ellipse2,
globalAlpha, fillstyle,
gradient, globalAlpha,
linecap, gradient,
linewidth, linecap,
scaledLine, linewidth,
rgba, scaledLine,
rotate, rgba,
saveandrestore, rotate,
setLineDash, saveandrestore,
text, setLineDash,
transform, text,
pattern, transform,
path2D pattern,
path2D,
]; ];
for (let fn of tests) { for (let fn of tests) {
let name = fn.name; let name = fn.name;
// Container // Container
const container = document.createElement('div'); const container = document.createElement("div");
container.className = 'example'; container.className = "example";
container.id = 'example-' + name; container.id = "example-" + name;
container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>` container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`;
// Canvas // Canvas
const canvas = document.createElement('canvas'); const canvas = document.createElement("canvas");
container.querySelector('.canvas').appendChild(canvas); container.querySelector(".canvas").appendChild(canvas);
// SVGCanvas // SVGCanvas
const svgcanvas = new Element(); const svgcanvas = new Element();
container.querySelector('.svg').appendChild(svgcanvas.getElement()); container.querySelector(".svg").appendChild(svgcanvas.getElement());
document.querySelector('body').appendChild(container); document.querySelector("body").appendChild(container);
// Render // Render
for (let c of [canvas, svgcanvas]) { for (let c of [canvas, svgcanvas]) {
c.width = 500; c.width = 500;
c.height = 500; c.height = 500;
const ctx = c.getContext('2d'); const ctx = c.getContext("2d");
fn(ctx); 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) { function makePath(ctx, arg) {
if (ctx.createPath) { if (ctx.createPath) {
return ctx.createPath(arg); return ctx.createPath(arg);
} else { } else {
return new Path2D(arg); return new Path2D(arg);
} }
} }
export default function path2D(ctx) { 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 A 45 45, 0, 1, 0, 275 125
L 275 80 Z`); L 275 80 Z`
);
ctx.strokeStyle = 'red'; ctx.save();
ctx.stroke(path1); ctx.strokeStyle = "red";
ctx.fillStyle = 'grey'; ctx.stroke(path1);
ctx.fill(path1); ctx.fillStyle = "grey";
ctx.fill(path1);
ctx.translate(10, 25); ctx.translate(10, 25);
ctx.lineWidth = 10; ctx.lineWidth = 10;
ctx.stroke(path1); ctx.stroke(path1);
ctx.rotate(Math.PI / 4); ctx.rotate(Math.PI / 4);
ctx.scale(1.5, 1.5); ctx.scale(1.5, 1.5);
ctx.translate(10, 25); ctx.translate(10, 25);
ctx.strokeStyle = 'blue'; ctx.strokeStyle = "blue";
ctx.stroke(path1); 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();
}