RBPDF fabric.js to pdf：回転時の結果が正しくない

Question

RBPDFを使用してjsonデータをpdfに変換しています。 ここでparams[:image]は、クライアントサイドでfabricjs（JSON.stringify()）によって生成されたjsonデータです。

objects = JSON.parse(params[:image]) 
objectid = 0 
defaultasX = 1.0 
defaultasY = 1.0 

@pdf = RBPDF.new() 
@pdf.SetLeftMargin(10) 
@pdf.SetRightMargin(10) 
@pdf.set_header_margin(10) 
@pdf.set_footer_margin(10) 
@pdf.setPrintFooter(false) 
@pdf.add_page() 
objects["state"]["objects"].map { |object| 
    objectid = objectid + 1 ; 
    @pdf.StartTransform() 
    #fit to Screen 
    if(defaultasX == 1 && defaultasX == 1) 
     defaultasX = 200.0/(object["width"] * object["scaleX"]) 
     defaultasY = 130.0/(object["height"] * object["scaleY"]) 
    end 
    left = (object["left"]) * defaultasX 
    top = (object["top"]) * defaultasY 
    width = object["width"] * object["scaleX"] * defaultasX 
    height = object["height"] * object["scaleY"] * defaultasY 

    if object["type"] == 'i-text' 
    @pdf.set_xy(left,top) 
    @pdf.SetFontSize(5) 
    @pdf.MultiCell(width, height, object["text"]) 
    puts "printing text at (" + left.to_s+ ' ' + top.to_s + ' ' + width.to_s+ ' ' + height.to_s + ')' 
    elsif object["type"] == 'image' 
    @pdf.set_xy(left, top) 
    @pdf.Rotate(360 - object["angle"]) 

    dataURI = object["src"] 
    extension = dataURI.split(',')[0].split(':')[1].split(';')[0].split('/')[1] 
    byteString = dataURI.split(',')[1] 
    filename = "#{Rails.root}/public/uploads/tmpimg"+ objectid.to_s() + "." + extension 
    imagefiletmp = Base64.decode64(byteString) 

     File.open(filename, 'wb') do |f| 
     f.write(imagefiletmp) 
     end 
    @pdf.Image(filename , left, top, width, height) 
    @pdf.Rect(left-5, top-5, 10, 10) 
    end 
    @pdf.StopTransform() 
} 
@pdf.output('./public/uploads/abc.pdf','F') 

正しい結果を出すすべてのものが回転すると長いものになります。

これは、クライアント側の画像部分

は、このPDFの画像部分

は、なぜこれが起こったされていますか？

Answer 1

Fabricjs変換パイプラインが異なります。 x、yを設定してオブジェクトを回転することはできません。スケールでは事がさらに複雑になります。

@pdf.Image(filename , -width/2, -height/2, width, height); 

これは行う必要があります。fabricJsで がoriginXおよびoriginYは、 '中央' すると

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; 

PDF時間あるときに設定して働く：

は、それが簡単に私はあなたを示唆しているようにするにはより簡単に回転で作業できます。あなたが適用できるかどうか、PDF時間であるとき、そして、

var objToObj = fabric.Object.prototype.toObject; 

fabric.Object.prototype.toObject = function(propToInclude) { 
    var normalToObj = objToObj.call(this, propToInclude); 
    normalToObj.transformation = this.calcTransformMatrix(); 
    return normalToObj; 
}; 

：

場合、あなたはまた、あなたが出力するオブジェクトの完全な変換をファブリックtoObjectメソッドをオーバーライドすることを良いだろう、スケールを使用して、スキュー-widht/2、-height/2からwidth、heightにオブジェクト（any）を描画します。