Blurring Text in a sentence

Question

Created Jun ’23

Replies 1

Boosts 0

Participants 2

Is it possible to apply a Blur() to a specific subset of a Text()? The best I can come up with is an HStack() { Text("A") Text("B").blur() Text("C") } considering Text + Text + Text does not work when .blur() changes "B" from a Text to a View. The issue with my HStack solution is that the individual Text elements will wrap text and not look fluid.

Looks ok with short text.

But looks bad when the text is longer.

IMG_1327 Medium.png

Boost

Answer 1

Claude31 OP

Jun ’23

I made some rapide texts and that could work in your case.

Just avec a single Text (not HStack)
Then overlay the part you want to blur
with a correct computed offset (that's the tricky part).

Something like:

Text("Psst… you are 200 m away")
   .overlay(alignment: .leading) {  // may need .topLeading if the text wraps on 2 lines
           Text("200 m")
              .offset(x: someValue)  // someValue in a computed var, based on the position of text to blur in the original string
              .blur(radius: 5)  
    }

Hope that helps.

0