Shape

Shapes

Fuse는 사각형과 원형을 지원. 이것들은 여러 Fills 과Strokes프로퍼티들을 가지고 있다. 

Rectangle

<Rectangle Fill="#f00" />

<Rectangle Fill="#f00" Width="50" Height="50" CornerRadius="5" />

여러 제어 프로퍼티를 포함한 사각형

Circle

<Circle Fill="#f00" Width="50" Height="50">
    <Stroke Width="5" Brush="#ff0" />
</Circle>

스트로크를 적용한 원형

StartAngle / EndAngle

StartAngle and EndAngle 원에만 적용 가능하다.(사각형 안됨) 6개의 프로퍼티를 이용해 제어한다.

• StartAngle - The angle in radians where the slice begins
• EndAngle - The angle in radians where the slice ends
• StartAngleDegrees - The angle in degrees where the slice begins
• EndAngleDegrees - The angle in degrees where the slice ends
• LengthAngle - An offset in radians from StartAngle. This can be used instead of EndAngle
• LengthAngleDegrees - An offset in degrees from StartAngle. This can be used instead of EndAngleDegrees

Note that using for example both StartAngle and StartAngleDegrees on the same Circle will have an undefined behavior.

Fills

도형을 채운다.

<Rectangle Fill="#f00" />

도형마다 다른 방식으로 채울 수 있다. 예제는 아래와 같다.

<StackPanel>
    <Circle Width="150" Height="150">
        <ImageFill File="Pictures/Picture1.jpg" />
    </Circle>
    <Rectangle Height="150">
        <LinearGradient StartPoint="0,0" EndPoint="1,0.75">
            <GradientStop Offset="0" Color="#FC3C47" />
            <GradientStop Offset="1" Color="#B73070" />
        </LinearGradient>
    </Rectangle>
</StackPanel>

이미지를 채운 원형 도형을 만들었다. 이를 활용해 SNS등의 프로필 사진과 같은 UI를 구현할 수 있다.

Strokes

위 이미지에 스트로크 적용

<StackPanel>
    <Circle Width="150" Height="150">
        <Stroke Width="10">
            <ImageFill File="Pictures/Picture1.jpg" />
        </Stroke>
    </Circle>
    <Rectangle Height="150">
        <Stroke Width="15">
            <LinearGradient StartPoint="0,0" EndPoint="1,0.75">
                <GradientStop Offset="0" Color="#FC3C47" />
                <GradientStop Offset="1" Color="#B73070" />
            </LinearGradient>
        </Stroke>
    </Rectangle>
</StackPanel>

<Rectangle Fill="#f00" Width="50" Height="50">
    <Stroke Width="5" Brush="#ff0" />
</Rectangle>

StrokeAlignment

The Stroke can be aligned:

<Stroke StrokeAlignment="Center" />

Valid values are Center, Inside and Outside.

Stroke.Offset

The Stroke of a Shape can be Offset:

<Stroke Width="10" Offset="10">
    <ImageFill File="Pictures/Picture1.jpg" />
</Stroke>

A positive Offset will make the Stroke appear outside the Shape while a negative Offset will make it appear inside.