ugrás a tartalomhoz

Javascript-php képszerkesztő, betűtípus scale algoritmus

Tanul0 · 2012. Már. 5. (H), 09.17
Üdvözletem!

Jelenleg egy javascript alapú egyszerű képszerkesztőt készítek, és a következő hibába botlottam.

A kép amelyet le kell generálni, az 9,4x5,4cm 300dpi felbontású, azaz 1110x638px. A szerkesztő felületem egyelőre 555x319px, de ez majd méretezhető lesz aránytartással.

Mivel a szerkesztő felület kisebb mint maga a készítendő kép, ezért a pozíciókat arányosan növelem. Az arányt úgy kapom meg, hogy a generálandó kép szélessége osztva a szerkesztő szélességével.

Kép esetén mint jól működik, viszont a betűtípusok nem lineárisan növekednek tehát ha 10px-es betűmérettel szerkesztek, akkor az a jelenlegi arányoknál 20px-es betűméretet jelentene. Ez a hiba, csak akkor jön elő, ha két szövegréteget jobb oldalra egy függőleges síkra helyezem rá.

Kerestem a betűtípusok scale algoritmusát, de sajnos nem jártam sikerrel. Már-már tehetetlen vagyok, a legújabb ötletem, hogy legyártok saját betűtípusokat amelyek mérete lineárisan nő/csökken, de ez túl körülményesnek bizonyul számomra. Nem megoldást várok, hanem a több szem többet lát elvén kérnék gontolatbeli segítséget.

A szerkesztő itt megtekinthető: http://gabesz.org/nv/ (A szövegmezők drag&drop-al mozgatgatóak)

Előre is köszönöm!
‹ Alternatív fileok. file_exists Kereső egyszerűbben? ›
 ■
1

transform:scale(...)

T.G · 2012. Már. 5. (H), 10.31
Nem lenne egyszerűbb, ha a kicsinyítést egy az egyben CSS-ből oldanád meg?
2

Ezt nem igazán értem, ha

Tanul0 · 2012. Már. 5. (H), 10.46
Ezt nem igazán értem, ha kicsit bővebben kifejtenéd, de egyébként, nagyítanom kell a szerkesztő felülethez képest, jelen eseben mindent a 2x-re de sajnos a 10-es betűméretnek nem a 20-as a kétszerese, mert nem lineárisan nő a betű által bezárt téglalap területe.
4

Kliens oldalon módosítsál

T.G · 2012. Már. 5. (H), 11.15
Szerintem egyszerűbb, ha nem szerver oldalon nagyítasz, hanem kliens oldalon kicsinyítesz. (Későbbi ficsör: nagy monitoron lehet nézni 1-1 arányban)

Tehát, a szerkesztő panelre engeded rá a transform scale-t, majd onnan a szerver oldalnak valódi pozíciókat adsz át, és nem kell szerver oldalon semmit sem változtatni.

Ha 20-as betűméretet használsz egy olyan elemen, amelyet scale-lel felére nyomsz össze, akkor az pont a fele lesz, nem pedig mintha scale nélküli 10-es. (tehát ezzel az eredeti gondod kilőve)
6

IE8-ig működnie kell a

Tanul0 · 2012. Már. 5. (H), 11.26
IE8-ig működnie kell a szerkesztőnek, mingyárt utána nézek, hogy támogatja-e és megpróbálom.
8

zoom

T.G · 2012. Már. 5. (H), 11.41
IE alatt van zoom... bár a két property sajnos nem ugyanúgy működik. a pozíciókat másként kell számolni... ja és figyelni kell arra is, hogy Chrome meg mindkettőt használja, azaz ismeri a transformot is, meg a zoom-ot is...
És, ha még hozzáadjuk, amit Poetro írt, hogy így is át kell számolni a betűméretet, akkor... mindegy, egy kísérletet mindenképpen megér. :)
9

Ez valóban megoldja a

Tanul0 · 2012. Már. 5. (H), 12.09
Ez valóban megoldja a problémát, így tökéletes. IE8-alatt
filter: progid:DXImageTransform.Microsoft.Matrix()-ot próbálgatom, majd kiderül
13

IE alatt még nem sikerült

Tanul0 · 2012. Már. 5. (H), 16.17
IE alatt még nem sikerült működésre bírni, a zoom sajnos nem opció, mert lehal a draggable is.

Ezzel a megoldással, annyi problémám lenne még, hogy így bele kéne túrnom a draggable-be is, hogy az egér pozíciója*2 legyen a box offset-je. Bár hozzáteszem, hogy így tökéletes a pozícionálás.
3

dpi

Poetro · 2012. Már. 5. (H), 11.13
Azt ugye tudod, hogy a web az 72 dpi-n működik általában, míg a PHP szövegkezelő függvényei 96dpi-n? Egyszerűen csak mérd le a betűket. Ráadásul PHP-ban nem is pixelben adod meg a méretet, hanem pontban. Már ha a GD2 függvényeket használod. És ekkor ugye át kell alakítanod a pontokat pixelre. Csak nyugodtan mérd meg, hány pixel magas egy 20 pontos szöveg, és mekkora egy 40 pontos.
5

