iblokz-gfx

Graphics utilities for geometry operations and canvas drawing.

Installation

npm install iblokz-gfx

Usage

import {rect, canvas, cursor} from 'iblokz-gfx';

// Rectangle operations
const r1 = rect.fromVectors({x: 10, y: 20}, {x: 50, y: 60});
const r2 = {x: 15, y: 25, width: 10, height: 10};

rect.containsRect(r1, r2); // true
rect.intersects(r1, r2); // true

// Canvas drawing
const ctx = document.querySelector('canvas').getContext('2d');
canvas.clear(ctx);
canvas.rect(ctx, r1, '#ff0000', '#000000');
canvas.line(ctx, {x: 0, y: 0}, {x: 100, y: 100}, '#000000');

// Cursor icons
const icons = cursor.prepIcons({
  pointer: '\uf245',
  hand: '\uf256'
});
cursor.setCursor(element, icons.pointer);

API

rect

Rectangle and geometry utilities.

• vectorAdd(a, b) - Adds two vectors
• fromVectors(a, b) - Creates rectangle from two vectors
• toVectors(rect) - Converts rectangle to corner vectors
• pan(rect, v) - Translates rectangle by vector
• resize(rect, v) - Resizes rectangle by adjusting end point
• containsVector(rect, v) - Checks if point is inside rectangle
• containsRect(rect1, rect2) - Checks if rect1 fully contains rect2
• contains(rect, obj) - Checks if rectangle contains object (rect or vector)
• intersects(rect1, rect2) - Checks if two rectangles overlap

canvas

Canvas drawing utilities.

• clear(ctx) - Clears the canvas
• line(ctx, start, finish, stroke, dash) - Draws a line
• rect(ctx, rect, background, stroke, dash) - Draws a rectangle
• text(ctx, options) - Draws text
• refresh(ctx) - Updates canvas size from parent element

cursor

Cursor icon utilities (requires DOM).

• createCanvas() - Creates canvas for icon generation
• iconCodeToDataURL(code, ctx) - Converts icon code to data URL
• prepIcons(list) - Prepares multiple icons from a list
• setCursor(el, dataURL) - Sets cursor style on element

License

MIT