Jump to content

Canvas через view port


Recommended Posts

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

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

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

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

Link to post
Share on other sites
12 часов назад, npofopr сказал:

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

Не работает.

Атрибуты в теге 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 post
Share on other sites
  • 3 weeks later...

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

 

	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 post
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
Reply to this topic...

×   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.

  • Member Statistics

    47,177
    Total Members
    1,451
    Most Online
    ratus
    Newest Member
    ratus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • В случае, когда используется float, margin работает как и прежде. Но, визуально, может казаться что это не так. Дело в том, что в таком случае блоки не имеют аналогичного влияния друг на друга из-за обтекания (float). Вот приблизительно то, о чём Вы говорите https://jsfiddle.net/klierik/bw418vqt/2/
    • Вот еще вариант один:   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> let Person = function Pers(name, age, gender) { // Имя будет Pers this.name = name; this.age = age; this.gender = gender; }; Person.prototype.greet = function () { console.log("My name is " + this.name); } let Person2 = Person; Person2.prototype.goodbye = function () { console.log("Goodbye, " + this.name); } let Son = function (age, skils) { // Имя будет Son // Родительский конструктор вызывается до дочернего конструктора, // чтобы не было перезаписывания новых полей. Person.call(this, undefined, age, undefined); this.skils = skils || []; this.gender; } let Sunny = Son; Sunny.prototype = Object.create(Person.prototype); Sunny.prototype.constructor = Sunny; // Имя будет Son let a = new Person("Петя", 25, "female"); console.log(a); console.log(a.constructor.name); let b = new Son(18, ["рисует", "поет", "водит"]); console.log(b); console.log(b.name); </script> </body> </html>   Задался еще таким вопросом. Я передал аргументы конструктору Person создав объект а,   let a = new Person("Петя", 25, "female");  а как получить эти значения объекту b и вывести? Если написать так:     console.log(b.name);  получим undefined при выводе, а мне к примеру нужно унаследовать от родителя эти значения name, age, gender и вывести через потомка. Метод call дал возможность greet вызвать саму себя?
    • HTML элемент input должен содержать атрибут type: Атрибут type | htmlbook.ru
  • Popular Contributors

×
×
  • Create New...