1

プロジェクトの 1 つで fabric.js を使用しています。ズーム機能を使用しています。クリックですべてのキャンバス (すべての要素を含む) を拡大する簡単な方法があるかどうかを知りたいです。

4

2 に答える 2

4

ボタンのズーム onclick を示すこの jsfiddle を試してみてください: http://jsfiddle.net/cmontgomery/H7Utw/1/。本質的に、キャンバス上のすべてのオブジェクトを取得し、それらを同じ倍率でスケーリング/移動して、ズームの視覚的外観を与えます。

var objects = canvas.getObjects();
for (var i in objects) {
    var scaleX = objects[i].scaleX;
    var scaleY = objects[i].scaleY;
    var left = objects[i].left;
    var top = objects[i].top;

    var tempScaleX = scaleX * SCALE_FACTOR;
    var tempScaleY = scaleY * SCALE_FACTOR;
    var tempLeft = left * SCALE_FACTOR;
    var tempTop = top * SCALE_FACTOR;

    objects[i].scaleX = tempScaleX;
    objects[i].scaleY = tempScaleY;
    objects[i].left = tempLeft;
    objects[i].top = tempTop;

    objects[i].setCoords();
}

canvas.renderAll();
于 2012-11-15T14:46:37.663 に答える
0

すべてのオブジェクトを変更せずに fabricjs でズームを使用する場合は、https ://github.com/wojtek-krysiak/fabricjs-viewport を使用します。

例: http://wojtek-krysiak.github.io/fabricjs-viewport/

于 2014-07-03T11:54:43.897 に答える