Last active
June 22, 2018 22:04
-
-
Save ashbeats/9ba9f8107a5786031efcfe634c9fe5c4 to your computer and use it in GitHub Desktop.
// wrote this to create templates faster using psd's as guides.// this class helps me to convert psd css into imagik style positioning values// supports angle, top(y), left(x), fontsize (takes lineheight into consideration and adds the needed padding to the top)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Created by PhpStorm. | |
* User: Ash64bit | |
* Date: 29-Jul-16 | |
* Time: 9:38 PM | |
*/ | |
namespace App\CustomLibs\JohnChristos\Vidx; | |
// wrote this to create templates faster using psd's as guides. | |
// this class helps me to convert psd css into imagik style positioning values | |
// supports angle, top(y), left(x), fontsize (takes lineheight into consideration and adds the needed padding to the top) | |
class Css2ImagikConverter | |
{ | |
private $css_from_photoshop_layer; // right-click on layer and copy css. in photoshop. | |
function __construct($css){ $this->set_css($css); } | |
private function set_css($css) { $this->css_from_photoshop_layer = $css; } | |
function __toString() | |
{ | |
return json_encode([ | |
'angle' => $this->angle(), | |
'font_size' => $this->fontsize(), | |
'line_height' => $this->get_lineheight(), | |
'left' => $this->get_left_offset(), | |
'top' => $this->get_top_offset(), | |
'text_top_padding' => $this->get_text_padding_top() | |
]); | |
} | |
function x() | |
{ | |
return $this->get_left_offset(); | |
} | |
function y() | |
{ | |
return $this->get_top_offset() + $this->get_text_padding_top(); | |
} | |
function angle($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
// converting CSS to Imagik compatible values to position layers/text. | |
// # ref: https://css-tricks.com/get-value-of-css-rotation-through-javascript/ | |
if (preg_match('/-moz-transform: matrix\(([^,]+),([^,]+)/m', $css, $regs)) { | |
// extract only digits, periods and negative symbols. | |
$a = $x['matrix']['a'] = preg_replace('/[^\d\.-]/m', '', $regs[1]); | |
$b = $x['matrix']['b'] = preg_replace('/[^\d\.-]/m', '', $regs[2]); | |
// Convert this into degrees for Imagick | |
return $angle_of_rotation = abs(round(atan2($b, $a) * (180 / pi()))); | |
} | |
return 0; // no rotation. | |
} | |
function fontsize($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
if (preg_match('/font-size:([\s\d]+)px;/m', $css, $regs)) { | |
return $font_size = preg_replace('/[^\d]/m', '', $regs[1]); | |
} | |
return 0; | |
// throw new \Exception("Fontsize missing -> that's the whole purpose of this class, right? Copy the right CSS"); | |
} | |
private function get_top_offset($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
if (preg_match('/(?<=top: )[\d\.]+/m', $css, $regs)) { | |
return $top = $regs[0]; | |
} | |
return 0; | |
} | |
// phostoshop uses Unitless Line Heights. So we can calulate the real padding for each line of text. | |
private function get_text_padding_top($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
$font_size = $this->fontsize($css); | |
if ($font_size == 0) return 0; | |
$lineHeight = $this->get_lineheight($css); | |
return $font_size / 2 * $lineHeight; | |
} | |
private function get_left_offset($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
if (preg_match('/(?<=left: )[\d\.]+/m', $css, $regs)) { | |
return $left = $regs[0]; | |
} | |
return 0; | |
} | |
private function get_lineheight($css = null) | |
{ | |
$css = $css ?? $this->css_from_photoshop_layer; | |
if (preg_match('/(?<=line-height: )[\d\.]+/m', $css, $regs)) { | |
return $line_height = $regs[0]; | |
} | |
return 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment