ファブリックJを使用してキャンバスに適用されたPHPの画像で、同じ操作（スケールと回転）を行う方法はありますか？

Question

キャンバス&に1つの画像（サイズ変更された画像）を追加しました。キャンバス幅は380ピクセル、高さは217.143ピクセルです。

ケース1）。 Json after Appliedのみスケーリング：

[{"objects":[{"type":"image","originX":"left","originY":"top","left":-39,"top":-62.76,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}] 

ケース2）。 JSON適用されるスケーリング&回転後：

[{"objects":[{"type":"image","originX":"left","originY":"top","left":278.28,"top":-275.14,"width":1000,"height":667,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.83,"scaleY":0.83,"angle":45,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"http:\/\/127.0.0.1\/greatcanvasprints\/web\/media\/designtool\/canvasprints\/single-print\/1813\/small_=_=_=26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_","filters":[],"resizeFilters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":null}] 

私はPHPで、元の画像に同じ操作をしたいと私だけに設計された領域（キャンバス領域）が必要です。以下は、PHPでのいくつかのコードは次のとおりです。

PHPのコードは、最初のケースで罰金workng：適用されている間のみだけ

ケース2のスケーリングと

get Original File 
$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_'); 

Here is width and height (pixels) of resized image which used in canvas 

$inToolUsedFileWidth = 1000; 
$inToolUsedFileHeight = 667; 

here is width & height (pixels) of Original File 

$originalFileWidth = 5760; 
$originalFileHeight = 3840; 

$scaleX = 0.83 
$scaleY = 0.83 

$ratioWidth = ($originalFileWidth/$inToolUsedFileWidth) * (1/$scaleX); 
$ratioHeight = ($originalFileHeight/$inToolUsedFileHeight) * (1/$scaleY); 

380 default canvas width 

$canvasWidth = 380 * $ratioWidth; 

217.143 default canvas height 

$canvasHeight = 217.143 * $ratioHeight; 

same As first json value 

$left = -39; 
$top = -62.76; 

$croppArr = array('x' => (abs($left) * $ratioWidth),'y' => (abs($top) * $ratioHeight),'width' => $canvasWidth,'height' => $canvasHeight); 


$croppedImg = $this->imageCrop($originalImg,$croppArr); 

ワーキングファインスケーリング：適用される回転後

しかし、 Rotationを適用している間は、元の画像を回転させただけです。しかし、キャンバス上にデザインされた正確なデザイン部分は得られません。

$originalImg = imagecreatefromjpeg('26961_1499666667USA91235_1of12_1Panel_8x8_0-_-_-0_test.75_BorderColor_HooksforHanging_Original_1pcs_P_'); 

// Same as second Json angle value 

$antiRotation = (float) -(45); // here anti clockwise rotation in php so prepend nagetive value 
$originalImg = imagerotate($originalImg,$antiRotation,0); 

そしてちょうど秒JSONに従って左&トップの値を変更コード&上方使用します。

キャンバス上にデザインされた正確な出力が得られませんでした。

私は再計算の方法を知りたいです&回転後のオブジェクトの最上部の位置はFabric Jsです。最初のケースでは

：左= -39、トップ= -62.76と第2ケースの角度= 0

：左= 278.28、トップ= -275.14と角度= 45、左側に適用されるロジック

&トップポジション、回転後。

私はPHPで同じことをしたいと思います。

サイズが大きいため、元の画像を添付できません。

Image 1 Image 2

Answer 1

私はあなたが使用しているPHP側ツール見当がつかない。 fabricjsの変換パイプラインの数学を読み、それを複製するだけです。

1）fabricをoriginX、originY 'center'、 'center'に設定します。これにより、ロジックが簡略化されます。

2）一度

4）キャンバスを回転させる）左、中央（上にPHPの移動の正確な中心

3）であろう画像の左、その上部を行っ

5）/2

-height、適切な量

6）-width/2で画像を描画するスケールまたはPHPのツールは、変換行列の使用を許可する場合、ファブリを複製cjsメソッドobject.calcTransformMatrix結果をキャンバスに適用し、画像を-width/2、-height/2で描画します。