javascript - GitGraph - 缩放图表的大小

Question

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

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

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

我期待类似 GitGraph.scale 选项的东西？可以用吗？

Answer 1

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

编辑:

好的，为了更好地理解您要查找的内容，我自己尝试了一下，发现 Canvas 元素的 width 和 height 属性是 added to the DOM programmatically in GitGraph.prototype.render() ，基于一些中等复杂的数学，涉及来自 template 对象的一堆值，以及使用 window.devicePixelRatio 派生的 scalingFactor 值。

在渲染 Canvas 之前似乎没有办法修改这些值，但是使用提供的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:内联堆栈溢出示例代码没有添加任何回答值(value)，因为它不可编辑。已替换为 CodePen，以便读者可以通过更改乘数值来验证功能。)