Skip to content

Library Usage Backgrounds

Chris W edited this page Dec 9, 2024 · 4 revisions

Background Options

Goshot provides several types of backgrounds to make your code screenshots visually appealing. This guide covers all available background types and their configuration options.

Available Background Types

  1. Solid Color
  2. Gradient
    • Linear Gradient
    • Radial Gradient
    • Angular Gradient
    • Diamond Gradient
    • Spiral Gradient
    • Square Gradient
    • Star Gradient
  3. Image
  4. Shadows (can be applied to any background type)

Common Background Interface

All background types implement the common Background interface:

type Background interface {
    // Render applies the background to the given content image
    // It returns a new image with the background applied
    Render(content image.Image) (image.Image, error)

    // WithCornerRadius sets the corner radius for the background
    WithCornerRadius(radius float64) Background

    // WithShadow sets the shadow configuration for the background
    WithShadow(shadow Shadow) Background
}

Padding Configuration

Goshot provides flexible padding configuration through the Padding type:

// Equal padding on all sides
padding := background.NewPadding(20)

// Different horizontal and vertical padding
padding := background.NewPaddingHV(20, 40) // 20px horizontal, 40px vertical

// Custom padding for each side
padding := background.Padding{
    Top:    20,
    Right:  30,
    Bottom: 20,
    Left:   30,
}

Solid Color Background

The simplest background type - a solid color with optional padding and corner radius.

import (
    "image/color"
    "github.com/watzon/goshot/pkg/background"
)

bg := background.NewColorBackground().
    SetColor(color.RGBA{R: 30, G: 30, B: 30, A: 255}).
    WithPaddingDetailed(20, 30, 20, 30). // top, right, bottom, left
    WithCornerRadius(10)

Gradient Backgrounds

Goshot supports various gradient types, each with its own configuration options.

Available Gradient Types

const (
    LinearGradient  GradientType = iota // Linear gradient
    RadialGradient                      // Radial gradient
    AngularGradient                     // Angular/conic gradient
    DiamondGradient                     // Diamond-shaped gradient
    SpiralGradient                      // Spiral-shaped gradient
    SquareGradient                      // Square-shaped gradient
    StarGradient                        // Star-shaped gradient
)

Linear Gradient

bg := background.NewGradientBackground(
    background.LinearGradient,
    background.GradientStop{Color: color.RGBA{R: 30, G: 30, B: 30, A: 255}, Position: 0},
    background.GradientStop{Color: color.RGBA{R: 60, G: 60, B: 60, A: 255}, Position: 1},
).
    WithAngle(45).
    WithPadding(40).
    WithCornerRadius(10)

Radial Gradient

bg := background.NewGradientBackground(
    background.RadialGradient,
    background.GradientStop{Color: color.RGBA{R: 30, G: 30, B: 30, A: 255}, Position: 0},
    background.GradientStop{Color: color.RGBA{R: 60, G: 60, B: 60, A: 255}, Position: 1},
).
    WithCenter(0.5, 0.5). // Center point (0-1 range)
    WithPadding(40).
    WithCornerRadius(10)

Special Gradients

// Star gradient
bg := background.NewGradientBackground(
    background.StarGradient,
    background.GradientStop{Color: color.RGBA{R: 30, G: 30, B: 30, A: 255}, Position: 0},
    background.GradientStop{Color: color.RGBA{R: 60, G: 60, B: 60, A: 255}, Position: 1},
).
    WithIntensity(5.0). // Controls number of star points
    WithPadding(40).
    WithCornerRadius(10)

// Spiral gradient
bg := background.NewGradientBackground(
    background.SpiralGradient,
    background.GradientStop{Color: color.RGBA{R: 30, G: 30, B: 30, A: 255}, Position: 0},
    background.GradientStop{Color: color.RGBA{R: 60, G: 60, B: 60, A: 255}, Position: 1},
).
    WithIntensity(3.0). // Controls spiral tightness
    WithPadding(40).
    WithCornerRadius(10)

Image Background

Use an image as the background with various scaling and positioning options.

import (
    "os"
    "image"
    _ "image/jpeg" // Import for JPEG support
    "github.com/watzon/goshot/pkg/background"
)

// Load an image
file, _ := os.Open("background.jpg")
img, _, _ := image.Decode(file)
defer file.Close()

bg := background.NewImageBackground(img).
    WithScaleMode(background.ImageScaleFill).
    WithBlurRadius(3.0).
    WithOpacity(0.9).
    WithPadding(40).
    WithCornerRadius(10)

Shadows

All background types support shadows that can be applied to the content. Shadows are highly configurable and can create various effects from subtle depth to dramatic elevation.

// Create a shadow configuration
shadow := background.NewShadow().
    WithOffset(0, 3).           // 3px downward offset
    WithBlur(20).              // 20px blur radius
    WithSpread(8).             // 8px spread radius
    WithCornerRadius(10).      // Match content corner radius

// Apply shadow to any background type
bg := background.NewColorBackground().
    SetColor(color.RGBA{40, 42, 54, 255}).
    WithPadding(40).
    WithCornerRadius(10).
    WithShadow(shadow)

Shadow Configuration Options

  • WithOffset(x, y float64) - Set the X and Y offset of the shadow
  • WithBlur(radius float64) - Set the blur radius
  • WithSpread(radius float64) - Set the spread radius
  • WithCornerRadius(radius float64) - Set the shadow corner radius

Best Practices

  1. Memory Efficiency

    • When using image backgrounds, resize large images before using them
    • Use JPEG for photographic backgrounds and PNG for graphics with transparency
  2. Visual Appeal

    • Match corner radius between background and shadow
    • Keep padding consistent with your window chrome style
    • Use subtle gradients for a professional look
  3. Performance

    • Cache background objects for multiple screenshots
    • Use simpler backgrounds for batch processing
    • Consider memory usage when applying blur effects