logo

Live Production Software Forums

www.vmix.com

Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
XAML - Clipping text with Shapes
Options
Go to last post Go to first unread
Previous Topic Next Topic
shawntempesta  
#1 Posted : Wednesday, August 8, 2018 12:09:45 AM(UTC)
shawntempesta

Rank: Advanced Member

Groups: Registered
Joined: 7/15/2018(UTC)
Posts: 109
United States
Location: Las Vegas, NV

Thanks: 14 times
Was thanked: 8 time(s) in 7 post(s)
Say I want to make an animated lower third, a rectangle. I want the rectangle to expand and the text within the rectangle to appear as the rectangle expands...the text mask is revealed as the rectangle extends.

Is there an easy way to do that? It seems as though, from the hours of Googling I've gone through, it's not easy with our flavor of WPF 3.5.

Please, dear Jesus, let there be a better way for future versions of vMix!
Back to top
WWW Twitter

Wanna join the discussion?! Login to your vMix Forums forum account, or Register a new forum account.
Back to top  
doggy  
#2 Posted : Wednesday, August 8, 2018 2:18:19 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
if i understand your visualisation correctly :

have you looked at the viewbox control ?
with a bit of fade animation etc
also were are the elements bound to (window , grid,...)

ps a visual of an idea i always find helpfull to understand the goal
Back to top
doggy  
#3 Posted : Wednesday, August 8, 2018 5:11:44 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
or is this what you mean ? (quick and dirty wpf 3.5)

File Attachment(s):
cliptest.zip (194kb) downloaded 56 time(s).

You cannot view/download attachments. Try to login or register.
Back to top
thanks 1 user thanked doggy for this useful post.
shawntempesta on 8/8/2018(UTC)
shawntempesta  
#4 Posted : Wednesday, August 8, 2018 10:04:38 PM(UTC)
shawntempesta

Rank: Advanced Member

Groups: Registered
Joined: 7/15/2018(UTC)
Posts: 109
United States
Location: Las Vegas, NV

Thanks: 14 times
Was thanked: 8 time(s) in 7 post(s)
Yes! It's quick and dirty but that's the idea (not the blue box but the white one).

Essentially, trying to make the lower third only as long as it needs to be, and give it a maxwidth so it can't go beyond a certain length.
Back to top
WWW Twitter
doggy  
#5 Posted : Thursday, August 9, 2018 1:41:19 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
Quote:
Essentially, trying to make the lower third only as long as it needs to be, and give it a maxwidth so it can't go beyond a certain length.


This seems to be something totally different than your original post . from what i understand here you dont want the TEXT field to be longer . this has been addressed here before by using a viewbox where the text will reduce in size but the total lenght of the textbox will remain the same. There are other means to limit a text lenght too

the q & d effect (Yellow box) is just animating a clipping path

Back to top
shawntempesta  
#6 Posted : Thursday, August 9, 2018 3:09:32 AM(UTC)
shawntempesta

Rank: Advanced Member

Groups: Registered
Joined: 7/15/2018(UTC)
Posts: 109
United States
Location: Las Vegas, NV

Thanks: 14 times
Was thanked: 8 time(s) in 7 post(s)
Here's the thought on what I am trying to do. Maybe I've been crap explaining it. (Worth nothing searching Clipping Path only garners two results, me and one other post about a ticker)

The attached shows it. Rather than the white bar being all the way across... I'd like it to max out at the length of the text, with a little padding to the side.

Perhaps the way to do it would be to have the "Blue" box in your example be white, and the textblock to not have a background color at all. But to have that blue box expand and contract with the length of the text within the text block within it.
shawntempesta attached the following image(s):
Graphics-Idea-4.jpg (50kb) downloaded 17 time(s).

You cannot view/download attachments. Try to login or register.
Back to top
WWW Twitter
doggy  
#7 Posted : Thursday, August 9, 2018 3:20:06 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
there are 2 different textboxes within your white box !!! so which one whould the white box respond to ??

calculations will be involved

http://bfy.tw/JJUe


btw, each one of your posts discribed a different goal
Back to top
thanks 1 user thanked doggy for this useful post.
shawntempesta on 8/9/2018(UTC)
shawntempesta  
#8 Posted : Thursday, August 9, 2018 3:44:41 AM(UTC)
shawntempesta

Rank: Advanced Member

Groups: Registered
Joined: 7/15/2018(UTC)
Posts: 109
United States
Location: Las Vegas, NV

Thanks: 14 times
Was thanked: 8 time(s) in 7 post(s)
LOL thank you for letting me know. I just realized I have my two goals confused/combined in this thread.

1: Animation where the text masks in.

2: A box that is only as big as it needs to be.

As far as which... frankly whichever is longer.
Back to top
WWW Twitter
doggy  
#9 Posted : Thursday, August 9, 2018 4:41:42 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
resizing your "white " background based on the lenght of your text

have the width of your "white" rectangle or border be binded to the actual length of your textbox
tweak with adding extra rectangles for the extra space needed
double this idea for the other text box so the longer text will make it look like it responds to the longest one
Back to top
doggy  
#10 Posted : Thursday, August 9, 2018 5:27:25 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,218
Belgium
Location: Belgium

Thanks: 291 times
Was thanked: 955 time(s) in 790 post(s)
quick and dirty again

File Attachment(s):
cliptest2.zip (249kb) downloaded 37 time(s).

You cannot view/download attachments. Try to login or register.
Back to top
thanks 1 user thanked doggy for this useful post.
shawntempesta on 8/16/2018(UTC)
tkachuk.alex  
#11 Posted : Thursday, August 9, 2018 6:45:33 AM(UTC)
tkachuk.alex

Rank: Advanced Member

Groups: Registered
Joined: 7/8/2016(UTC)
Posts: 49
Man
Ukraine
Location: Ukraine

Thanks: 11 times
Was thanked: 5 time(s) in 3 post(s)
You need to use Clipping path.
Use youtube there a good tutorial about Expression Blend Clipping path.

1. Make a "Canvas"
2. Rectangle and text put inside a "Canvas"
3. Draw by "Pen" recatangle above "Canvas"
4. Select "Canvas" + "Pen draw", right button make clipping path
5. Go to animation then animate canvas rectagle text as you need

https://fex.net/747308296250
Back to top
WWW
thanks 2 users thanked tkachuk.alex for this useful post.
shawntempesta on 8/14/2018(UTC), joel72004 on 8/17/2018(UTC)
Users browsing this topic
Guest (2)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.125 seconds.