Question

我有一个Web应用程序，它以svg格式显示流程图。我定义了三个按钮用于放大，缩小和重置。该网址是在页面加载时设置的。

Graph.ImageUrl = "/maps/" + Request.QueryString["link"];
Zoom.Text = "100";

我想使用百分比控制css属性宽度的放大和缩小并将因子保存在标签中

    protected void ZoomIn(object sender, EventArgs e)
    {
        int ZM = Convert.ToInt32(Zoom.Text);
        Zoom.Text = Convert.ToString(Convert.ToInt32(ZM * 1.2));
        Graph.Style.Add("width", Zoom.Text + "%");
        Graph.Style.Add("height", Zoom.Text + "%");
    }

    public void ZoomOut(object sender, EventArgs e)
    {
        int ZM = Convert.ToInt32(Zoom.Text);
        Zoom.Text = Convert.ToString(Convert.ToInt32(ZM / 1.2));
        Graph.Style.Add("width", Zoom.Text + "%");
        Graph.Style.Add("height", Zoom.Text + "%");
    }

    public void ZoomReset(object sender, EventArgs e)
    {
        Zoom.Text = "100";
        Graph.Style.Add("width", "Auto");
        Graph.Style.Add("height", "Auto");
    }

包含在div中的图像的标记为：

<div id="DisplayMap" runat="server">
   <asp:image runat="server" id="Graph" CssClass="map"/>
</div>

.map {
vertical-align: top;
text-align:left;
overflow:auto;
}

这适用于不超过框架尺寸的图像。我现在了解到，高度的100％是屏幕上的最大可用高度，而不是图像的高度。因此，我的第一次放大点击将非常大的图像缩小到总高度的20％，而不是总高度的80％。

关于如何处理此问题的任何建议？

我的第一种方法是使用JavaScript作为比例尺-函数可以更准确地实现我想要的功能，但是后来我无法实现DIV的重新绑定，结果是滚动条在需要时不会出现。

马丁

最后，我用另一种方法解决了它：从svg xml文件中获取高度。高度以英寸为单位，因此我乘以96 dpi以得到像素高度。然后，我执行相同的缩放例程，但使用绝对高度而不是pecentage。

Page_Load:
var data = File.ReadAllText(Server.MapPath(@"~/maps/" + Request.QueryString["link"]));
string document = data.ToString();
int length = document.Length;
int WidthStartIndex = document.IndexOf(@"width");
int WidthEndIndex = document.Substring(WidthStartIndex + 8, length - WidthStartIndex - 20).IndexOf(@"""");
string width = document.Substring(WidthStartIndex + 7, WidthEndIndex + 1);
Zoom.Text = "100";
if (width.Contains("in"))
    {
        Zoom.Text = Convert.ToString(Convert.ToInt32(Convert.ToDouble(width.Replace(".", ",").Replace("in", "")) * 96.0));
    }
SVGWidth.Text = Zoom.Text;
Graph.ImageUrl = "/maps/" + Request.QueryString["link"];

    protected void ZoomIn(object sender, EventArgs e)
    {
        int ZM = Convert.ToInt32(Zoom.Text);
        Zoom.Text = Convert.ToString(Convert.ToInt32(ZM * 1.2));
        Graph.Style.Add("width", Zoom.Text);
        Graph.Style.Add("height", "Auto");
    }

    public void ZoomReset(object sender, EventArgs e)
    {
        Zoom.Text = SVGWidth.Text;
        Graph.Style.Add("width", SVGWidth.Text);
        Graph.Style.Add("height", "Auto");
    }

这就像魔咒一样

通过ButtonClick缩放asp中显示的图像

0 个答案: