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

当我在不同位置的画布上有一堆对象，并且我的网页上有用于画布区域的滚动条时，我有导航按钮用于next/prev，它使相应的对象为通过调用canvas.setActiveObject（）来激活，但我需要自动滚动到特定位置。如何在fabricjs中以编程方式导航到特定对象位置

我还没有发现什么在HTML画布上下文来实现这一目标。

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将下一个对象活跃，但我还需要向下滚动到该对象

在这一个任何方向？

来源

2016-12-15 Kiran

这里是jsfiddle的行动，点击NEXT将使下一个对象活跃，但我也需要向下滚动到该对象 – Kiran

https://jsfiddle.net/hiitskiran/hamLh0f5/14/ – Kiran

也许你必须调整页面中的偏移量，但是一个简单的window.scrollTo doens't帮助你？请尝试以下可执行的代码片段：

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>

来源

2016-12-15 20:49:56 InferOn

window.scrollTo（）是我尝试的第一件事，网页就像一个小部件，每块哈哈它的DIV与滚动条。 – Kiran

对，我想帮助你，但我需要更多的上下文，对不起 – InferOn

我甚至试图设置.scrollTop div围绕画布上，但没有帮助 – Kiran

我的问题是，画布是一个嵌套的DIV里面，我做我的根格use.scrollTop来解决该问题

来源

2016-12-16 15:35:34 Kiran

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

回答

相关问题