[alg] Plaatsen van text op een afbeelding

[Aphelion]

hoi mede tweakers,

Ik heb in gedachten een systeem waarbij een gebruiker een plaatje ziet, en moet kunnen opgeven op welke plaatsen hij tekst wilt laten verschijnen uit een database. De omgeving waar ik dit voor elkaar moet krijgen is een php website.

Ik had mij bedacht dat een gebruiker zijn plaatje ziet, en kan klikken op de image met als gevolg dat er dan een blokje komt met een woord er in, die hij dan kan verplaatsen om te bedenken op welke plek hij de tekst mooi zou vinden. Dit is een van de mogelijke manieren,

Ik kom er alleen niet uit hoe dit te realiseren valt, mijn eigen suggesties waren een imagemap, dhtml of flash. Ik kan natuurlijk altijd de gebruiker gewoon coordinaten laten invullen maar dat vind ik niet echt gebruiksvriendelijk en is een erg goedkope / moeiteloze oplossing

Ook heb ik gekeken naar de zogenaamde image editors alleen zijn die niet open source te verkrijgen en gaat het het doel hard voor bij.

Zou iemand mij eventueel wat op weg kunnen helpen hoe dit het beste en / of het netste aan te pakken is?

[Verwijderd]

met dhtml kan het, met flash ook, met een imagemap zou ik niet doen.

Wat zijn de moeilijkheden waar je tegenaanloopt?

[Aphelion]

De moeilijkheden waar ik tegen aanloop zijn denk ik de beperkingen.
Ik zal proberen het geheel nog wat duidelijker te omschrijven:

De gebruiker moet dus aan de bovenkant een plaatje zien (in dit geval een envelop),
en moet dan kunnen aangeven op welke plekken een X aantal velden naar zijn keuze (moeten dus toe te voegen en verwijderen zijn) toe te voegen. Dan moet hij onder het plaatje in een form de waarde's van die textvelden aan kunnen passen. uiteindelijk moet ik dus op de plek van die coordinaten de ingevulde gegevens van de form met pfd libs tot een pdf laten genereren.

[ Voor 4% gewijzigd door Aphelion op 25-02-2005 15:53 ]

[Verwijderd]

ik denk dan dat er weinig beperkingen zijn, behalve jezelf. Je zou zelfs en input velden versleepbaar kunnen maken zodat men ze op de plaats kan editen.

Het enige wat ik kan bedenken is dat je met flash makkelijker met verschillende fonts kan werken, maar verder is dit prima mogelijk

[Aphelion]

Dat probleem zag ik dus ook, je wilt ook meerdere fonts kunnen gebruiken. Dus ik zat te denken om GD libs te gebruiken om op die plekken die je aangeeft een voorbeeld te maken, dus zal ik toch die textvakken los neer moeten zetten. Maar juist vanwege deze twijfel vraag ik dus, hoe is het mooiste om dit aan te pakken.

Ik zat te denken aan het laten klikken op de afbeelding om een vierkantje neer te zetten met een getal, dat komt overeen met een regel op de form waar je het 'deel' kunt opmaken / instellen en met preview dus de afbeelding ingevult ziet met GD.

Dat je aangeeft dat de andere beperking ik zelf ben , is zeker waar. Ik beheers GD, maar geen dHTML, javascript etc. Ik zal dat dus eerst moeten aanleren. Daarom wil ik van te voren weten dat ik mezelf de goede techniek ga aanleren om nu te gebruiken

[Verwijderd]

Volgens mij is dit het makkelijkste met CSS te realiseren. Gewoon een background-image opgeven (het plaatje waar het om gaat) en je kan er gewoon tekst overheen zetten met html. Piece of cake.

Een snel in elkaar gezette site om dit te demonstreren: http://www.sushisoftware.nl/fok/
Had ik al gemaakt voor Fok!

[JHS]

Verwijderd schreef op vrijdag 25 februari 2005 @ 17:12:
Volgens mij is dit het makkelijkste met CSS te realiseren. Gewoon een background-image opgeven (het plaatje waar het om gaat) en je kan er gewoon tekst overheen zetten met html. (...)

Ja, maar het gaat er juist om dat de gebruiker op een prettige manier kan bepalen wáár de text komt te staan. Dus volgens mij mis je de boodschap .

[RM-rf]

als je wilt dat de gebruiker het element kan verslepen en WYSIWYG aanpassen (bv tekst ingeven, font aanpassen en de fontSize) is dat het best te doen odmv Dhtml...

oftewel, een Form op je pagina bevat alle de door jou gewenste waardes, een input voor posX, posY, fontFamily (waarschijnlijk een SELECT met toegestane fonts, aangezien je natuurlijk wilt dat enkel fonts gekozen worden die ook op de server staan), fontSize, innerText... en al die elementen hebben een 'onChange'-eventhandler, die de waarde van het preview-element aanpast nav de gekozen waarde..

bv:

code:

<form>
   <ul> <li><label for="fontsize">fontSize</label><input type="text" name="fontsize" id="fontsize" onchange="changeFontSize( this )"></li>
   <li><label for="innerText">innerText</label><input type="text" name="innerText" id="innerText" onchange="changeInnerText( this )"></li>
   </ul>
</form>
<div id="preview"></div>
<img src="jeachtergrondbeeld.jpg" alt="achtergrond" id="backgroundImage" />
<script type="text/javascript">
function changeInnerText( elm ) {
  document.getElementById( 'preview' ).innerHTML = elm.value
}
function changeFontSize( elm ) {
  if ( elm.value > 0 ) 
     document.getElementById( 'preview' ).style.fontSize= elm.value+"px"
  else
    alert( "vul een positief getal in" ) 
} </script>

Je kunt het positioneringsscript een drag-interface geven waarbij ondrag ook de positionerings-waarde wordt meegegeven aan de inputs voor de positionering ..
bv hiermee:
http://www.walterzorn.de/dragdrop/dragdrop.htm

met CSS kun je gewoon dmv position: absolute ervoor zorgen dat zowel 'preview' alswel 'backgroundImage' een vaste positie hebben op de pagina (left: 0; top: 0; bv) waarbij door middel van de z-index de preview over het achtergrondbeeld valt...

[ Voor 20% gewijzigd door RM-rf op 25-02-2005 17:34 ]

[Aphelion]

JHS schreef op vrijdag 25 februari 2005 @ 17:27:
[...]
Ja, maar het gaat er juist om dat de gebruiker op een prettige manier kan bepalen wáár de text komt te staan. Dus volgens mij mis je de boodschap .

Inderdaad, de oplossing die postzegel aangeeft had ik ook al gerealiseerd, alleen is het verre weg van gebruiksvriendelijk. Ik gebruik die methode trouwens wel tijdelijk totdat ik onderstaande oplossing van RM-rf onder de knie heb!

RM-rf schreef op vrijdag 25 februari 2005 @ 17:29:
als je wilt dat de gebruiker het element kan verslepen en WYSIWYG aanpassen (bv tekst ingeven, font aanpassen en de fontSize) is dat het best te doen odmv Dhtml...

oftewel, een Form op je pagina bevat alle de door jou gewenste waardes, een input voor posX, posY, fontFamily (waarschijnlijk een SELECT met toegestane fonts, aangezien je natuurlijk wilt dat enkel fonts gekozen worden die ook op de server staan), fontSize, innerText... en al die elementen hebben een 'onChange'-eventhandler, die de waarde van het preview-element aanpast nav de gekozen waarde..

bv:

code:

Een script

Je kunt het positioneringsscript een drag-interface geven waarbij ondrag ook de positionerings-waarde wordt meegegeven aan de inputs voor de positionering ..
bv hiermee:
http://www.walterzorn.de/dragdrop/dragdrop.htm

met CSS kun je gewoon dmv position: absolute ervoor zorgen dat zowel 'preview' alswel 'backgroundImage' een vaste positie hebben op de pagina (left: 0; top: 0; bv) waarbij door middel van de z-index de preview over het achtergrondbeeld valt...

Hoi, dank je wel voor deze voorbeeld code Na zelf ook nog wat meer gegoogled en wat uurtjes er over nagedacht te hebben denk ik inderdaad dat dHTML in dit geval de oplossing is. Het voorbeeld dat je aangeeft met een dHTML dag-interface is inderdaad een hele mooie oplossing!

Ik ga me deze week in ieder geval verdiepen in het drag & drop script en de mogelijkheden die je aan geeft over CSS! Aan iedereen, mijn dank voor het meedenken en ik laat weten tot hoever ik het zal schoppen

[ Voor 33% gewijzigd door Aphelion op 26-02-2005 17:34 ]