ズーム付きファブリック.jsルーラー

Question

質問がありました。 私はthisのようなエディタをコーディングしています。また、ルーラー（マウスのスクロール（ズームインとズームアウト）で値を変更する）を追加します。

私はそれを行うことはできません。私はgithubのすべての定規を試してみましたが、彼らはボディタグだけを実行しています。

残念ながら、ズームインまたはズームアウトするためのドキュメントはありません。

私はHTML5キャンバスで新しく、私は立ち往生しています。あなたのお手伝いを待っています。ありがとう！

Answer 1

3つの別々のキャンバスを1つの方法で使用することができます.1つはメインキャンバスとして、もう1つは上部/左のルーラーにそれぞれ1つです。

/アウトでズームすると、あなたがメインのキャンバス上のズームレベルを設定していますが、手動でルーラーを再描画する必要がありますが、ここでは本当に簡単な例です：

function redrawRulers() { 
    topRuler.clear(); 
    leftRuler.clear(); 
    topRuler.setBackgroundColor('#aaa'); 
    leftRuler.setBackgroundColor('#aaa'); 

    zoomLevel = mainCanvas.getZoom(); 

    for (i = 0; i < 600; i += (10 * zoomLevel)) { 
    var topLine = new fabric.Line([i, 25, i, 50], { 
     stroke: 'black', 
     strokeWidth: 1 
    }); 
    topRuler.add(topLine); 
    var leftLine = new fabric.Line([25, i, 50, i], { 
     stroke: 'black', 
     strokeWidth: 1 
    }); 
    leftRuler.add(leftLine); 
    }} 

Fiddle

UPDATE：

// Numbers 
for (i = 0; i < 600; i += (100 * zoomLevel)) { 
    var text = new fabric.Text((Math.round(i/zoomLevel)).toString(), { 
    left: i, 
    top: 10, 
    fontSize: 8 
    }); 
    topRuler.add(text); 
} 

：支配者のために、ここにトップルーラー上の数字を描画するためにいくつかの非常に 簡単なコードは、（フィドルも更新）です

もちろん、これらの数値をアプリケーションに適した単位に変換する必要があります。また、ズームインしたときに頻繁な間隔で数字を描画し、ズームアウトしたときに数字をより多く配置することを検討することもできます。しかし、私はあなたがここに行くように十分にあなたを与えたと思う。

document.readyに以下のコードを追加すると、これはマウススクロールイベントをキャンバスにバインドするため、マウスホイールを使用するとズームインとズームアウトが発生します。

$(mainCanvas.wrapperEl).on('mousewheel', function(e) { 
    var dir = e.originalEvent.wheelDelta; 
    if (dir > 0){ 
     var ZoomValue = mainCanvas.getZoom() * 1.2;   

    } else { 
     var ZoomValue = mainCanvas.getZoom() * .83333333333333333; 
    } 

    redrawRulers(); 
    mainCanvas.setZoom(ZoomValue, e); 
    e.originalEvent.returnValue = false; 
}); 

Updated Fiddle For Mouse Scroll