Jump to content
  • 0

Canvas через view port


Full-R
 Share

Question

Не могу отмасштабировать canvas элемент у которого contenxt использует для центрюги пикселы, а у меня интерфейс на view port юнитах. Есть ли способ версткой вогнать canvas по масштабу при уменьшении размера окна? Сейчас все элементы нормально плющатся. 

Есть идея перегонять px в vw а потом ставить event на resize чтобы context вправил себе мозги, но это не очень удобно со всех сторон. 

Мастера, есть ли другой способ сделать это версткой?

Вот ссылка на задачу: Rebuild (revolvercmf.ru)

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
  On 12/28/2020 at 6:25 AM, npofopr said:

width: 100%; height: 100% для canvas ?

Expand  

Не работает.

Атрибуты в теге width и height идут в px без обозначения величины, а устанавливаются они через context:

        /* initialise canvas */
        let ctx = g.getContext('2d');

        ctx.canvas.width =  320; //g.closest('body').offsetWidth;
        ctx.canvas.height = 320; //g.closest('body').offsetHeight;

Если мы через атрибут style указываем width и height холст тянется как презик при натягивании и качество рендеринга падает.

vw работает по формуле:

(100 * (100px)) / window.innerWidth

Я переписал движок анимации с px на vw и чуть позже перегоню остальные величины вроде em, pt, pc и так далее тоже.

 

		// Returns metrics and value of given CSS propertie
		numberCSS: (v) => {

			let u = [

				'Q',
				'cap',
				'ch',
				'ic',
				'lh',
				'rlh',
				'px',
				'ex',
				'em',
				'%',
				'in',
				'cm',
				'mm',
				'pt',
				'pc',
				'deg',
				'vmax',
				'vmin',
				'vh',
				'vw',
				'vi',
				'vb',
				'rem',
				'ch',
				'rad',
				'grad',
				'turn',
				'dppx',
				'x',
				'dpcm',
				'dpi',
				'khz',
				'hz',
				's',
				'ms'

			];

			let c = 0;

			for( let i of u ) {

				if( v.includes(i) ) {

					if( i === 'px' ) {

						return [ (100 * +v.replace(i, '')) / self.innerWidth, 'vw' ]; // px to vw

					}

					return [ +v.replace(i, ''), i ];

				}
				else {

					if( c++ === 34 ) {

						if( i === 'px' ) {

							return [ (100 * (v - 0)) / self.innerWidth, 'vw' ]; // px to vw

						}

						return [ v - 0, null ];

					}

				}

			}

		},

 

У меня перед праздниками тугая башка и я ни как не могу понять как статичный холст по window resize отмасштабировать как vw.

Например canvas contenxt был 320x320 при разрешении экрана 1920x1080, а окно уменьшили и холст должен уменьшиться тоже.

Есть идеи какой формулой воспользоваться? Vw и Vh вообще-то могут появиться сами, но кто это сделает нам быстро в браузер? Поэтому хочется просто масштабер наваять на event.

Link to comment
Share on other sites

  • 0

Не стал трансформировать решил просто вот так:

 

	window.onresize = () => {

		for( let ex of e ) {

			ex.width = ex.closest('.lave-layout').offsetWidth;
			ex.height = ex.closest('.lave-layout').offsetHeight;

		}

	};

 

где ex - это canvas элемент, а .lave-layout - контейнер canvas. вроде работает и не размазывает холст

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy