Signature_pad: ์œ ์ง€?

์— ๋งŒ๋“  2019๋…„ 12์›” 04์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: szimek/signature_pad

์ด ํ”„๋กœ์ ํŠธ๋Š” ์œ ์ง€ ๊ด€๋ฆฌ๋ฉ๋‹ˆ๊นŒ? ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ์ข‹์€ ๋Œ€์•ˆ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋” ์ด์ƒ ์œ ์ง€ํ•  ์‹œ๊ฐ„์ด ์—†์ง€๋งŒ ๋ช‡ ๊ฐ€์ง€ PR์„ ๋ณ‘ํ•ฉํ•˜๊ณ  ๋ช‡ ๊ฐ€์ง€ ์ข…์†์„ฑ(์˜ˆ: TypeScript)์„ ์—…๋ฐ์ดํŠธํ•˜๊ณ  1์›” ์ค‘์ˆœ๊นŒ์ง€ ์ตœ์ข… 3.0์„ ๋ฆด๋ฆฌ์Šคํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

๋ชจ๋“  7 ๋Œ“๊ธ€

๋” ์ด์ƒ ์œ ์ง€ํ•  ์‹œ๊ฐ„์ด ์—†์ง€๋งŒ ๋ช‡ ๊ฐ€์ง€ 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์œผ๋กœ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