Fabric.js为子类创建临时画布

时间:2018-09-05 21:53:59

标签: javascript canvas fabricjs

我正在尝试在fabric.js中将Text类子类化,并创建一个临时画布,我希望将Text类渲染到该画布上,然后在渲染到_render函数提供的最终上下文之前进行操作。

我遇到的问题是临时画布无法正确呈现(Text._render()在临时画布上正确呈现)。我遇到了各种各样的问题(我已经解决了其中的一些问题),例如原点是图像的中心,但是缺乏对提供给_render的上下文的比例和尺寸以及画布上下文缺乏透明度的理解抓到我。一个问题是由使用支持视网膜的MacBook Pro引起的。

我提供了一个小提琴。

http://jsfiddle.net/qxbwjpg2/2/

如何更改此提琴的范围,以使Text类将呈现到临时画布上,然后可以在我自己的类_render上下文中使用drawImage在织物画布上生成正确的输出?从那里,我应该能够在复制到最终画布之前修改临时画布。

您可以看到它部分起作用,但是渲染的文本放在错误的位置,并且缩放比例完全被破坏。

我看到两个问题:

this.callSuper('_render', octx);

当文本对象在fabric.js画布上缩放时,不会提高分辨率

//this is where it really happens - octx is where the text was written to by original text function
_drawTextEffect: function(octx, ctx) {
  var left = -(octx.width /2) ;
  var top = -(octx.height/2);

  //for now just draw!!
  ctx.drawImage(octx, left ,top,octx.width, octx.height );

},

仅将一个上下文复制到另一个上下文是不起作用的。

0 个答案:

没有答案