Chandra
22 results

 view release on metacpan or  search on metacpan

examples/canvas_demo.pl  view on Meta::CPAN 

           ->restore;
    
    # Row 5: Lines & Polygons
    $canvas->stroke_style('#34495e')->line_width(3)->line(50, 380, 150, 430);
    $canvas->stroke_style('#16a085')->polygon([[220, 380], [280, 380], [300, 430], [250, 460], [200, 430]]);
    $canvas->fill_style('#d35400')
           ->fill_polygon([[400, 370], [420, 410], [470, 410], [430, 440], [450, 480], [400, 450], [350, 480], [370, 440], [330, 410], [380, 410]]);
    
    # Row 6: Compositing
    $canvas->fill_style('#3498db')->fill_rect(550, 380, 60, 60);
    $canvas->global_composite_operation('lighter')
           ->fill_style('#e74c3c')->fill_rect(580, 400, 60, 60)
           ->global_composite_operation('source-over');
    $canvas->fill_style('#27ae60')->fill_rect(680, 380, 60, 60);
    $canvas->global_composite_operation('multiply')
           ->fill_style('#f39c12')->fill_rect(700, 400, 60, 60)
           ->global_composite_operation('source-over');
    
    canvas_flush();
    return "Demo scene drawn";
});

# ============================================================================
# Build the UI
# ============================================================================
my $canvas_html = $canvas->render;

$app->set_content(<<"HTML");
<!DOCTYPE html>
<html>
<head>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        min-height: 100vh;
        padding: 20px;
        color: #fff;
    }
    .container {
        max-width: 860px;
        margin: 0 auto;
    }
    h1 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
        color: #f1f1f1;
    }
    .canvas-wrapper {
        background: #fff;
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        margin-bottom: 20px;
    }
    canvas {
        display: block;
        border-radius: 8px;
        cursor: crosshair;
    }
    .toolbar {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 15px;
    }
    .tool-group {
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        padding: 10px 15px;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .tool-group label {
        font-size: 12px;
        color: #aaa;
        margin-right: 5px;
    }
    button {
        background: #3498db;
        color: #fff;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s;
    }
    button:hover {
        background: #2980b9;
        transform: translateY(-1px);
    }
    button.active {
        background: #e74c3c;
    }
    button.clear {
        background: #95a5a6;
    }
    button.clear:hover {
        background: #7f8c8d;
    }
    button.demo {
        background: #27ae60;
    }
    button.demo:hover {
        background: #219a52;
    }
    .color-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
    }
    .color-btn:hover {
        transform: scale(1.1);
    }
    .color-btn.active {
        border-color: #fff;
        box-shadow: 0 0 10px rgba(255,255,255,0.5);
    }
    .status {
        text-align: center;
        font-size: 12px;
        color: #888;
        margin-top: 10px;
    }
    .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 15px;
        font-size: 11px;
        color: #888;
    }
    .feature {
        background: rgba(255,255,255,0.05);
        padding: 8px;
        border-radius: 6px;
        text-align: center;
    }
</style>
</head>
<body>
<div class="container">
    <h1>🎨 Chandra::Canvas Demo</h1>
    
    <div class="toolbar">
        <div class="tool-group">
            <label>Shape:</label>
            <button id="btn-rect" class="active" onclick="setShape('rect')">â–¢ Rect</button>
            <button id="btn-circle" onclick="setShape('circle')">â—‹ Circle</button>
            <button id="btn-triangle" onclick="setShape('triangle')">â–³ Triangle</button>
            <button id="btn-star" onclick="setShape('star')">★ Star</button>
            <button id="btn-rounded_rect" onclick="setShape('rounded_rect')">â–¢ Rounded</button>
            <button id="btn-bezier" onclick="setShape('bezier')">〰 Bezier</button>
        </div>
        
        <div class="tool-group">
            <label>Color:</label>
            <div class="color-btn active" style="background:#e74c3c" onclick="setColor('#e74c3c')"></div>
            <div class="color-btn" style="background:#3498db" onclick="setColor('#3498db')"></div>
            <div class="color-btn" style="background:#27ae60" onclick="setColor('#27ae60')"></div>
            <div class="color-btn" style="background:#f39c12" onclick="setColor('#f39c12')"></div>
            <div class="color-btn" style="background:#9b59b6" onclick="setColor('#9b59b6')"></div>
            <div class="color-btn" style="background:#1abc9c" onclick="setColor('#1abc9c')"></div>
        </div>
        
        <div class="tool-group">
            <button class="demo" onclick="drawDemo()">✨ Show All Features</button>
            <button class="clear" onclick="clearCanvas()">🗑 Clear</button>
        </div>



( run in 1.187 second using v1.01-cache-2.11-cpan-140bd7fdf52 )