์ด ํ๋ก์ ํธ๋ ์ ์ง ๊ด๋ฆฌ๋ฉ๋๊น? ๊ทธ๋ ์ง ์๋ค๋ฉด ์ข์ ๋์์ด ์์ต๋๊น?
๋ ์ด์ ์ ์งํ ์๊ฐ์ด ์์ง๋ง ๋ช ๊ฐ์ง PR์ ๋ณํฉํ๊ณ ๋ช ๊ฐ์ง ์ข ์์ฑ(์: TypeScript)์ ์ ๋ฐ์ดํธํ๊ณ 1์ ์ค์๊น์ง ์ต์ข 3.0์ ๋ฆด๋ฆฌ์คํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
1์ ์ค์ ๋ฆด๋ฆฌ์ค๊ฐ ์ ๋๋ก ์๋ํ์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค.
์ฐ๋ฆฌ๊ฐ ๋์ธ ์ ์๋ ์ผ์ด ์์ต๋๊น?
๋ด ์ฃผ์ ๋ฌธ์ ๋ HiDPI ํ๋ฉด์์ ์๋ชป๋ ์ ์ฅ/๋ก๋์
๋๋ค.
@abraxxa ์ฌ๊ธฐ์์ ๋ฌธ์ ์ ๊ด๋ จ๋ ๋ชจ๋ ๋ฌธ์ ์ PR์ ์ง๊ณํด ์ฃผ์๊ฒ ์ต๋๊น? ๋ณต์ ํ๋ ๋ฐฉ๋ฒ๋ ์ค๋ช ๋์ด ์์ผ๋ฉด ์ข์ ๊ฒ์ ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์์ ํ ์๊ฐ์ ์ฐพ์ ๊ฐ๋ฅ์ฑ์ด ํจ์ฌ ๋ ๋์์ง๋๋ค...
์ด ๋ฌธ์ ๋ #453์ ์ค๋ช ๋์ด ์์ผ๋ฉฐ, ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด์ผ ํ๋ ํ ๋ฆฌํ์คํธ๋ #411์ ์์ต๋๋ค.
@abraxxa ๊ฐ์ฌํฉ๋๋ค! SVG ํฌ๊ธฐ ์กฐ์ ์ ๋ํด ๋ค์ ์ฝ์ด๋ณด๊ฒ ์ต๋๋ค. ๋ชจ๋ ์๋ ๋ฐฉ์์ด ๊ธฐ์ต๋์ง ์๊ณ ๋์ด์ ๋๋น๊ฐ ์ค์ ๋๋ ๊ณณ์ด ๋ง์ด ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
const minX = 0;
const minY = 0;
const maxX = this.canvas.width / ratio;
const maxY = this.canvas.height / ratio;
...
svg.setAttribute('width', this.canvas.width.toString());
svg.setAttribute('height', this.canvas.height.toString());
...
const header =
'<svg' +
...
` viewBox="${minX} ${minY} ${maxX} ${maxY}"` +
` width="${maxX}"` +
` height="${maxY}"` +
'>';
๊ฐ์ฌ ํด์!
@abraxxa @gimyboya SVG ๋ฌธ์ ์ ๋ํ ํ ๋ก ์ #453์ผ๋ก ์ฎ๊ฒผ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ ์ด์ ์ ์งํ ์๊ฐ์ด ์์ง๋ง ๋ช ๊ฐ์ง PR์ ๋ณํฉํ๊ณ ๋ช ๊ฐ์ง ์ข ์์ฑ(์: TypeScript)์ ์ ๋ฐ์ดํธํ๊ณ 1์ ์ค์๊น์ง ์ต์ข 3.0์ ๋ฆด๋ฆฌ์คํ๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.