我正在尝试在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 );
},
仅将一个上下文复制到另一个上下文是不起作用的。