4

境界の外に出る可能性のある Raphael / SVG アイテムがいくつかあります。私が欲しいのは、SVGを自動ズームして中央に配置して、すべてのコンテンツを表示できるようにすることです。

適切に中央に配置する部分的に機能するコードがいくつかありますが、スケーリングを機能させる方法がわかりません

編集 これは機能するようになりました...しかし、中央揃えではなく、パディングが必要です...

var maxValues =  { x: 0, y: 0 };
var minValues =  { x: 0, y: 0 };

//Find max and min points
paper.forEach(function (el) {
    var bbox = el.getBBox();

    if (bbox.y < minValues.y) minValues.y = bbox.y;
    if (bbox.y2 < minValues.y) minValues.y = bbox.y2;

    if (bbox.y > maxValues.y) maxValues.y = bbox.y;
    if (bbox.y2 > maxValues.y) maxValues.y = bbox.y2;

    if (bbox.x < minValues.x) minValues.x = bbox.x;
    if (bbox.x2 < minValues.x) minValues.x = bbox.x2;

    if (bbox.x > maxValues.x) maxValues.x = bbox.x;
    if (bbox.x2 > maxValues.x) maxValues.x = bbox.x2;
});

var w = maxValues.x - minValues.x;
var h = maxValues.y - minValues.y;

console.log(minValues,maxValues,w,h)

paper.setViewBox(minValues.x, minValues.y, w, h, false);
4

1 に答える 1

1

このコードスニペットを使用して、ほぼフルスクリーンで表示したいすべてのSVGを含むビューボックスを中央に配置しています。

var elmnt = $(viewport);
var wdif = screen.width - width;
var hdif = screen.height - height;
if (wdif < hdif){
    var scale = (screen.width - 50) / width;
var ty = (screen.height - (height * scale)) / 2
var tx = 20;
}else{
var scale = (screen.height - 50) / height;
var tx = (screen.width - (width * scale)) / 2
var ty = 20;
}
elmnt.setAttribute("transform", "scale("+scale+") translate("+tx+","+ty+")");

ビューポートサイズと画面サイズの差をスケールとして使用します。もちろん、すべての要素をビューボックスにラップする必要があります。これがうまくいくことを願っています。さよなら！

編集

私はこのフィドルを作りました.... http：//jsfiddle.net/MakKZ/

元のスニペットでは画面サイズを使用していましたが、フィドルでは、jsfiddleが使用するHTML要素のサイズを使用していることがわかります。画面に描画する円の数（または円のサイズ）に関係なく、常にすべてが表示されます。

于 2012-09-16T15:00:57.797 に答える