Panzoom: Chrome์—์„œ ํŒจ๋‹์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2017๋…„ 02์›” 16์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: timmywil/panzoom

๋ฌธ์ œ์˜ ์ฃผ์ œ

์ตœ์‹  ํฌ๋กฌ ๋ฒ„์ „์—์„œ๋Š” ํŒจ๋‹์ด ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํด๋ฆญ ์‹œ ํ™•๋Œ€/์ถ•์†Œ๋Š” ์ตœ์†Œ๋กœ ์„ค์ •๋˜๊ณ  ํŒจ๋‹์€ 0,0์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
HTML๋กœ "transform: matrix" ํžŒํŠธ๊ฐ€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ํ™˜๊ฒฝ

  • jquery.panzoom ๋ฒ„์ „: 3.2.2
  • jquery ๋ฒ„์ „: 1.11.0(์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค)
  • ๋ธŒ๋ผ์šฐ์ € ๋ฐ ๋ฒ„์ „: Chrome 56

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

ํŒจ๋‹์ด ์ž˜ ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค(Firefox์— ์™„๋ฒฝ).

์‹ค์ œ ํ–‰๋™

๋ณ€ํ™˜ ๋งคํŠธ๋ฆญ์Šค๊ฐ€ HTML์—์„œ ์‚ฌ๋ผ์ง€๊ณ  ํ™•๋Œ€/์ถ•์†Œ๊ฐ€ ์ตœ์†Œ๋กœ ์„ค์ •๋˜๊ณ  ์™ผ์ชฝ ์ƒ๋‹จ ๋ชจ์„œ๋ฆฌ๋กœ ์ด๋™

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

์•ˆ๋…•ํ•˜์„ธ์š”,

๋ฌธ์ œ๊ฐ€ ์ •๋ง๋กœ ์ˆ˜์ •๋˜์–ด์•ผ ํ•˜๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‚ด JQuery ๋ฒ„์ „์ด ์ฑ…์ž„์ด ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์ˆ˜์ •์€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. originalEvent ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

1204 ๋ฐ 1205ํ–‰:

startPageX = event.originalEvent.pageX;
startPageY = event.originalEvent.pageY;

1246~1250ํ–‰:

self.pan(
    origPageX + coords.originalEvent.pageX - startPageX,
    origPageY + coords.originalEvent.pageY - startPageY,
    panOptions
);

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

์•ˆ๋…•ํ•˜์„ธ์š”,

๋ฌธ์ œ๊ฐ€ ์ •๋ง๋กœ ์ˆ˜์ •๋˜์–ด์•ผ ํ•˜๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ๋‚ด JQuery ๋ฒ„์ „์ด ์ฑ…์ž„์ด ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ์ˆ˜์ •์€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. originalEvent ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

1204 ๋ฐ 1205ํ–‰:

startPageX = event.originalEvent.pageX;
startPageY = event.originalEvent.pageY;

1246~1250ํ–‰:

self.pan(
    origPageX + coords.originalEvent.pageX - startPageX,
    origPageY + coords.originalEvent.pageY - startPageY,
    panOptions
);

๋™์ผํ•œ ๋ฌธ์ œ, ๋™์ผํ•œ jQuery ๋ฒ„์ „์ด ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์ตœ์‹  ๋ฒ„์ „์˜ jQuery๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1.11์„ ์œ ์ง€ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ˆ˜์ • ์‚ฌํ•ญ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”,

๋„ค ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ JQuery ๋ฒ„์ „์— ๋จธ๋ฌผ ์ˆ˜๋ฐ–์— ์—†์—ˆ๋‹ค.

๊ณ ๋งˆ์›Œ

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