如何在fabricjs

Question

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

我还没有在html画布上下文中找到任何东西来实现它。

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

＆＃13;

＆＃13;

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();
      

＆＃13;

<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>

  

＆＃13;

＆＃13;

＆＃13;

这是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>

Answer 2

我遇到的问题是，canvas是在嵌套的DIV中，我在我的root div上使用了.scrollTop来修复问题