如何在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中以編程方式導航到特定對象位置

回答

相關問題