缩放Raphael/SVG容器以适应所有内容

Scale Raphael / SVG container to fit all contents

本文关键字：Raphael SVG 缩放      更新时间：2023-09-26

我有许多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);

我使用这段代码将视图框居中，该视图框包含我想在几乎全屏的情况下显示的所有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/

虽然在最初的片段中，我使用了屏幕大小，但在fiddle上，您会看到我使用的是jsfiddle使用的HTML元素的大小。无论你在屏幕上画了多少个圆圈（或圆圈的大小），你总是能看到它们。

相关文章：