我的目标是创建一些代码,以在纸张中心显示(尽可能不显示动画)一组尽可能大的对象。

我目前的尝试是获取一组对象或纸张的边界框并返回尺寸,然后由setViewBox 不幸的是,它只是行不通,我也不知道为什么。

这是我的代码

function GetContainingViewBoxFor(object)
{
var maxValues =  { x: 0, y: 0 };
var minValues =  { x: 0, y: 0 };

//Find max and min points
object.forEach(function (el) {
    if (el.data("background")) return;

    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;
});

//Padding
var padding = 50;
maxValues.x += padding;
minValues.x -= padding;
maxValues.y += padding;
minValues.y -= padding;

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

var cviewBox = {X:minValues.x - paper.width,Y:minValues.y,width:w,height:h};
return cviewBox;
}

它的用法如下:

var containingViewBox = GetContainingViewBoxFor(paper);

paper.setViewBox(containingViewBox.X, containingViewBox.Y, containingViewBox.width, containingViewBox.height, false);

  ask by Chris translate from so

本文未有回复,本站智能推荐:

1回复

使用setViewBox时在SVG/Raphael中创建HUD(缩放不变文本/标签)

我正在创建Raphael Web应用程序,以允许平移和缩放平面图。 这一切都很好,但是我似乎无法找出如何在界面上添加缩放不变的文本(或其他对象)。 用户平移/缩放时,一切都会缩放和移动。 我基本上希望HUD功能可以保持其位置/大小,即使用户平移/缩放也是如此。 我目前使用setView
2回复

Raphael累积与绝对缩放/旋转/平移?

我正在尝试使用Javascript绘制交互式地图,并使用Raphael进行繁重的工作。 地图背景是相当复杂的东西,包含网格,地图元素,标签等。在此之上,我将绘制用户实际使用的内容。 因为背景很复杂,所以我不想在每一帧都重新渲染它。 因此,在绘制完之后,我想重用那些绘制元素,只是在用户平移
6回复

使用raphael.js或其他一些js库缩放和平移svg图像[关闭]

我需要一个小脚本,它将在一个具有2个功能的帧中显示SVG(矢量图像); 可以平移图像(使用光标移动以查看svg图像的不同部分)与谷歌地图相似。 SVG图像也可以放大和缩小到谷歌地图,除了不需要加载新图像,因为图像是矢量。 对于一个类似的脚本,我已经看到与普通图像格式一起工作请参见
1回复

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

我有一些可能超出边界的Raphael / SVG项目。 我想要的是能够自动缩放和居中SVG以显示所有内容。 我有一些部分工作的代码,它适当地集中,我只是无法弄清楚如何使缩放工作 编辑现在可以工作...但不会居中对齐,需要填充...
1回复

如何访问raphael创建的纸张对象?

我正在处理一些系统发育分析的HTML显示。 我创建了一个div,并且有一个名为jsPhyloSVG的可爱的javascript程序包,它在该div中为我绘制了一棵漂亮的树。 该程序包使用raphael进行绘制,但不会返回raphael paper对象。 我想使用raphael在此图像上添加
2回复

用raphael缩放多个路径

我正在尝试使用Raphael在网页中创建类似于此示例的地图工具。 我有一个我想要使用的地图的svg文件,省份都是文件中的单独路径。 但是,如果我将svg文件中的坐标直接复制到raphael路径,则图像太大而无法适应屏幕,因此我需要对其进行缩放。 我知道我可以使用缩放功能单独缩放所有省道
1回复

使用Raphael保留集合中多个项目的缩放比例

我有一组几种形状,每种形状以不同的比例缩放。 当集合转换为使用 形状会重新缩放到其正常大小。 对于以原始大小的不同比例缩放的每个形状,我无法给set.transform提供缩放选项。 如何在transform()期间保留集合中每个项目的缩放比例? 我在代码中的问题: htt
1回复

如何计算SVG变换的旋转/缩放轴坐标(我正在使用Raphael.js)?

我很难理解如何使用Raphael.js计算 SVG变换的旋转/缩放枢轴坐标(例如旋转点)。 简而言之,如果应用诸如image.transform("S1.5R45")之类的变换,则转换将应用于默认的旋转和缩放轴,我不知道如何计算。 举个例子,我把一个小提琴( jsfiddle.net/GV