Panzoom: рд░реЛрдХрдерд╛рдо рдХреЗ рд▓рд┐рдП рдЙрдЪрд┐рдд рдЖрдпрд╛рдореЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 30 рдЕрдЧре░ 2016  ┬╖  10рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: timmywil/panzoom

рдореБрджреНрджреЗ рдХрд╛ рд╡рд┐рд╖рдп

рдХрдВрдЯреЗрдВрдЯ рдХрднреА-рдХрднреА рдкреИрдирдЬрд╝реВрдо рддрддреНрд╡ рдЖрдпрд╛рдореЛрдВ рдХреЗ рд╕реНрдерд╛рди рдкрд░ рдореВрд▓ рдЖрдпрд╛рдореЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИред

рдЖрдкрдХрд╛ рдкрд░реНрдпрд╛рд╡рд░рдг

  • jquery.panzoom рдХрд╛ рд╕рдВрд╕реНрдХрд░рдг 3.2.2
  • jquery рдХрд╛ рд╕рдВрд╕реНрдХрд░рдг 3.1.0
  • рдХреМрди рд╕рд╛ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдФрд░ рдЗрд╕рдХрд╛ рд╕рдВрд╕реНрдХрд░рдг Chrome 52

    рдкреНрд░рдЬрдирди рдХреЗ рдЪрд░рдг

http://jsbin.com/cidebod/edit?html , css, js, output

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

@arkoe рдЕрдкрдбреЗрдЯреЗрдб рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕реБрд▓рдЭрд╛рдиреЗ рдХреЗ рд▓рд┐рдП # 279 рдкрд░ рдЕрдкрдирд╛

рд╕рднреА 10 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

@timmywil рдореЗрдВ рд╣рд╛рд▓ рд╣реА рдореЗрдВ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдпрд╣ рдмрдЧ рдерд╛, рдФрд░ рд╣рдордиреЗ рдмрд╕ рдПрдХ рдлрд┐рдХреНрд╕ рд▓рд┐рдЦрд╛ рдФрд░ рдПрдХ PR рдЦреЛрд▓рд╛ред рдХреГрдкрдпрд╛ рдЪреЗрдХрдЖрдЙрдЯ рдХрд░реЗрдВ: https://github.com/timmywil/jquery.panzoom/pull/279/files рдпрд╛ рдЗрд╕реЗ рд╕реАрдзреЗ рдбрд╛рдЙрдирд▓реЛрдб рдХрд░реЗрдВ ред

@ рдЕрдЧрд░рддрд╛рдиреА рдореИрдВ рдПрдХ рд╣реА рдореБрджреНрджреЗ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ рдФрд░ рдЖрдкрдХрд╛ рдХрд╛рдо рдареАрдХ рдирд╣реАрдВ рд╣реБрдЖред

рд╕рдорд╕реНрдпрд╛ рддрдм рд╣реЛрддреА рд╣реИ рдЬрдм рдкреИрд░реЗрдВрдЯ div рдореЗрдВ рдкреИрдирдЬрд╝реВрдо рддрддреНрд╡ (рдЫрд╡рд┐) рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдЫреЛрдЯреЗ рдЖрдпрд╛рдо рд╣реЛрддреЗ рд╣реИрдВред

@timmywil рдХреЛрдИ рднреА рд╡рд┐рдЪрд╛рд░ рдЬрдм рдпрд╣ рддрдп рд╣реЛ рдЬрд╛рдПрдЧрд╛? рдореИрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЗрд╕ рдкрд░рд┐рдпреЛрдЬрдирд╛ рд╕реЗ рдкреНрдпрд╛рд░ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдЗрд╕рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдкрд╕рдВрдж рдХрд░реВрдВрдЧрд╛ :-)ред

@arkoe рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдиреЗ рдЧрд▓рдд рд╢рд╛рдЦрд╛ рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ рд╣реИ, рдореИрдВрдиреЗ рдЖрдкрдХрд╛ рдЙрджрд╛рд╣рд░рдг рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рд╣реИред рдХреГрдкрдпрд╛ http://jsbin.com/gigadis/edit?html , css, js, output рджреЗрдЦреЗрдВ

@awartani рдЖрдкрдХреЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдкреИрдирдЬрд╝реВрдо рддрддреНрд╡ (рдиреАрд▓рд╛ рд╡рд░реНрдЧ) рдорд╛рддрд╛-рдкрд┐рддрд╛ рд╕реЗ рдЫреЛрдЯрд╛ рд╣реИред рдЬрдм рдЖрдк рддрддреНрд╡ рдХреЛ рдЙрд╕рдХреЗ рдорд╛рддрд╛-рдкрд┐рддрд╛ рд╕реЗ рдмрдбрд╝рд╛ рдмрдирд╛рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдмрдЧ рдХрд░ рджреЗрддрд╛ рд╣реИред рдХреГрдкрдпрд╛ рдзреНрдпрд╛рди рджреЗрдВ, рдореИрдВрдиреЗ рдпрд╣ рдореБрджреНрджрд╛ рдирд╣реАрдВ рдмрдирд╛рдпрд╛ рд╣реИ; рдореИрдВ рдмрд╕ рд╣реБрдХрд┐рдВрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ :)

