CrossPlatformDrawer 1.3.0

CrossPlatformDrawer

A powerful, cross-platform educational graphics library for .NET 8.0+ with enhanced drawing primitives, text rendering, game development features, and advanced visual effects. Perfect for educational environments, game development, creative coding, and rapid prototyping.

Features

Core Drawing Capabilities

• Basic Shapes: Rectangles, ellipses, lines, triangles, polygons
• Advanced Shapes (v1.1.0):
  • Arcs and pie slices
  • Cubic Bezier curves
  • Rounded rectangles
  • Regular polygons (3-12+ sides)
  • Stars and complex polygons

Enhanced Text Rendering (v1.1.0)

• Text alignment (left, center, right, top, middle, bottom)
• Automatic word wrapping
• Custom font loading support
• Multi-line text with adjustable line spacing

Visual Effects

• Color Utilities (v1.1.0): Color interpolation (Lerp), complementary colors
• Gradient Fills (v1.3.0): Linear gradients for all shapes with customizable angles
• Dash Styles (v1.3.0): Solid, Dash, Dot, DashDot, DashDotDot border patterns
• Shadow Effects: Customizable blur, offset, and color

Interactive Features

• Mouse Events: Click, move, release, scroll wheel (v1.2.0)
• Keyboard Input: Event-based and polling API (v1.2.0)
• Scaled Coordinates: Pixel-perfect drawing
• Real-time Rendering: Continuous mode for animations

Game Development Features (v1.2.0)

• Sprite Sheet Animation: Frame-based animation with SetFrame()
• Collision Detection: AABB, circle, point-in-shape helpers
• Input Polling: IsKeyDown() for smooth game controls
• Performance: 10-100x faster rendering with BGRA optimization

Architecture & Organization (v1.3.0)

• Shape Grouping: Composite pattern for managing complex objects (CGroup)
• Embedded Resources: Load images from project resources
• XML Documentation: Complete IntelliSense support

Advanced Rendering

• Background color management
• Coordinate grid overlay for debugging
• FPS display for performance monitoring
• Animation support with continuous rendering mode

Installation

Via NuGet Package Manager

Install-Package CrossPlatformDrawer -Version 1.3.0

Via .NET CLI

dotnet add package CrossPlatformDrawer --version 1.3.0

Via PackageReference

<PackageReference Include="CrossPlatformDrawer" Version="1.3.0" />

Quick Start

using CrossPlatformDrawer;
using SkiaSharp;

// Create a drawing window
var drawer = new CPDrawer(800, 600, false);
drawer.BackgroundColor = SKColors.DarkSlateGray;

// Draw basic shapes
drawer.AddRectangle(50, 50, 150, 100, SKColors.CornflowerBlue, 3, SKColors.White);
drawer.AddEllipse(250, 50, 150, 100, SKColors.Coral);
drawer.AddLine(50, 200, 400, 200, SKColors.LimeGreen, 5);

// Draw advanced shapes
drawer.AddArc(100, 300, 80, 0, 90, SKColors.Red, 3);
drawer.AddPie(250, 300, 100, 100, 45, 270, SKColors.Orange, 2, SKColors.Black);
drawer.AddRoundedRectangle(400, 300, 150, 100, 20, SKColors.SteelBlue);

// Add text
drawer.AddText("CrossPlatformDrawer", 24, 300, 500, SKColors.White);

// Render the scene
drawer.Render();

// Keep window open
System.Threading.Thread.Sleep(5000);
drawer.Dispose();

Documentation

Creating a Drawer

// Basic constructor
CPDrawer drawer = new CPDrawer(width, height);

// With continuous rendering for animation
CPDrawer drawer = new CPDrawer(width, height, false, true);

// Control the scale for pixel art
drawer.Scale = 10; // Each logical pixel becomes 10x10 screen pixels

Drawing Shapes

Basic Shapes

// Rectangle with border
drawer.AddRectangle(x, y, width, height, fillColor, borderThickness, borderColor);

// Filled ellipse
drawer.AddEllipse(x, y, width, height, fillColor);

// Line with thickness
drawer.AddLine(x1, y1, x2, y2, color, thickness);

