Масштабирование отображаемого изображения в asp с помощью ButtonClick - PullRequest
0 голосов
/ 24 марта 2019

У меня есть веб-приложение, которое отображает карты процессов в формате 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");
    }

Это работает как шарм

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...