{ "id": "165312", "key": "TIMOB-24313", "fields": { "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "21201", "description": "", "name": "Release 10.1.0", "archived": false, "released": true, "releaseDate": "2021-09-28" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2021-08-24T09:57:57.000+0000", "created": "2017-01-16T13:52:29.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [ "android", "imageview", "ios", "scaling" ], "versions": [], "issuelinks": [ { "id": "59258", "type": { "id": "10002", "name": "Duplicate", "inward": "is duplicated by", "outward": "duplicates" }, "inwardIssue": { "id": "172744", "key": "TIMOB-26853", "fields": { "summary": "Add ScaleType support for ImageView", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "Critical", "id": "1" }, "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false } } } } ], "assignee": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2021-09-20T21:14:59.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10202", "name": "Android", "description": "Android Platform" }, { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "*Summary:*\r\nAdd ability to control how {{Ti.UI.ImageView}} scales its image. In particular, developers want the ability to crop the image.\r\n\r\n*Proposed Solution:*\r\nAdd a new \"scalingMode\" property to {{Ti.UI.ImageView}} supporting the following constants...\r\n* {{Ti.Media.IMAGE_SCALING_AUTO}} // Legacy behavior.\r\n* {{Ti.Media.IMAGE_SCALING_NONE}} // No scaling. Show image as-is.\r\n* {{Ti.Media.IMAGE_SCALING_FILL}} // Stretches image disproportionally.\r\n* {{Ti.Media.IMAGE_SCALING_ASCPECT_FILL}} // Crops proportionally.\r\n* {{Ti.Media.IMAGE_SCALING_ASCPECT_FIT}} // Letterbox/Pillarbox proportionally.\r\n\r\nThe above property name and scaling constants match the names used by our {{Ti.Media.VideoPlayer}} for consistency.\r\nhttps://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.VideoPlayer-property-scalingMode\r\n\r\n*Future:*\r\nIn the future, we could add properties \"horizontalAlignment\" and \"verticalAlignment\" to control where the image should be aligned to within the image view container. For now, we should only support center alignment since that would satisfy most developers.\r\n", "attachment": [ { "id": "67918", "filename": "ImageScalingChangeTest.js", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-05-01T00:27:23.000+0000", "size": 2238, "mimeType": "application/x-javascript" } ], "flagged": false, "summary": "TiAPI: Add \"scalingMode\" property to Ti.UI.ImageView", "creator": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "subtasks": [], "reporter": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "environment": null, "comment": { "comments": [ { "id": "404644", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "Hey [~kopiro], thanks for the proposal! Can you add a view more infos and example code before we move it to TIMOB? Thx!", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-01-16T16:04:49.000+0000", "updated": "2017-01-16T16:04:49.000+0000" }, { "id": "404647", "author": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "body": "Yup, sure!", "updateAuthor": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "created": "2017-01-16T17:19:53.000+0000", "updated": "2017-01-16T17:19:53.000+0000" }, { "id": "404651", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "[~kopiro] How could the developer control where to \"cut\" the image. For example, if I want to let the right part overflow and only show the left side.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-01-16T18:24:28.000+0000", "updated": "2017-01-16T18:24:28.000+0000" }, { "id": "404653", "author": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "body": "Now, he couldn't, but to do that we have to complicate things a little bit.\r\nHow do you suggest to proceed?", "updateAuthor": { "name": "kopiro", "key": "kopiro", "displayName": "Flavio De Stefano", "active": true, "timeZone": "Europe/Rome" }, "created": "2017-01-16T18:30:11.000+0000", "updated": "2017-01-16T18:30:11.000+0000" }, { "id": "404654", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "We take it as it if for now! But for 6.2.0, 6.1.0 is already pretty full.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-01-16T18:32:18.000+0000", "updated": "2017-01-16T18:32:18.000+0000" }, { "id": "426535", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "There are actually many content-modes we could expose, see [the Apple docs|https://developer.apple.com/documentation/uikit/uiviewcontentmode?language=objc] for more infos. I'd say we move it out of 6.2.0 and take full care of it in the 7.0.0 timeframe, so have a solid solution instead of a rushed integration. Thanks!", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-08-11T15:33:12.000+0000", "updated": "2017-08-11T15:33:12.000+0000" }, { "id": "426564", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "FYI: Here are the equivalent Android ImageView scale modes...\r\nhttps://developer.android.com/reference/android/widget/ImageView.ScaleType.html\r\n\r\nTitanium's Android ImageView is currently always using a Matrix scale mode to rotate photos to their upright position, but this photo/image rotation can be handled via an Android \"Drawable\" wrapper instead. (I have a working, but unfinished, solution that already handles this at the Drawable level.)", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-08-11T18:00:48.000+0000", "updated": "2017-08-11T18:00:48.000+0000" }, { "id": "449147", "author": { "name": "ajonus", "key": "ajonus", "displayName": "Andrea Jonus", "active": true, "timeZone": "Europe/Rome" }, "body": "Is this feature still planned? It would be really useful to have a common API to handle all the different scale modes. In the meantime, I'm still using a custom SDK with the PR by @kopiro", "updateAuthor": { "name": "ajonus", "key": "ajonus", "displayName": "Andrea Jonus", "active": true, "timeZone": "Europe/Rome" }, "created": "2019-06-18T09:25:36.000+0000", "updated": "2019-06-18T09:25:36.000+0000" }, { "id": "457674", "author": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "body": "Hopefully we can get this in the main SDK:\r\nhttps://github.com/appcelerator/titanium_mobile/pull/12285\r\n\r\nGoing with {{scaleType}} to make it more flexibel and use the following constants:\r\n{code}\r\nvar scaleTypes = [\r\n\tTi.Media.IMAGE_SCALING_DEFAULT,\r\n\tTi.Media.IMAGE_SCALING_CENTER,\r\n\tTi.Media.IMAGE_SCALING_CENTER_CROP,\r\n\tTi.Media.IMAGE_SCALING_CENTER_INSIDE\r\n]\r\n{code}\r\n\r\nsomeone else need to make the iOS part ;-) ", "updateAuthor": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "created": "2020-11-22T14:21:24.000+0000", "updated": "2020-11-22T14:21:24.000+0000" }, { "id": "457675", "author": { "name": "bhouse", "key": "bhouse", "displayName": "Brenton House", "active": true, "timeZone": "America/Chicago" }, "body": "Thank you [~michael]!! ", "updateAuthor": { "name": "bhouse", "key": "bhouse", "displayName": "Brenton House", "active": true, "timeZone": "America/Chicago" }, "created": "2020-11-22T14:53:52.000+0000", "updated": "2020-11-22T14:53:52.000+0000" }, { "id": "458631", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~michael], the below PR I've written is intended to replace yours (if you don't mind). It adds iOS support, handles Android EXIF orientation/mirroring, and matches the same scaling property/constant naming convention used by `Ti.Media.VideoPlayer`.\r\n\r\nPR (master): https://github.com/appcelerator/titanium_mobile/pull/12753", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-04-28T06:03:05.000+0000", "updated": "2021-04-28T06:03:05.000+0000" }, { "id": "459051", "author": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "body": "[~jquick] the default value is wrong in my tests with 10.1.0.RC\r\n\r\n{code}\r\nvar win = Ti.UI.createWindow({\r\n\ttitle: \"image\",\r\n\tbackgroundColor: '#fff'\r\n});\r\n\r\nvar img = Ti.UI.createImageView({\r\n image:\"https://picsum.photos/200\",\r\n width: Ti.UI.FILL,\r\n height: 30,\r\n // scalingMode: Ti.Media.IMAGE_SCALING_FILL\r\n})\r\nwin.add(img);\r\n\r\nwin.open();\r\n{code}\r\n\r\n10.0.2.GA: image will be streched\r\n10.1.0.RC: image will stay small with correct aspect ratio\r\n10.1.0.RC with {{scalingMode: Ti.Media.IMAGE_SCALING_FILL}}: looks like 10.0.2.GA", "updateAuthor": { "name": "michael", "key": "michael", "displayName": "Michael Gangolf", "active": true, "timeZone": "Europe/Berlin" }, "created": "2021-09-18T17:41:50.000+0000", "updated": "2021-09-18T17:41:50.000+0000" }, { "id": "459054", "author": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~michael], thanks for reporting this. I've written this up via a separate ticket: [TIMOB-28537]", "updateAuthor": { "name": "jquick", "key": "jquick", "displayName": "Joshua Quick", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2021-09-20T21:14:59.000+0000", "updated": "2021-09-20T21:14:59.000+0000" } ], "maxResults": 16, "total": 16, "startAt": 0 } } }