RBPDF fabric.js到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然后旋转对象。随着规模变得更加复杂。

为了方便起见，我建议您： 在fabricJs中使用originX和originY设置为'center'

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

然后什么时候是pdf时间：

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

这应该使旋转更容易。

如果你还使用了scale和skew，那么覆盖fabric toObject方法以输出对象的完整转换会更好：

var objToObj = fabric.Object.prototype.toObject;

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

然后当是pdf时间时，看看你是否可以应用泛型变换（转换属性），然后从-widht / 2，-height / 2到宽度，高度绘制对象（任意）。