Question

我正在做一个允许用户制作幻灯片的应用程序。我正在使用fabricjs让它们添加文本和放大器当前幻灯片上的内容。但我希望他们能够添加新的幻灯片。

所以当我们点击“新幻灯片”按钮时，我需要一种保存和存储当前幻灯片（画布）的方法另一件事是允许用户通过从列中选择它们来编辑上一个画布。

我对html5＆amp; fabricjs所以我真的不知道该怎么做。我已经尝试过使用克隆功能，但没有真正解决，前一个画布的drawImage也是如此。

有什么想法可以帮助我开始这个吗？

我一直在考虑如何存储创建的画布，我想知道arraylists是否是一个好方法。

感谢您的帮助

tl; dr：我想保存一个画布，清除它并稍后恢复它。

Answer 1

您可以使用画布序列化将画布保存为JSON，并在以后需要时还原画布。对于详细的教程this fabricjs article是一个好的开始。

Answer 2

ctx.fillStyle= 'red'
//  draw a rectangle with default settings
     ctx.fillRect(0,0,150,150);
     //  Save the default state
     ctx.save();   



 ctx.fillStyle = '#66FFFF'       
     ctx.fillRect( 15,15,120,120); 
     // Save the current state
    // ctx.save();


 // Restore previous state
     ctx.restore();
     ctx.fillRect(45,45,60,60);

来自http://www.tutorialspoint.com/html5/canvas_states.htm

的示例

帆布节能＆amp;恢复

2 个答案: