fabricjs内の特定のオブジェクト位置にナビゲートする方法

Question

キャンバス上にさまざまな場所に複数のオブジェクトがあり、Webページにキャンバス領域用のスクロールバーがある場合は、next/prev用のナビゲーションボタンがあります。 canvas.setActiveObject（）を呼び出してアクティブにしますが、その特定の場所に自動スクロールする必要があります。

これを達成するために、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> 
 

 

NEXTをクリックして、アクションでjsfiddleで次のオブジェクトをアクティブにしますが、私もそのオブジェクト

にこの1上の任意の方向を下にスクロールする必要があるでしょうか？

Answer 1

あなたのページでオフセットを調整する必要があるかもしれませんが、単純なwindow.scrollToはあなたを助けませんか？ 以下の実行可能抜粋してみてください：、キャンバスは、ネストされたdiv要素の中にあった、私が持っていた

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

問題だったが、私は問題を解決するために、私のルートのdivにuse.scrollTopを行いました