[TIMOB-26563] TiAPI: 2DMatrix translate() coordinate units do not match between platforms
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2018-12-03T13:53:31.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 8.0.0 |
Components | n/a |
Labels | 2dmatrix, android, animation, breaking-change, ios, parity, scale, unit |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2018-11-15T02:40:46.000+0000 |
Updated | 2018-12-03T14:02:49.000+0000 |
Description
*Summary:*
The
2DMatrix.translate()
method's (x,y) values are handled inconsistently between platforms.
On Android, the units are expected to be pixels (aka: "px").
On iOS, the units are expected to be dips (aka: "dp").
The translate()
method should be changed to use the units assigned to the "tiapp.xml" file's "ti.ui.defaultunit" property. This way they would be handled consistently between platforms and the units which match the coordinates used by the window's views (makes the math easier to calculate).
*Steps to reproduce:*
For this animation test, a blue square is supposed to move from the top-left corner to the bottom-right corner.
Set "tiapp.xml" property "ti.ui.defaultunit" to "dp".
Build and run on iOS.
Notice that the blue square correctly animated to bottom-right corner. (This is good.)
Set "tiapp.xml" property "ti.ui.defaultunit" to "px".
Build and run on iOS.
Notice that the blue square moves off screen, past the bottom-right corner. (This is the bug.)
Build and run on Android.
Notice that the blue square correctly animated to bottom-right corner. (This is good.)
Set "tiapp.xml" property "ti.ui.defaultunit" to "dp".
Build and run on Android.
Notice that the blue square does not reach the bottom-right corner. (This is the bug.)
var SQUARE_SIZE = 80;
var window = Ti.UI.createWindow({
backgroundColor: "white",
fullscreen: true,
});
var squareView = Ti.UI.createView({
backgroundColor: "blue",
left: 0,
top: 0,
width: SQUARE_SIZE,
height: SQUARE_SIZE,
});
window.add(squareView);
window.addEventListener("postlayout", function() {
if (!squareView.wasAnimated) {
var windowSize = window.size;
var newX = windowSize.width - SQUARE_SIZE;
var newY = windowSize.height - SQUARE_SIZE;
var animation = Ti.UI.createAnimation({
transform: Ti.UI.create2DMatrix().translate(newX, newY),
duration: 2000,
});
squareView.wasAnimated = true;
squareView.animate(animation);
}
});
window.open();
*Note:*
This is not an issue with 2DMatrix.scale()
since scaling is a "relative" operation. Versus translations works with "absolute" coordinates.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/10472
*FR Passed.* Awaiting for CR.
*Closing ticket.* Verified fix in SDK Version
8.0.0.v20181130132038
. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10472