Страницы

Поиск по вопросам

Показаны сообщения с ярлыком resize. Показать все сообщения
Показаны сообщения с ярлыком resize. Показать все сообщения

воскресенье, 8 марта 2020 г.

Маcштабирование c# wpf

#c_sharp #wpf #resize

Доброго времени суток.
Разрабатывал приложение на мониторе 4:3 и сейчас купил 16:9.
На 4:3 оно почти во весь экран а на 16:9 ничего не видно почти. Как бороться с этим?

Хотелось бы реализовать режим во все окно. Но опять же элементы остаются на местах
растягивается только окно. Как увеличить их и оставить в том же месте?

Когда очень много вот кусок, может если его доделать то и все остальное по принципу
сделаю


        
            
                
                    
                        
                            
                                
                                
                            
                        
                    
                    

                    
                    


Ответы

Ответ 1



Всё плохо. Вы не пользуетесь layout management'ом, а располагаете элементы при помощи вручную жёстко заданных маргинов. Неудивительно, что ваш UI не скалируется — а что ж вы хотели? Ваш код делает ровно то, что вы ему сказали. Для вашего случая должно быть что-то такое:

воскресенье, 26 января 2020 г.

Динамическая ширина изображения в слайдере (CSS)

#css #slider #resize

Не могу сделать динамическую ширину изображений в слайдере веб сайта (HTML + CSS
+ JS). При открытии окна браузера ширина первого слайда на всю ширину окна (как и надо),
но если растянуть/развернуть окно браузера, ширина изображения не меняется и последующие
слайды идут с такой шириной, какая была при первоначальном открытии страницы в браузере.
Пробовал width 100%, auto, inherit делал разные вариации object-fit, но результата
это не пренесло.
Буде благодарен за помощь.



#slider {
  width: 100%;    
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  position: relative;
  display: block;
  margin: 0px auto;
  overflow: hidden;   
  border-radius: 3px;
}
#slider1 {
  width: 100%;        
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  position: absolute;
  display: block;
}
.slider_items {
  width: 100%;
  max-width: 1920px;
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
}
.slider_info {
  width: 100%;
  height: 70px;
  display: inline-block;
  bottom: 90px;
  position: relative;
  background: rgba(104,204,204,.3);
  z-index: 99;
}

.slider_img {
  width: inherit;
  max-width: 1920px; 
  height: -moz-calc(100vh - 100px);
  height: -webkit-calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
}

Slide1 title

This is the description for slide1 Learn more

Slide2 title

This is the description for slide2 Learn more


Ответы

Ответ 1



FlexSlider тебе в помощь, он изначально адаптивный HTML:
JS: $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); });

Ответ 2



window.onresize = function(){ location.reload();} и в CSS width:100%,если я вас правильно понял

Изменение размера большого jpeg файла

#delphi #jpeg #resize

Нужно изменить размер большого jpeg-файла (экспериментирую с файлом 18000x7000),
как это делается без отжирания всей памяти? я шерстил инет и пишут, что библиотеки
типа nativejpg и подобные умеют это, но у меня все равно съедается куча памяти и в
итоге ошибка типа 


  Out of memory


Или 


  Not enough storage is available to process this command


Вроде как-то можно построчно или поблочно, но не нашел вразумительных примеров.
    


Ответы

Ответ 1



Вроде как-то можно построчно или поблочно, но не нашел вразумительных примеров. Называется это проецирование части файла в память, File Mapping. Хоть терабайты так читайте) Но придется работать самостоятельно с самим форматом файла.

суббота, 11 января 2020 г.

resize и разрешение браузера

#javascript #if #resize

Не могу понять в чем проблема с работой кода. Все работает отлично, пока я не сменю
на iPad (в принципе любой планшет) разрешение, то есть не покручу экраном.

$(window).resize(function(){
  if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) {
    $(".navItem a").click(function(){
      $("#nav1").slideUp();
    });
  }
});


Получается, что код отлично обрабатывается, если я держу вертикально планшет, заходит
в блок IF в консоле выводил разрешение, отлично его получает, но стоит мне перевернуть
планшет в горизонтальную ориентацию, у нас получается 1024px разрешение, и код все
равно обрабатывается. Тем самым скрывает мне блок навигации, и я больше не смогу нажать
на кнопки меню. 

