javascript - 如何在fabricjs中以编程方式导航到特定对象位置

Question

当我在不同位置的 Canvas 上有一堆对象并且我的网页有 Canvas 区域的滚动条时，我有下一个/上一个的导航按钮，这通过调用 canvas.setActiveObject() 使相应的对象处于事件状态，但我需要自动滚动到该特定位置。

我还没有在 html canvas 上下文中找到任何可以实现这一点的内容。

canvas.getContext().moveTo(x, y);逻辑上移动指针，但我需要物理上移动。

function gonext(idx) {
  var objs = fcanvas.getObjects();
  fcanvas.setActiveObject(objs[idx]);
}

var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 50,
  height: 50,
  fill: '#FF454F'  
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
  left: 10,
  top: 1100,
  width: 50,
  height: 50,
  fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();
      

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  <button onclick="gonext(1)">Next</button>
  <div >
      <canvas id="mycanvas" style="border:1px solid black"></canvas>
  </div>

  

这是正在运行的 jsfiddle，单击“NEXT”将使下一个对象处于事件状态，但我还需要向下滚动到该对象

这方面有什么方向吗？

Answer 1

也许您必须调整页面中的偏移量，但简单的 window.scrollTo 对您没有帮助？请尝试下面的可执行代码片段:

function gonext(idx) {
  var objs = fcanvas.getObjects();
  var obj = objs[idx];
  fcanvas.setActiveObject(obj);
  window.scrollTo(0, obj.top);
}

var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  width: 50,
  height: 50,
  fill: '#FF454F'  
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
  left: 10,
  top: 1100,
  width: 50,
  height: 50,
  fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
  <button onclick="gonext(1)">Next</button>
  <div >
      <canvas id="mycanvas" style="border:1px solid black"></canvas>
  </div>