2011-11-06 12 views
31

Ho un sito che mostra accordi di chitarra/schede in formato testo. Ecco quello che sto attualmente visualizzando:Creare un'immagine in PHP per mostrare accordi di chitarra

em:

| | | | | | 
| | | | | | 
| 2 2 | | | 
| | | | | | 
| | | | | | 

apprendo che GD può creare un'immagine dinamica per questo. Ma io sono nuovo in PHP e non ho idea di cosa fare.

È semplice creare tale cosa in PHP per visualizzare un'immagine?

Grazie

+0

Se si aggiunge una certa semantica all'output del testo, è possibile ridimensionarla anche con i CSS. Ma non voglio impedirti di usare GD, è una bella cosa. – hakre

risposta

72

Prima scaricare il tipo di carattere arial e ottenere questa immagine (salvo quanto Guitar.jpg):

guitar.jpg

e metterli nella stessa cartella di questo script (ad esempio accordi. php):

<?php 

    function showChord($chord) { 
    $imgfile = "./guitar.jpg"; 
    $text = "."; 
    $font = './arial.ttf'; 

    $im = imagecreatefromjpeg($imgfile); 
    $x = imagesx($im); 
    $y = imagesy($im); 
    $fontsize = 100; 
    $white = imagecolorallocate($im, 0, 0, 0); 

    $chords = explode('-', $chord); 
    // chords[0] = e1 and chords[5] = e6 

    $minimum = min($chords); 
    imagettftext($im, 15, 0, 1, 32, $white, $font, $minimum); 
    $add = 0; 
    if($minimum > 0) { 
     $add = 30; 
    } 
    // chords positions 
    $interval1 = ($chords[0] != 0 ? (25 + $add + (intval($chords[0]) - $minimum) * 30) : 0); 
    $interval2 = ($chords[1] != 0 ? (25 + $add + (intval($chords[1]) - $minimum) * 30) : 0); 
    $interval3 = ($chords[2] != 0 ? (25 + $add + (intval($chords[2]) - $minimum) * 30) : 0); 
    $interval4 = ($chords[3] != 0 ? (25 + $add + (intval($chords[3]) - $minimum) * 30) : 0); 
    $interval5 = ($chords[4] != 0 ? (25 + $add + (intval($chords[4]) - $minimum) * 30) : 0); 
    $interval6 = ($chords[5] != 0 ? (25 + $add + (intval($chords[5]) - $minimum) * 30) : 0); 
    // write to the image 
    imagettftext($im, $fontsize, 0, 01, $interval1, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 18, $interval2, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 36, $interval3, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 53, $interval4, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 70, $interval5, $white, $font, $text); 
    imagettftext($im, $fontsize, 0, 86, $interval6, $white, $font, $text); 
    header("Content-type: image/jpeg"); 
    imagejpeg($im); 
    ImageDestroy($im); 
    } 

# $chord = '0-2-2-0-0-0'; //Em 
    $chord = '2-4-4-3-2-2'; //F# 
    showChord($chord); 

Questo uscirà qualcosa come per F #. Il in alto a sinistra significa che il secondo tasto :

enter image description here

** nota: vorrei anche salvare l'immagine sul disco in modo da non dover rigenerare la stessa scheda più e *

+14

funziona come un incanto grazie – GuitarMaster

+0

sei molto gradito –

5

Tony Pottier ha scritto una bellissima lezione solo per fare questo. http://www.tonypottier.info/

Edit: per risolvere il problema come indicato di seguito:

$c = new chord(array('x',13,12,11,12,'x')); 
$c->setMarginRight(20); 
$c->setStartingFret(10); 
$c->draw(); 

Senza i margin-right fretnumbers doppio a figure non mostrerà correttamente.

+6

non male ma quando inserisci: 'x-13-12-11-12-x' mostra una scheda vuota – aki

+0

@aki vedi modifica sopra –

Problemi correlati