Коротко о самой сути кода. У меня есть меню сайта, которое для компов горизонтальное
вверху, а для мобильных скрывается за иконкой "гамбургера". Нажав на которую оно вертикально
выползает вниз. У меня концепция сайта одностраничника, поэтому ссылки якорные, и нету
рефреша сайта. Идет плавная прокрутка к якорю, но он закрыт весь этим выдвенутым меню.
Вот поэтому его надо скрыть после нажатия на ссылку. Этот код что ниже, скрывает, но
почему то он срабатывает и тогда, когда не должен сработать. Ведь если его запустить
сразу на компе, он в блок IF не пускает. Если с горизонтального режима планшета запустить
его тоже все ок, если перевернуть в портретный, тоже все работает на ура, он видит
уменьшение разрешения и заходит в блок IF. Но обратно после горизонтального в портретный
начинает фигней страдать. Перестает обрабатывать IF а просто всегда работает хоть и
условие не подходит.
    


Ответы

Ответ 1



Добро пожаловать на StackOverflow. Вы назначаете обработчик click внутри обработчика resize. Как только Ваш if выполнится больше одного раза, click будет вызывать все добавленные функции - столько раз, сколько они были добавлены. А, ну и когда if не выполняется, уже добавленный обработчик (или обработчики) click все равно будут выстреливать. $(window).resize(function(){ $(".navItem a").off("click"); if( ... ) { $(".navItem a").click(function(){ $("#nav1").slideUp(); }); } }); Вот еще такая мысль, может быть Вам подойдет. Не лучше ли будет развернуть логику: $(".navItem a").click(function(){ if(window.matchMedia && window.matchMedia("(min-width:320px) and (max-width:978px)").matches) { $("#nav1").slideUp(); } }); Тогда обработчик resize вообще не нужен.

Перерисовка окна при изменении его размера

#cpp #winapi #directx #resize

Только начал изучать DirectX и WinAPI. Написал простейшую программу: создаёт квадрат
на всё окно и "раскрашивает" его шейдером. Но при уменьшении размера окна изображение
сжимается, а при увеличении - растягивается. Как сделать, чтобы этого не происходило,
т.е. при уменьшении, например, изображение не сжималось, а просто показывалась его
меньшая область.
Пробывал сделать это так:

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    // ...

    switch (message)
    {
        // ...

        case WM_SIZE:
            D3D11_VIEWPORT vp;
            vp.Width = (FLOAT)LOWORD(lParam);
            vp.Height = (FLOAT)HIWORD(lParam);
            vp.MinDepth = 0.0f;
            vp.MaxDepth = 1.0f;
            vp.TopLeftX = 0;
            vp.TopLeftY = 0;
            if (g_pImmediateContext)
                g_pImmediateContext->RSSetViewports(1, &vp);
        break;

        // ...
    }

    return 0;
}


Думал, сработает, но получил странное поведение: при уменьшении размера окна изображение
ещё сильнее уменьшается, а при увеличении остаётся неизменным. Как реализовать описанное
ранее поведение правильно?
    


Ответы

Ответ 1



Вне зависимости от фактических размеров окна его DirectX-ная система координат всегда будет описывать прямоугольник (0, 0)-(1, 1) (DX10) или (-1, -1)-(1, 1) (DX9). Для этого DirectX будет специально масштабировать (а в DX9 ещё и перемещать) координаты на кадровом буфере. Соответственно, ваша задача заключается в применении матрицы трансформации, которая отменяла бы подобный эффект, «сжимая» обе координаты прямо пропорционально габаритам окна. Причём эта матрица должна применяться после применения всех остальных матриц, если они есть. Для DirectX 11 (упомянутого в вопросе) матрица будет иметь следующий вид: где: α — масштабный коэффициент, указывающий, сколько пикселей должно приходиться на единичный отрезок обзорной области. w, h — ширина и высота клиентской области окна; получать при каждом WM_SIZE с помощью LOWORD(lParam) и HIWORD(lParam) соответственно.

среда, 4 декабря 2019 г.

Изменение положения углока resize

#html #css #resize

Есть блок со свойством resize: both.



Так вот, как изменить положение этого уголка (нужно вверху справа)? 

Гуглил, нашёл только информацию о том, что его положение можно изменить на снизу
слева, свойством direction: rtl;.
    


Ответы

Ответ 1



