Javascript Chrome中启用的硬件加速功能可防止画布使用Fabricjs显示矢量图像

我有一个使用Fabricjs的应用程序，允许用户在画布上绘制。他们在画布上画出自己的名字，然后单击保存。我在画布上调用toSVG，获取svg字符串并将其存储在数据库中

用户随后可以将该SVG字符串添加到新画布中，我称之为

fabric.loadSVGFromString(svg_string, function(objects, options) {
    var group = new fabric.PathGroup(objects, options);
    canvas.add(group);
    canvas.calcOffset();
    canvas.renderAll();
    group.setCoords();
});

这样就可以将svg图像添加到画布中，类型为“path group”

现在，当用户单击“保存”时，我调用var my_string=canvas.toObject。然后我将该json字符串提交到我的服务器，并用json.stringifymy_字符串保存它

SVG现在转换为JSON，我将整个JSON字符串存储在数据库中

我允许用户返回并再次编辑画布图像。我用

var json = my_string;
var serialized = (typeof json === 'string') ? JSON.parse(json) : json;
canvas.loadFromJSON(serialized, function(){
    canvas.renderAll.bind(canvas);
});

直到大约一个月前，这在Chrome中还可以正常工作。它仍然可以很好地加载图像和文本，甚至可以在画布上添加一个“路径组”对象。但是，不显示路径组

它将在Safari、Firefox和IE中显示良好

我使用的是Fabric 1.4.9，现在我升级到1.5.0只是为了看看它是否能解决这个问题，然后我升级到1.6.0.rc1。它在Chrome中仍然不起作用，但在Safari和Firefox中也能起作用

因此，它将读取和解析SVG，并将其转换为JSON，然后将其添加到画布中，但当从JSON字符串添加它时，它会阻塞

正如阿斯图鲁尔指出的那样。如果您在Chrome设置中禁用硬件加速，这将在Chrome中再次起作用

这是一个

在Chrome中打开该链接，您将看到它不会显示。在Safari或Firefox中打开它，您将看到Travis。如果在Chrome中禁用硬件加速，它将按预期工作

更新： 我知道这在我的一些用户的计算机上是一个bug，但值得一提的是，这里是chrome://gpu.

---

结果发现Chrome如何在strokeDashArray中测试空值存在问题

在我的每个路径对象上，我都有这样的strokeDashArray

"strokeDashArray": [null, null ]

将其更改为此解决了问题

"strokeDashArray": null

或者是这个

"strokeDashArray": [1, 0 ]
// this is not recommended as it *could* hurt performance for no reason.

我仍然向Chromium团队提交了一张罚单，我看到他们发现了问题并修复了它。所以在chrome的未来版本中，当用户启用硬件加速时，[null，null]应该可以正常工作。这在将来可能并不重要，但我想也许有一天谷歌搜索者会找到这个问题/答案，这会对他们有所帮助

"strokeDashArray": [1, 0 ]
// this is not recommended as it *could* hurt performance for no reason.