javascript - GitGraph-缩放图形的大小

我正在使用GitGraph javascript库-http://gitgraphjs.com/

我目前正在使用示例文件来查看GitGraph中的工作方式。示例文件的链接-https://github.com/nicoespeon/gitgraph.js/blob/develop/examples/index.js

有什么可能的方法来缩放图形？我尝试覆盖CSS样式，但是图形的质量大大降低了。

我期待类似GitGraph.scale选项的东西吗？有空吗？

最佳答案

主项目页面的链接并不容易，但是您正在寻找标题为“定义自己的模板”的部分吗？

编辑：

好吧，在更好地了解了您要查找的内容之后，我自己玩了一下，并注意到canvas元素的width和height属性是added to the DOM programmatically in GitGraph.prototype.render()，它基于一些复杂的数学运算，其中涉及许多来自template对象的值，以及使用scalingFactor派生的window.devicePixelRatio值。

似乎没有一种方法可以在渲染画布之前修改这些值，但是使用提供的graph:render事件，您可以在之后进行。

gitGraph.canvas.addEventListener("graph:render", function(event) {
  console.log(event.data.id, "has been rendered with a scaling factor of", gitGraph.scalingFactor);
  rescale();
}
function rescale() {
  var g = document.getElementById('gitGraph');
  var w = +g.style.width.slice(0,-2) * 0.5;  // < just change these two
  var h = +g.style.height.slice(0,-2) * 0.5; // multipliers to the same
  g.style.width = w + 'px';                  // value
  g.style.height = h + 'px';
};

这是与官方示例代码一起使用的功能（请注意，它确实弄乱了绝对定位的detail div）：

http://codepen.io/phoward8020/pen/ZOpERB

有帮助吗？

（编辑2：内联堆栈溢出示例代码未添加任何值，因为它不可编辑。已替换为CodePen，以便读者可以通过更改乘数来验证功能。）