I have a png which is partically transparent, namely it has alpha channel. But when I used the following code, the transparent becomes white. I guess the alpha channel is missing. Do you know how to solve this problem? Thank you.
This is the reproducible code.
Image("power")
.resizable()
.aspectRatio(contentMode: .fit)
This is the image
This is the effect on simulator
I used this code to manage to show the transparent effect, but foreground colors are lost.
Color.black
.frame(width: home.screenWidth-2*home.defaultPadding,
height: home.screenWidth)
.mask(Image("power")
.resizable()
.aspectRatio(contentMode: .fit))
Reason
Thank you for your helps so much!!!! Without your support, I cann't find the reason.
The compression for the png should be automatic, my project is inherited(basic) somehow, that's why it rendered white.
The code and image has no problem.
That's what should happen. You've got an image with an alpha channel over a white background, so you can't see any of the white elements in your image. Change your Color Scheme to dark with .preferredColorScheme(.dark) and you'll see this:
Related
I am downloading a JPG image from a remote server. If I use AsyncImage, portrait images taken from the phone's library are rotated 90 degrees. Landscape images taken from the phone's photo library are fine. Also, portrait and landscape photos taken from the phone's camera are fine. Looking at the image on a computer using the URL renders in the correct orientation. If, instead of using AsyncImage to display the image, I instead download it as Data and convert it to a UJIImage, it works fine. So this is only an issue when using AsyncImage. How can I prevent portrait images from rotating 90 degrees while still using AsyncImage?
VStack {
AsyncImage(url: imageURL, transaction: Transaction(animation: .spring())) { phase in
switch phase {
case .empty:
Color.purple.opacity(0.1)
case .success(let image):
image
.resizable()
.aspectRatio(contentMode: .fill)
.transition(.scale)
case .failure(_):
Image(systemName: "exclamationmark.icloud")
.resizable()
.scaledToFit()
#unknown default:
Image(systemName: "exclamationmark.icloud")
}
}
.frame(width: 200, height: 250)
.cornerRadius(10)
}
Update: Although this doesn't specifically answer the question on AsyncImage I was able to get around this issue by performing a transform on the image before it is sent to the server. I know there are issues of orientation when sending as PNG; however, I was sending using jpgData from a UIImage. However, I applied this transform anyway before sending and it worked when receiving via AsyncImage. As a UIImage it would have been fine so some internal process within AsyncImage is handling it differently and thus this additional transform that is otherwise not required for UIImage or any other platform, is required in this instance. Perhaps that is simply the answer, but I'll leave it as is given the question is about the behavior of AsyncImage.
I'm trying to work our if it's possible to display text in a Shape so that the text it not rectangular but the same as the shape it's self.
I have tried
Text(loremIpsum)
.font(Font.system(size: 14))
.clipShape(Circle())
which the result was that I'm not seeing new lines when text reaches the edge of the shape.
I then tried to use the circle first and add text to that but that resulted in text appearing outside the circle.
Circle()
.stroke(Color.black, lineWidth: 2)
.padding(6)
.overlay(
Text(loremIpsum)
.font(Font.system(size: 14))
)
I'm wanting to achieve Text that fits perfectly into whatever Shape I use. Is this possible?
The question suggested here does not answer my question sadly. hat just fits text into a Shape but still retains a rectangular frame. I'm trying to make text exactly match the shape I am placing it in.
I noticed that whenever I create a view it automatically gets a white background color. If you insert a list however, no matter the size, the entire view seems to get a sort of grey background, which looks better to me than a white background. I'm wondering how I can get my background to look like this (without using a list, or an invisible dummy list maybe)? I've already tried getting the color code but that just gives me a dark grey background. I tried adjusting the opacity but it just isn't the same as the native one.
edit: It appears the size of the list does matter, it seems to have something to do with NavigationViews and NavigationLinks
That is the default group table view background color (systemGroupedBackground) with the color code #F2F2F7. You can use it as a background color like this:
.background(Color(red: 0.949, green: 0.949, blue: 0.97, opacity: 1.0))
...or simply:
.background(Color(.systemGroupedBackground))
Keep in mind that with the latter solution, the color might change in later iOS versions if Apple decides to change the value of the constant.
When in dark mode, it seems that all the color set in PKInkingTool are reversed in brightness. If I choose a bright red I got a dark red, and vice versa.
For example, if I use UIColorPickerViewController to select a color:
PKInkingTool(.pencil, color:color, width:10)
The color that shows up in PKCanvasView is not the correct color. The only way that seems to work is not to support dark mode.
overrideUserInterfaceStyle = .light
Is there a way to get PencilKit to use the correct color rather than convert color automatically?
You can use 'colorUserInterfaceStyle' for 'PKToolPicker' but in that case if you want to save the drawn part you might have to concern.
colorUserInterfaceStyle = .light
I've encountered what I think is a bug, and I'm wondering if anyone else has encountered this, and/or has a work around for it.
I have images imported from the device's camera via the UIImagePickerController representable. Having imported this image, I then save it to the documents directory, and then display it using the following code:
Image(uiImage: image)
.resizable()
.frame(height: 300)
.scaledToFill()
This shouldn't cause the image to distort, as scaled to fill should simply enlarge the image until it fits the frame without distorting it. However, i'm getting a fair amount of horizontal stretching in the final image:
Has anyone encountered this problem? I don't think i'm missing anything obvious, as when I use it for images not taken with the camera then the code performs fine.
Try changing the order of the modifiers as below,
Image(uiImage: UIImage(named: "08-512")!)
.resizable()
.scaledToFill()
.frame(width: 50, height: 20)
//.clipped()
}