// Triangle
drawer.AddTriangle(x1, y1, x2, y2, x3, y3, fillColor, borderThickness, borderColor);

Advanced Shapes (v1.1.0)

// Arc - portion of circle outline
drawer.AddArc(centerX, centerY, radius, startAngle, sweepAngle, color, thickness);

// Pie slice - filled sector
drawer.AddPie(x, y, width, height, startAngle, sweepAngle, fillColor, borderThickness, borderColor);

// Cubic Bezier curve
drawer.AddBezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2, color, thickness);

// Rounded rectangle
drawer.AddRoundedRectangle(x, y, width, height, cornerRadius, fillColor, borderThickness, borderColor);

// Regular polygon (pentagon, hexagon, etc.)
drawer.AddRegularPolygon(centerX, centerY, sides, radius, rotation, fillColor, borderThickness, borderColor);

// Star
drawer.AddStar(centerX, centerY, points, outerRadius, innerRadius, rotation, fillColor);

Text Rendering

// Simple text
drawer.AddText("Hello World", fontSize, x, y, color);

// Aligned text (v1.1.0)
drawer.AddTextAligned("Centered Text", x, y, fontSize, color, 
    CPDrawer.TextAlignment.Center, CPDrawer.VerticalAlignment.Middle, "Arial");

// Word-wrapped text (v1.1.0)
drawer.AddTextWrapped(longText, x, y, maxWidth, fontSize, color, lineSpacing, "Arial");

// Load custom font (v1.1.0)
drawer.LoadFont("MyFont", "path/to/font.ttf");

Color Utilities (v1.1.0)

// Color interpolation for gradients
for (int i = 0; i < steps; i++)
{
    float t = i / (float)(steps - 1);
    SKColor gradientColor = ColorUtils.Lerp(SKColors.Red, SKColors.Blue, t);
    drawer.AddRectangle(x + i * width, y, width, height, gradientColor);
}

// Get complementary color for contrast
SKColor baseColor = SKColors.Orange;
SKColor complement = ColorUtils.GetComplementary(baseColor);

Gradient Fills (v1.3.0)

// Apply linear gradient to any shape using AddGroup pattern
var group = drawer.AddGroup(0, 0);

// Create shape and configure gradient
var rect = new CRectangle(100, 100, 200, 150, SKColors.Red, 2, SKColors.White);
rect.SetLinearGradient(SKColors.Red, SKColors.Blue, 90); // 90° = vertical

// Add to group (which adds to drawer)
group.Add(rect);

// Gradient angles:
// 0° = horizontal (left to right)
// 90° = vertical (top to bottom)
// 45° = diagonal
// 180° = horizontal (right to left)

Dash Styles (v1.3.0)

// Create shapes with dashed borders using AddGroup pattern
var group = drawer.AddGroup(0, 0);

var dashedRect = new CRectangle(50, 50, 150, 100, SKColors.White, 4, SKColors.Black);
dashedRect.BorderDashStyle = DashStyle.Dash;
group.Add(dashedRect);

var dottedEllipse = new CEllipse(250, 50, 150, 100, SKColors.LightBlue, 4, SKColors.Blue);
dottedEllipse.BorderDashStyle = DashStyle.Dot;
group.Add(dottedEllipse);

// Available styles: Solid, Dash, Dot, DashDot, DashDotDot

Shape Grouping (v1.3.0)

// Create groups to manage multiple shapes as a single unit
var robotGroup = drawer.AddGroup(100, 100);

// Add shapes to the group
var head = new CEllipse(10, 0, 40, 40, SKColors.Gray);
var body = new CRectangle(0, 45, 60, 80, SKColors.Silver);
var leftArm = new CRectangle(-15, 50, 10, 50, SKColors.Gray);
var rightArm = new CRectangle(65, 50, 10, 50, SKColors.Gray);

robotGroup.Add(head).Add(body).Add(leftArm).Add(rightArm);

// Move entire group by changing group position
robotGroup.X = 200; // Moves all shapes together
robotGroup.Visible = false; // Hide/show all at once

Interactive Features

