У меня есть веб-приложение, которое отображает карты процессов в формате SVG.Я определил три кнопки для увеличения, уменьшения и сброса.URL задается при загрузке страницы.
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, в результате чего полосы прокрутки не появлялись при необходимости.
Martin
Наконец-то я решил это с помощью другого подхода: я получаю высоту внутри xml-файла svg.Высота указана в дюймах, поэтому я умножаю его на 96 точек на дюйм, чтобы получить высоту в пикселях.Затем я делаю ту же процедуру масштабирования, но с абсолютной высотой вместо процентов.
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");
}
Это работает как шарм