Nem GD library-t használok,

Tanul0 · 2012. Már. 5. (H), 11.25
Nem GD library-t használok, hanem Imagick-et amely pixelben kéri a betűméretet.
7

Biztos?

Poetro · 2012. Már. 5. (H), 11.32
Ebben biztos vagy? Mert az ImageMagick dokumentációja is pontokról ír.
10

Tisztában vagyok vele, hogy

Tanul0 · 2012. Már. 5. (H), 12.10
Tisztában vagyok vele, hogy pontot ír, de a php függvénye mégis pixelt használ pedig még a php oldalán is pontot ír. A dpi nem befolyásoló tényező.

http://www.php.net/manual/en/imagickdraw.setfontsize.php
11

Nekem nem

Poetro · 2012. Már. 5. (H), 12.32
Nekem nem pixelt használ. Már csak azért is lenne furcsa, ha pixelt használna, mivel eleve az ImageMagick, amit a kiegészítő használ, eleve pontokat használ. Ki is próbáltam a saját gépemen. 40 pontos betű esetén a beépített 96dpi esetén pont 30 pixeles betűt kaptam.
<?php
$im = new Imagick();
$im->newImage(200, 200, new ImagickPixel('white'));
$im->setImageFormat("png");
$draw=new ImagickDraw();
$draw->setFontSize(40);
$draw->setFont('arial.ttf');
$draw->setFillColor('black');
$im->annotateImage($draw,50,50,0,'Damn, I\'m good');
file_put_contents('rose.png', $im->getimageblob());
?>
12

Ebben a részében valóban

Tanul0 · 2012. Már. 5. (H), 13.23
Ebben a részében valóban igazad volt

$ratio=96/72;
$fontsize=$fontsize*$ratio;
14

Nos, sikerült rávenni az

Tanul0 · 2012. Már. 7. (Sze), 10.26
Nos, sikerült rávenni az IE8-at is a kicsinyítésre DX.matrix-al. Egy probléma van, hogy ocsmány a betű a kicsinyítés miatt, dehát aki IE8-at használ "az meg is érdemli" :P

Több egyéb probléma is felmerült, pl a jquery.ui által nyújtott droppable függvénybe bele kellett túrni böngésző specifikusan, valamint PHP oldalon is böngészőnként más-más feldolgozás szükséges.

Amit észrevettem még, és szeretnék megoldást találni, hogy a span-on belüli térköz minden böngészőben más betűmérettől függően. Erre tud valaki valamilyen megoldást, számítást, irányzatot, css tulajdonságot amivel ezt ki tudnám küszöbölni.

Addig is a javított változat itt van: http://gabesz.org/nv

ELőre is köszönöm!
15

spacing?

T.G · 2012. Már. 7. (Sze), 10.41
A word-spacing, illetve a letter-spacing felülírása nem oldja ezt meg?
16

Sajnos nem, mert nem a

Tanul0 · 2012. Már. 7. (Sze), 11.42
Sajnos nem, mert nem a vízszintes pozíció csúszik, hanem a függőleges
17

A függőleges pozícionálás már

Tanul0 · 2012. Már. 9. (P), 11.15
A függőleges pozícionálás már megy, a problémát a

 $draw->setGravity(imagick::GRAVITY_NORTHWEST);
megoldotta.

Most jelenleg a forgatással szívok, jó kis vektorgeometria.

Elvileg a boxok új szélességét így kapom meg:

        if($angle>=0){
		$radial=pi()*$angle/180;
	}else{
		$radial=pi()*($angle+360)/180;
	}
	$cosi=cos($radial);
	$sinu=sin($radial);

	$newwidth=abs($cosi*$box['width']) + abs($sinu*$box['height']);

	$newheight=abs($cosi*$box['height']) + abs($sinu*$box['width']);
Az függőleges tengelyen való mozgatást firefoxban így tudom korrigálni

if($angle>0){
        $y+=($box['height']-$newheight+$hdiff)/2;
}else{
        $y-=($box['height']-$newheight)/2-$hdiff;
}
A $hdiff változóm a html elem magasságából kivont php által generált bounding box magassága ami csak pár pixel.

A vízszintes korrigációnál már problémáim vannak, mert nem mindegy, hogy hány fokkal forgatom

$x+=($box['width']-$newwidth);
Lehet én nem vágom a vektor geometriát, de igazából akkor van gondom amikor a boxom bal alsó sarka negatív kordinát kap, a jobb oldal valamelyik vagy mindkettő sarka pozitív kordinátát kap vagy fordítva. Erre szeretnék megoldást találni, ha valaki csinált már hasonlót, vagy esetleg van valami jó ötlete akkor szivesen várom a tanácsait.

Továbbra is itt található http://gabesz.org/nv