// Mouse events
drawer.MouseLeftClick += (point, drawer) =>
{
    drawer.AddEllipse(point.X - 10, point.Y - 10, 20, 20, SKColors.Red);
};

drawer.MouseMove += (point, drawer) =>
{
    Console.WriteLine($"Mouse at: {point.X}, {point.Y}");
};

// Keyboard events
drawer.KeyboardEvent += (isDown, key, drawer) =>
{
    if (isDown && key == "Space")
    {
        drawer.Clear();
    }
};

// v1.2.0: Input polling (better for game loops)
if (drawer.IsKeyDown("W")) playerY -= speed;
if (drawer.IsKeyDown("S")) playerY += speed;
if (drawer.IsKeyDown("A")) playerX -= speed;
if (drawer.IsKeyDown("D")) playerX += speed;

// v1.2.0: Mouse scroll wheel
drawer.MouseScroll += (delta, drawer) =>
{
    zoom += delta * 0.1f;
};

// Get mouse position for pixel drawing
if (drawer.GetLastMouseLeftClick(out Point clickPoint))
{
    drawer.SetBBPixel(clickPoint.X, clickPoint.Y, SKColors.White);
}

Sprite Sheet Animation (v1.2.0)

// Load sprite sheet once
var sprite = drawer.AddImage("character_spritesheet.png", 100, 100, 64, 64);

// Update frame in game loop
int currentFrame = 0;
int direction = 0; // 0=down, 1=right, 2=up, 3=left

// Calculate frame position in sprite sheet
int frameCol = currentFrame % 4;
int frameRow = direction;
int sourceX = frameCol * 64;
int sourceY = frameRow * 64;

// Set the frame to display
sprite.SetFrame(sourceX, sourceY, 64, 64);

// Animate by changing currentFrame each update
currentFrame = (currentFrame + 1) % 4;

Collision Detection (v1.2.0)

using CrossPlatformDrawer;

// AABB (Axis-Aligned Bounding Box) collision
var rect1 = drawer.AddRectangle(100, 100, 50, 50, SKColors.Red);
var rect2 = drawer.AddRectangle(120, 120, 50, 50, SKColors.Blue);

var shape1 = drawer.GetLastShape(); // Get last added shape
var shape2 = drawer.GetLastShape(); // Would need to track shapes properly

if (Collision.IsColliding(shape1, shape2))
{
    Console.WriteLine("Collision detected!");
}

// Circle collision (more accurate for circular shapes)
var circle1 = new CEllipse(100, 100, 50, 50, SKColors.Red);
var circle2 = new CEllipse(120, 120, 50, 50, SKColors.Blue);

if (Collision.IsCircleColliding(circle1, circle2))
{
    Console.WriteLine("Circles overlapping!");
}

// Point-in-shape detection (for mouse clicks)
if (Collision.IsPointInShape(mouseX, mouseY, shape))
{
    Console.WriteLine("Clicked on shape!");
}

Shadow Effects

// Enable shadows for depth
drawer.ShadowEnabled = true;
drawer.ShadowColor = SKColors.Black.WithAlpha(100);
drawer.ShadowOffsetX = 5;
drawer.ShadowOffsetY = 5;
drawer.ShadowBlur = 10;

// Draw shapes - they'll have shadows
drawer.AddRectangle(50, 50, 100, 100, SKColors.White);

Animation

// Create drawer in continuous mode
var drawer = new CPDrawer(800, 600, false, true);

// Animation loop
for (int frame = 0; frame < 300; frame++)
{
    drawer.Clear();

    // Draw animated content
    double angle = frame * 2;
    int x = 400 + (int)(150 * Math.Cos(angle * Math.PI / 180));
    int y = 300 + (int)(150 * Math.Sin(angle * Math.PI / 180));
    drawer.AddEllipse(x - 20, y - 20, 40, 40, SKColors.Yellow);

    drawer.Render();
    Thread.Sleep(33); // ~30 FPS
}

Loading Images

From File System

// Load from images/ folder (automatic search)
drawer.AddImage("logo.png", 100, 100);

// Load from specific path
drawer.AddImage("assets/character.png", 200, 200);

// With custom size
drawer.AddImage("background.jpg", 0, 0, 800, 600);

