zoom
zoom copied to clipboard
anitasv
Max and Min Scale
Hello there! Thank you for such a great library. It was really what I need and very light-weight comparing the others. Yet what I would like to see is an option that I can set max and min scale values. I would be appreciated if you can help me with that.
Hello, I really need some help with that. I would be appreciated if you can.
You can do this if you keep track of zoom in rotscale function, would you like to attempt?
There is another long refactor in progress in another branch, so I won't take this soon.
Thank you for your response. You think how long is it going to take for you to add this option? I don't know how can I help but it might be good to see your logic on this so I may go further with it.
I am actually only blocked on testing 1.0.7 version, then I can add this feature. https://github.com/anitasv/zoom/tree/in_flight_stage If you can verify it is working fine, I can merge it and add your request.
Might be better to start a beta channel, so I can easily merge changes there. I had tested before releasing new version; but didn't check if new built binaries are correct. Because I usually check in at least one iOS and one android device.
Are you asking if min and max scale limit is working with 1.0.7 version? If so, I don’t see an instruction about how to do it? If you’re asking about regardless of min/max scale limit, library is working like a charm in IOS and Android, even in Windows 10 kiosk mode.
I have run into some problems, mainly due to state management; zoom limits are easy but haven't worked out how to manage events when it has maxed out. Will probably try again next weekend.
Is it something that is about to ship? Would really like to see that :)
I had the same need. All I did was simple modify the function that return the css matrix. I fixed the position and put a minimum scale to zoom. You can do the same and put a maximum scale to zoom.
Transform.prototype.css = function() {
var A = this.A;
var b = this.b;
// Set min scale to zoom = 1
if (A[0][0] < 1 && A[1][1] < 1) {
this.A[0][0] = 1;
this.A[1][1] = 1;
}
// Fixed the position when the zoom is at min scale
if (A[0][0] == 1 && A[1][1] == 1) {
this.b[0] = 0;
this.b[1] = 0;
}
return 'matrix(' + A[0][0] + ',' + A[0][1] + ',' + A[1][0] + ',' + A[1][1] +
',' + b[0] + ',' + b[1] + ')';
};
Is not a fancy solution but it works. By the way it's an excelent plugin. Keep up with the good work.
the difficulty with the feature is, when using rotation and panning, it is not clear how to gracefully return the element to its original bounds as the scale is reduced.
@diachedelic the idea i had was cancel the transform if the scale exceeds or goes below the limits.
for example in https://github.com/anitasv/zoom/blob/master/zoom.js#L379, if resultantZoom has higher zoom then do not update. But the problem is rotation also gets cancelled. Ideally additionalZoom can be realigned to maintain rotation but don't scale.
@anitasv what about gradually blending the transform with identity as the scale gets closer to min?
Although, if min < 1, elem will not take up its original bounds
@anitasv wait, that doesn't help with rotation. i think the main challenge is animating it smoothly at the min & max
smoothness is fine, it will just stop updating once it hits the maximum/minimum. At least I guess, should code and see how it looks.
but what if the element was panned during zooming? it will not end up back in its original position, which is surprising for the user
i suppose this is really two separate issues:
- placing limits on the zoom
- correcting bounds at the zoom limits
Yes, pan and rotation will stop the moment fingers are too wide causing zoom level to exceed max. It will act stuck, until you bring the fingers closer.
But it is not too hard to fix that as well, the magnitude of zoom can be calculated and renormalized.
transform = [ [ c s; -c s]; pan] z = sqrt(c^2 + s^2) will be zoom if z > max: adjust = max / z transform = [ adjust * [c s; -c s], pan]
something like this will not have pan and rotation issue, but not sure if above pseudo code is right or not.