Limited panning / zooming with ViewMatrix

Question

I am trying to add bounding borders for the zoom and pan modes that I implemented for Unveil.js ( http://github.com/michael/unveil ). With borders on, you won’t be able to move outside the boundaries of the scene, and the scale bar (= scale) should not fall below 1.0. As a result, you will not be able to fully pan if you use zoomlevel 1.0.

You can see unlimited behavior on the example of stacks: dejavis.org/stacks. Use the mouse wheel to zoom. You can erase blocks from the screen or compress them endlessly, which should be avoided.

A very difficult problem is that scaling with the mouse pointer also causes the viewport to move inappropriately. Therefore, checking borders during panning is not enough. I would have to find a smart way to increase back up to 100% when using Mouswheel (without dirty jumps). Photoshop seems to have solved this problem when scaling an image.

I do not know how I should solve this. Very upset.: /

I use Matrix to store the current View transformation, which is being processed repeatedly. The code for makeup and panning is implemented here.

http://github.com/michael/unveil/blob/master/src/scene/behaviors.js

Thanks for any ideas. :)

Greetings

Michael

Answer 1

, , . :)

, 3x3, , ( ):

             [ sx 0  tx ]
viewMatrix = [ 0  sy tx ]
             [ 0  0  1  ]

sx sy . . tx ty . .

(: sx sy s , sx = sy )

, p .

[ sx 0  tx ]   [ px ]   [ sx * px + tx ]
[ 0  sy tx ] * [ py ] = [ sy * py + ty ]
[ 0  0  1  ]   [ 1  ]   [ 1            ]

, , [-tx -ty]T.

, (width, height), (width/sx, height/sy) ( ).

 _______________
|               |  ^
|       . [-tx] |  |  height/sy
|         [-ty] |  |
|_______________|  v
    width/sx
<--------------->

, SX .., . ( , , . : -))

,

• / (, sx, sy, tx, ty)
• : s = max(s, 1.0); sx = sy = s

• , , . , :

  tx = clamp(tx, width * (1/sx - 1)/2, width * (1 - 1/sx)/2)

  ty = clamp(ty, height * (1/sy - 1)/2, height * (1 - 1/sy)/2)

( . : P)

Answer 2

( )? /, . , .

.

, , .

(BAD) EDIT: , , . , " ", (.. ) . . , " " , . , .

: "" , , . :). , , , , . , .