Skip to content

Library Usage Backgrounds

Chris Watson edited this page Nov 21, 2024 · 3 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
    Render(content image.Image) image.Image

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

    // SetShadow sets the shadow configuration for the background
    SetShadow(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}).
    SetPaddingDetailed(20, 30, 20, 30). // top, right, bottom, left
    SetCornerRadius(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},
).
    SetAngle(45).
    SetPadding(40).
    SetCornerRadius(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},
).
    SetCenter(0.5, 0.5). // Center point (0-1 range)
    SetPadding(40).
    SetCornerRadius(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},
).
    SetIntensity(5.0). // Controls number of star points
    SetPadding(40).
    SetCornerRadius(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},
).
    SetIntensity(3.0). // Controls spiral tightness
    SetPadding(40).
    SetCornerRadius(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).
    SetScaleMode(background.ImageScaleFill).
    SetBlurRadius(3.0).
    SetOpacity(0.9).
    SetPadding(40).
    SetCornerRadius(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().
    SetOffset(0, 3).           // 3px downward offset
    SetBlur(20).              // 20px blur radius
    SetSpread(8).             // 8px spread radius
    SetCornerRadius(10).      // Match content corner radius
    SetColor(color.RGBA{0, 0, 0, 200}) // Black with 78% opacity

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

Shadow Configuration Options

  • SetOffset(x, y float64) - Set the X and Y offset of the shadow
  • SetBlur(radius float64) - Set the blur radius
  • SetSpread(radius float64) - Set the spread radius
  • SetColor(color.Color) - Set the shadow color
  • SetCornerRadius(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