Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Nine-part resizable images #182

Merged
merged 4 commits into from
Mar 11, 2020
Merged

Nine-part resizable images #182

merged 4 commits into from
Mar 11, 2020

Conversation

1ec5
Copy link
Contributor

@1ec5 1ec5 commented Feb 27, 2020

The MGLSymbolStyleLayer.iconTextFit property now respects the cap insets of any nine-part stretchable image passed into the -[MGLStyle setImage:forName:] method.

The “Manipulate Style” command in macosapp demonstrates the stretchable image feature by adding a single Ohio state route shield image (from a PDF with cap insets in the asset catalog) and labeling each Ohio state route with that image, stretched to fit the route number without widening the icon’s stroke.

ohio

Depends on #181. Retarget and rebase this PR onto master before merging.

/ref mapbox/mapbox-gl-native#16030
/cc @mapbox/maps-ios @kkaefer

@1ec5 1ec5 added enhancement New feature or request ios macOS labels Feb 27, 2020
@1ec5 1ec5 requested a review from a team February 27, 2020 09:39
@1ec5 1ec5 self-assigned this Feb 27, 2020
@1ec5 1ec5 removed the 🛑 blocked label Feb 28, 2020
@1ec5 1ec5 changed the base branch from 1ec5-gl-v1.2.0 to master February 29, 2020 07:14
Copy link
Contributor

@kkaefer kkaefer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Is there a unit test that we could add?

@1ec5
Copy link
Contributor Author

1ec5 commented Mar 5, 2020

I’ve added unit tests. The NSImage and UIImage extensions now round-trip cap insets (the inverse of the content rect). Note that NSImage and UIImage only support a single stretchable region, not the multiple stretchable regions introduced in mapbox/mapbox-gl-native#16030 for sprite sheets.

@1ec5 1ec5 requested a review from kkaefer March 6, 2020 00:46
Copy link
Contributor

@julianrex julianrex left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one question.

mbgl::optional<mbgl::style::ImageContent> imageContent;
if (!MGLEdgeInsetsIsZero(self.capInsets)) {
imageContent = (mbgl::style::ImageContent){
.left = static_cast<float>(self.capInsets.left * self.scale),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm confused by the * self.scale here, compared with the / self.scale above. What's going on here? (The macOS version below has * in both)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

-initWithMGLStyleImage: divides by the scale and -mgl_styleImageWithIdentifier: multiplies by the scale on both platforms.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see what you mean – you’re referring to the stretchX and stretchY variables. Yes, I think the division above is incorrect. The tests aren’t catching the mistake because they only assert on the image’s content rect, not its stretchable areas per se.

The MGLSymbolStyleLayer.iconTextFit property now respects the cap insets of any nine-part stretchable image passed into the -[MGLStyle setImage:forName:] method.

The “Manipulate Style” command in macosapp demonstrates the stretchable image feature by adding a single Ohio state route shield image, which has cap insets defined in the asset catalog, and labeling each Ohio state route with that image, stretched to fit the route number without widening the icon’s stroke.
@1ec5
Copy link
Contributor Author

1ec5 commented Mar 10, 2020

Note that NSImage and UIImage only support a single resizable region (though it can be tiled as an alternative to stretching). There are third-party solutions for native support for multiple stretchable regions, but the usual way to implement such images is to draw the image programmatically on demand.

@1ec5 1ec5 merged commit dc3470b into master Mar 11, 2020
@1ec5 1ec5 deleted the 1ec5-stretch-goals-16030 branch March 11, 2020 23:55
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request ios macOS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants