canvas2gl 1.0.0

package/dist/shapes.d.ts

@@ -0,0 +1,9 @@
+import { Point2D } from './types.js';
+export declare function triangulateRect(x: number, y: number, w: number, h: number): Point2D[];
+export declare function arcToPoints(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean, segments?: number): Point2D[];
+export declare function triangulateArc(cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean, segments?: number): Point2D[];
+export declare function triangulateFillPath(points: Point2D[]): Point2D[];
+export declare function triangulateStrokePath(points: Point2D[], lineWidth: number, closed: boolean): Point2D[];
+export declare function quadVerts(dx: number, dy: number, dw: number, dh: number, sx: number, sy: number, sw: number, sh: number, texW: number, texH: number): Float32Array;
+export declare function cubicBezierPoints(x0: number, y0: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number, segments?: number): Point2D[];
+export declare function quadraticBezierPoints(x0: number, y0: number, cpx: number, cpy: number, x: number, y: number, segments?: number): Point2D[];

package/dist/shapes.js

@@ -0,0 +1,165 @@
+export function triangulateRect(x, y, w, h) {
+    return [
+        { x, y }, { x: x + w, y }, { x, y: y + h },
+        { x: x + w, y }, { x: x + w, y: y + h }, { x, y: y + h },
+    ];
+}
+export function arcToPoints(cx, cy, r, startAngle, endAngle, anticlockwise, segments) {
+    const pts = [];
+    let diff = endAngle - startAngle;
+    if (anticlockwise && diff > 0)
+        diff -= Math.PI * 2;
+    if (!anticlockwise && diff < 0)
+        diff += Math.PI * 2;
+    const seg = segments ?? Math.max(16, Math.ceil(Math.abs(r) * 0.5));
+    for (let i = 0; i <= seg; i++) {
+        const t = i / seg;
+        const angle = startAngle + diff * t;
+        pts.push({ x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) });
+    }
+    return pts;
+}
+export function triangulateArc(cx, cy, r, startAngle, endAngle, anticlockwise, segments) {
+    const pts = arcToPoints(cx, cy, r, startAngle, endAngle, anticlockwise, segments);
+    const verts = [];
+    for (let i = 1; i < pts.length; i++) {
+        verts.push({ x: cx, y: cy }, pts[i - 1], pts[i]);
+    }
+    return verts;
+}
+export function triangulateFillPath(points) {
+    if (points.length < 3)
+        return [];
+    const verts = [];
+    for (let i = 1; i < points.length - 1; i++) {
+        verts.push(points[0], points[i], points[i + 1]);
+    }
+    return verts;
+}
+export function triangulateStrokePath(points, lineWidth, closed) {
+    if (points.length < 2)
+        return [];
+    const verts = [];
+    const half = lineWidth / 2;
+    const miterLimit = 4;
+    const n = points.length;
+    const segCount = closed ? n : n - 1;
+    const offsets = [];
+    for (let i = 0; i < segCount + 1; i++) {
+        const pi = points[((i - 1) + n) % n] ?? points[i - 1];
+        const p = points[i % n];
+        const pn = points[(i + 1) % n] ?? points[i + 1];
+        if (i === 0 && !closed) {
+            const dx = pn.x - p.x;
+            const dy = pn.y - p.y;
+            const d = Math.sqrt(dx * dx + dy * dy);
+            if (d === 0) {
+                offsets.push({ ox: 0, oy: 0, ix: 0, iy: 0 });
+                continue;
+            }
+            const nx = (-dy / d) * half;
+            const ny = (dx / d) * half;
+            offsets.push({ ox: nx, oy: ny, ix: -nx, iy: -ny });
+            continue;
+        }
+        if (i === segCount && !closed) {
+            const dx = p.x - pi.x;
+            const dy = p.y - pi.y;
+            const d = Math.sqrt(dx * dx + dy * dy);
+            if (d === 0) {
+                offsets.push({ ox: 0, oy: 0, ix: 0, iy: 0 });
+                continue;
+            }
+            const nx = (-dy / d) * half;
+            const ny = (dx / d) * half;
+            offsets.push({ ox: nx, oy: ny, ix: -nx, iy: -ny });
+            continue;
+        }
+        const dx1 = p.x - pi.x;
+        const dy1 = p.y - pi.y;
+        const d1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const dx2 = pn.x - p.x;
+        const dy2 = pn.y - p.y;
+        const d2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+        if (d1 === 0 || d2 === 0) {
+            const dx = d2 !== 0 ? dx2 : dx1;
+            const dy = d2 !== 0 ? dy2 : dy1;
+            const d = Math.max(d1, d2);
+            if (d === 0) {
+                offsets.push({ ox: 0, oy: 0, ix: 0, iy: 0 });
+                continue;
+            }
+            const nx = (-dy / d) * half;
+            const ny = (dx / d) * half;
+            offsets.push({ ox: nx, oy: ny, ix: -nx, iy: -ny });
+            continue;
+        }
+        const nx1 = -dy1 / d1;
+        const ny1 = dx1 / d1;
+        const nx2 = -dy2 / d2;
+        const ny2 = dx2 / d2;
+        const cross = nx1 * ny2 - ny1 * nx2;
+        const dot = nx1 * nx2 + ny1 * ny2;
+        const miter = Math.sqrt(2 / (1 - dot));
+        if (Math.abs(cross) < 0.01 || miter > miterLimit) {
+            const mx = (nx1 + nx2) * half * 0.5;
+            const my = (ny1 + ny2) * half * 0.5;
+            offsets.push({ ox: mx, oy: my, ix: -mx, iy: -my });
+        }
+        else {
+            const ml = Math.min(miter, miterLimit);
+            const mx = (nx1 + nx2) * half * ml / Math.sqrt(2);
+            const my = (ny1 + ny2) * half * ml / Math.sqrt(2);
+            if (cross > 0) {
+                offsets.push({ ox: -mx, oy: -my, ix: mx, iy: my });
+            }
+            else {
+                offsets.push({ ox: mx, oy: my, ix: -mx, iy: -my });
+            }
+        }
+    }
+    for (let i = 0; i < segCount; i++) {
+        const p0 = points[i % n];
+        const p1 = points[(i + 1) % n];
+        const o0 = offsets[i];
+        const o1 = offsets[i + 1];
+        verts.push({ x: p0.x + o0.ox, y: p0.y + o0.oy }, { x: p0.x + o0.ix, y: p0.y + o0.iy }, { x: p1.x + o1.ox, y: p1.y + o1.oy }, { x: p0.x + o0.ix, y: p0.y + o0.iy }, { x: p1.x + o1.ix, y: p1.y + o1.iy }, { x: p1.x + o1.ox, y: p1.y + o1.oy });
+    }
+    return verts;
+}
+export function quadVerts(dx, dy, dw, dh, sx, sy, sw, sh, texW, texH) {
+    const u0 = sx / texW;
+    const v0 = sy / texH;
+    const u1 = (sx + sw) / texW;
+    const v1 = (sy + sh) / texH;
+    return new Float32Array([
+        dx, dy, u0, v0,
+        dx + dw, dy, u1, v0,
+        dx, dy + dh, u0, v1,
+        dx + dw, dy, u1, v0,
+        dx + dw, dy + dh, u1, v1,
+        dx, dy + dh, u0, v1,
+    ]);
+}
+export function cubicBezierPoints(x0, y0, cp1x, cp1y, cp2x, cp2y, x, y, segments = 30) {
+    const pts = [];
+    for (let i = 1; i <= segments; i++) {
+        const t = i / segments;
+        const ti = 1 - t;
+        const px = ti * ti * ti * x0 + 3 * ti * ti * t * cp1x + 3 * ti * t * t * cp2x + t * t * t * x;
+        const py = ti * ti * ti * y0 + 3 * ti * ti * t * cp1y + 3 * ti * t * t * cp2y + t * t * t * y;
+        pts.push({ x: px, y: py });
+    }
+    return pts;
+}
+export function quadraticBezierPoints(x0, y0, cpx, cpy, x, y, segments = 20) {
+    const pts = [];
+    for (let i = 1; i <= segments; i++) {
+        const t = i / segments;
+        const ti = 1 - t;
+        const px = ti * ti * x0 + 2 * ti * t * cpx + t * t * x;
+        const py = ti * ti * y0 + 2 * ti * t * cpy + t * t * y;
+        pts.push({ x: px, y: py });
+    }
+    return pts;
+}

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+export interface Point2D {
+    x: number;
+    y: number;
+}
+export interface PathCommand {
+    type: 'moveTo' | 'lineTo' | 'arc' | 'rect' | 'bezierCurveTo' | 'quadraticCurveTo';
+    x?: number;
+    y?: number;
+    cx?: number;
+    cy?: number;
+    radius?: number;
+    startAngle?: number;
+    endAngle?: number;
+    anticlockwise?: boolean;
+    rx?: number;
+    ry?: number;
+    rw?: number;
+    rh?: number;
+    cp1x?: number;
+    cp1y?: number;
+    cp2x?: number;
+    cp2y?: number;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "canvas2gl",
+  "version": "1.0.0",
+  "description": "A high-performance 2D graphics library that maps the Canvas 2D API to WebGL rendering",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "README_zh.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "canvas2d",
+    "webgl",
+    "2d",
+    "graphics",
+    "rendering"
+  ],
+  "license": "MIT"
+}