Как вариант, использовать jQuery UI: $( "#resizable" ).resizable(); @import url(https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css); .ui-widget-content { padding: 1rem; background: #333 !important; color:#fff !important; } .ui-icon, .ui-widget-content .ui-icon { top: .5rem; top: 5px; right: 5px !important; background-image: url(https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-resize-11.png&r=255&g=255&b=255) !important; background-position: 0px 0px !important; background-size: cover; }

Resize Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, error.



Ответ 2



Когда-то делал похожую штуку, может пригодится. var prevDrag = document.getElementById("prev-drag"); var grab = document.getElementById("grab"); if ( grab != undefined ) { grab.addEventListener("mousedown", function (evt) { evt.preventDefault(); var Xc = evt.pageX; var Yc = evt.pageY; var oW = prevDrag.offsetWidth; var oH = prevDrag.offsetHeight; var self = evt; document.body.onmousemove = function (event) { prevDrag.style.width = ( oW + ( event.pageX - Xc)) + "px"; prevDrag.style.height = (oH - ( event.pageY - Yc)) + "px"; } document.body.addEventListener("mouseup", function (event) { document.body.onmousemove = function () {}; }) }) } .prew-container { position: relative; display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; margin: 0 auto;; } .prev-drag { width: 60px; height: 60px; display: block; background-color: red; transition: .1s all; box-sizing: border-box; position: relative; border: 1px solid #fff; } #grab { position: absolute; right: -5px; top: -5px; display: block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 5px 5px #fffffff0; background-color: #ff3030; background-origin: border-box; cursor: pointer; }


Ответ 3



Можно отразить по вертикали два раза #wrap { border: 2px solid red; width: 100px; height: 100px; resize: both; overflow: auto; transform: scale(1, -1); } #content { transform: scale(1, -1); height: 100%; }
123


Ответ 4



Тогда это всё упрощает. Можно так. .block { width: 200px; height: 100px; background: background; resize: both; overflow: auto; transform: scale(1, -1); }
С textarea там шрифт как-то крутить надо. Наверное можно как-то и красивше, но там уже JS тянуть надо

воскресенье, 26 мая 2019 г.

Маcштабирование c# wpf

Доброго времени суток. Разрабатывал приложение на мониторе 4:3 и сейчас купил 16:9. На 4:3 оно почти во весь экран а на 16:9 ничего не видно почти. Как бороться с этим?
Хотелось бы реализовать режим во все окно. Но опять же элементы остаются на местах растягивается только окно. Как увеличить их и оставить в том же месте?
Когда очень много вот кусок, может если его доделать то и все остальное по принципу сделаю

пятница, 1 марта 2019 г.

Перерисовка окна при изменении его размера

Только начал изучать DirectX и WinAPI. Написал простейшую программу: создаёт квадрат на всё окно и "раскрашивает" его шейдером. Но при уменьшении размера окна изображение сжимается, а при увеличении - растягивается. Как сделать, чтобы этого не происходило, т.е. при уменьшении, например, изображение не сжималось, а просто показывалась его меньшая область. Пробывал сделать это так:
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) { // ...
switch (message) { // ...
case WM_SIZE: D3D11_VIEWPORT vp; vp.Width = (FLOAT)LOWORD(lParam); vp.Height = (FLOAT)HIWORD(lParam); vp.MinDepth = 0.0f; vp.MaxDepth = 1.0f; vp.TopLeftX = 0; vp.TopLeftY = 0; if (g_pImmediateContext) g_pImmediateContext->RSSetViewports(1, &vp); break;
// ... }
return 0; }
Думал, сработает, но получил странное поведение: при уменьшении размера окна изображение ещё сильнее уменьшается, а при увеличении остаётся неизменным. Как реализовать описанное ранее поведение правильно?


Ответ

Вне зависимости от фактических размеров окна его DirectX-ная система координат всегда будет описывать прямоугольник (0, 0)-(1, 1) (DX10) или (-1, -1)-(1, 1) (DX9). Для этого DirectX будет специально масштабировать (а в DX9 ещё и перемещать) координаты на кадровом буфере.
Соответственно, ваша задача заключается в применении матрицы трансформации, которая отменяла бы подобный эффект, «сжимая» обе координаты прямо пропорционально габаритам окна. Причём эта матрица должна применяться после применения всех остальных матриц, если они есть.
Для DirectX 11 (упомянутого в вопросе) матрица будет иметь следующий вид:
где: α — масштабный коэффициент, указывающий, сколько пикселей должно приходиться на единичный отрезок обзорной области. w, h — ширина и высота клиентской области окна; получать при каждом WM_SIZE с помощью LOWORD(lParam) и HIWORD(lParam) соответственно.

суббота, 13 октября 2018 г.

Изменение положения углока resize

Есть блок со свойством resize: both Так вот, как изменить положение этого уголка? (нужно вверху справа). Гуглил, нашёл только информацию о том, что его положение можно изменить на снизу слева, свойством direction: rtl;


Ответ

Как вариант, использовать jQuery UI:
$( "#resizable" ).resizable(); @import url(https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css); .ui-widget-content { padding: 1rem; background: #333 !important; color:#fff !important; } .ui-icon, .ui-widget-content .ui-icon { top: .5rem; top: 5px; right: 5px !important; background-image: url(https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-resize-11.png&r=255&g=255&b=255) !important; background-position: 0px 0px !important; background-size: cover; }

Resize Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, error.