如何在Processing中为画布制作滚动条

Question

我正在使用Processing进行数据可视化。我无法在画布上放置所有需要的内容，因此我不想增加画布大小，而是使用滚动条向下滚动屏幕（画布）。我需要编码帮助，因为我之前从未编写过滚动条编码。所有帮助将不胜感激。谢谢！

甘露

Answer 1

通过将画布放在固定大小的div中，让网页为您完成工作。

<div style="width: 400px; height: 400px; overflow: auto;">
  <canvas id="mycanvas" data-processing-sources="mysketch.pde file2.pde ...">
  </canvas>
</div>

如果您使用的大小（）大于400x400

，网页现在会自动为您提供画布滚动条

Answer 2

如果你想在草图中完全这样做，我认为你需要translate(x, y)功能。要按x像素向上滚动，请使用代码translate(0, -x);。这只适用于调用该函数后绘制的。请参阅我上面给出的链接，了解其行为。 （http://processing.org/ reference/ translate_.html）。

自动制作滚动条以便可以拖动滚动条很难。考虑鼠标滚轮或上下按钮而非条形。一个不能被拖动但可以看到位置并使用上下按钮移动的条形图是一个很好的折衷方案，即使它是一个奇怪的UI。