рдХреНрд╖рдорд╛ рдХрд░реЗрдВ @arkoe рдореИрдВрдиреЗ рдорд╛рди рд▓рд┐рдпрд╛ рдХрд┐ рдЖрдкрдиреЗ рдпрд╣ рдореБрджреНрджрд╛ рдмрдирд╛рдпрд╛ рд╣реИред рдореИрдВ рдЕрдм рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕рдордЭрддрд╛ рд╣реВрдВ рдФрд░ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕реЗ рд╣рд▓ рдХрд░рдирд╛ рдЖрд╕рд╛рди рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдХреГрдкрдпрд╛ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз # 279 рдкрд░ рдПрдХ рдирдЬрд╝рд░ рдбрд╛рд▓реЗрдВ:

if (contain === 'invert' || (contain === 'automatic' && zoomAspectH < 1.01)) {
//original code
} else {
//my fix
var originalHeight = height / scale;
var originDiff = (originalHeight - height) / 2;
matrix[5] = Math.max(Math.min(matrix[5], conHeight - originalHeight + originDiff), -originDiff);
}

рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рдкрд╣рд▓реЗ if рдХрдерди рдХрд╛ рдкрд░реАрдХреНрд╖рдг рдХрд░рдирд╛ рдирд╣реАрдВ рдЬрд╛рдирддрд╛ рдФрд░ рдпрд╣ рд╡рд╣ рдирд╣реАрдВ рд╣реИ рдЬрд┐рд╕рдХреА рдореБрдЭреЗ рддрд▓рд╛рд╢ рд╣реИ, рдореИрдВрдиреЗ else рдХрдерди рддрдп рдХрд┐рдпрд╛ред рдореЗрд░рд╛ рдорд╛рдирдирд╛ тАЛтАЛрд╣реИ рдХрд┐ рдпрджрд┐ рдЖрдкрдиреЗ рдПрдХ рд╣реА рдлрд┐рдХреНрд╕ рд▓рд┐рдпрд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рдереЛрдбрд╝рд╛ рдореЛрдбрд╝ рджрд┐рдпрд╛ рд╣реИ рддреЛ рдЖрдк рдЗрд╕реЗ рд╣рд▓ рдХрд░ рдкрд╛рдПрдВрдЧреЗред

@ рдЬрд╡рд╛рдиреА рдореИрдВ рдЖрдкрдХреЗ рдкреАрдЖрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ рдФрд░ рдЙрд╕реА рдХреЗ рд╕рд╛рде рдЦреЗрд▓рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рдЧрдИ рд╣реИред рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдХреБрдЫ рдШрдВрдЯреЗ рдмрд┐рддрд╛рдПрдВ, рдФрд░ рдЗрд╕реЗ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рддреАрдд рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдХреНрдпрд╛ рдЖрдкрдХреЗ рджрд┐рдорд╛рдЧ рдореЗрдВ рдРрд╕рд╛ рдХреБрдЫ рд╣реИ рдЬреЛ рдореБрдЭреЗ рдЗрд╕реЗ рдареАрдХ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╣реА рджрд┐рд╢рд╛ рдореЗрдВ рдЗрдВрдЧрд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реИ? рд╡реИрд╕реЗ рдЖрдкрдХреЗ рддреНрд╡рд░рд┐рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! рдХрд╛рдмрд┐рд▓ рдП рддрд╛рд░реАрдлрд╝ред

@arkoe рдореЗрд░реЗ рдкрд╛рд╕ рдЗрд╕реЗ рдЖрдЬрд╝рдорд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рдерд╛ рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЗрд╕рдореЗрдВ рдЖрдиреЗ рдФрд░ рдЗрд╕реЗ рдЖрдЬрд╝рдорд╛рдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ, рдХреНрдпрд╛ рдЖрдк рдПрдХ рдирдореВрдирд╛ рдХреЛрдб рдХреЛ рдЖрдЧреЗ рдмрдврд╝рд╛ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдореИрдВ рдЗрд╕реЗ рдЖрдЬ рд░рд╛рдд рджреЗрдЦрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░реВрдВрдЧрд╛ред

@awartani рдореИрдВрдиреЗ рджреЛ рдЙрджрд╛рд╣рд░рдг рдЕрдкрд▓реЛрдб рдХрд┐рдП рд╣реИрдВ, Demo.html @timmywil рд╕реЗ http://arko.io/x/panzoom/demo.html http://arko.io/x/panzoom/demo2.html

@arkoe рдЕрдкрдбреЗрдЯреЗрдб рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕реБрд▓рдЭрд╛рдиреЗ рдХреЗ рд▓рд┐рдП # 279 рдкрд░ рдЕрдкрдирд╛

Thnx @ рдЕрдЧрд░рддрд╛рдиреАред рдореЗрд░реЗ рдореБрджреНрджреЛрдВ рдХреЛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рддрдп рдХрд┐рдпрд╛!

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

ronvillalon picture ronvillalon  ┬╖  8рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

nich008 picture nich008  ┬╖  14рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

nsshunt picture nsshunt  ┬╖  20рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

kylegoines picture kylegoines  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

jsblanco picture jsblanco  ┬╖  19рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