From Embedded Resources (v1.3.0)

// Add image to your project as Embedded Resource
// In .csproj:
// <ItemGroup>
//   <EmbeddedResource Include="Images\logo.png" />
// </ItemGroup>

// Load from resource (prefix with "resource:")
drawer.AddImage("resource:logo.png", 100, 100);

// Or use full resource name
drawer.AddImage("resource:MyProject.Images.logo.png", 100, 100);

// The library automatically searches for partial matches
drawer.AddImage("resource:logo", 100, 100); // Finds any resource ending with "logo"

Use Cases

Educational Programming

• Teaching graphics programming concepts
• Visual algorithm demonstrations
• Interactive coding exercises
• Student project presentations

Creative Coding

• Generative art creation
• Data visualization
• Interactive sketches
• Rapid prototyping

Game Development

• 2D game prototypes
• Sprite rendering
• Simple physics simulations
• UI mockups

Migration from GDIDrawer

CrossPlatformDrawer is designed as a modern replacement for the legacy GDIDrawer library:

// Old GDIDrawer code
using GDIDrawer;
CDrawer drawer = new CDrawer();
drawer.AddText("Hello", 12, Color.Red);

// New CrossPlatformDrawer code
using CrossPlatformDrawer;
using SkiaSharp;
CPDrawer drawer = new CPDrawer();
drawer.AddText("Hello", 12, 100, 100, SKColors.Red);

Key differences:

• Cross-platform support (Windows, Linux, macOS)
• Uses SKColor instead of System.Drawing.Color
• Enhanced features and better performance
• Modern .NET 8.0+ support

Demo Suite

The library includes a comprehensive demo application showcasing all features:

dotnet run

18 Interactive Demos:

• v1.1.0 Features (9 demos): Basic shapes, primitives, text, colors, interactivity, animation, shadows
• v1.2.0 Features (5 demos): Performance, collision detection, sprite sheets, input polling, scroll wheel
• v1.3.0 Features (4 demos): Gradient fills, dash styles, shape grouping, resource loading

Special Features:

• Run all demos sequentially (Option 0)
• Single window mode (Option S)
• Color debugging utilities (Options T, X)

See IMAGE_ASSETS_REQUIRED.md for optional sprite sheet assets.

Requirements

• .NET 8.0 or higher
• Dependencies (automatically installed):
  • Avalonia 11.0.7
  • Avalonia.Desktop 11.0.7
  • Avalonia.Skia 11.0.7
  • SkiaSharp 2.88.7

Version History

v1.3.0 (Latest)

• VISUAL: Linear gradient fills for all shapes with customizable angles
• VISUAL: Dash/dot stroke styles for borders and lines (Solid, Dash, Dot, DashDot, DashDotDot)
• ARCHITECTURE: Shape grouping (CGroup) with composite pattern for complex objects
• RESOURCES: Embedded resource loading for images (prefix with "resource:")
• DOCS: Complete XML documentation for all public members
• Group management methods: AddGroup(), GetLastGroup()
• Gradient helper methods: SetLinearGradient(), ClearGradient()

v1.2.0

• PERFORMANCE: Massive rendering optimization (10-100x faster) using native BGRA format
• MEMORY: Auto-dispose singleton to prevent crashes in educational environments
• GAME DEV: Collision detection helpers (AABB, circle, point-in-shape)
• GAME DEV: Sprite sheet animation support with frame selection
• INPUT: Input polling API (IsKeyDown) for smooth game controls
• INPUT: Mouse scroll wheel support

v1.1.0

• Added new drawing primitives (Arc, Pie, Bezier, Rounded rectangles, Regular polygons)
• Enhanced text rendering with alignment and word wrapping
• Custom font loading support
• Color utility methods (Lerp, complementary colors)
• Comprehensive XML documentation for IntelliSense

v1.0.0

• Initial release with basic drawing capabilities
• Mouse and keyboard event handling
• Cross-platform support via Avalonia

Acknowledgments

• Built with Avalonia UI for cross-platform support
• Graphics rendering powered by SkiaSharp
• Designed for educational use in computer science courses

Made for educators and students by the Digital Creators Suite team