ClipShape

Description of a View's clipping area

Create from source

func CircleClip(x, y, radius SizeUnit) ClipShape

Creates a circle view clipping area

func EllipseClip(x, y, rx, ry SizeUnit) ClipShape

Creates an ellipse view clipping area

func InsetClip(top, right, bottom, left SizeUnit, radius RadiusProperty) ClipShape

Creates a rectangle view clipping area. top - offset from the top border of a view; right - offset from the right border of a view; bottom - offset from the bottom border of a view; left - offset from the left border of a view; radius - corner radius, pass nil if round corners are not needed

func PolygonClip(points []any) ClipShape

Creates a polygon view clipping area. The elements of the function argument can be text constants, or text representation of SizeUnit, or elements of SizeUnit type

func PolygonPointsClip(points []SizeUnit) ClipShape

Creates a polygon view clipping area

Create from resource

View {
    clip = circle {
        x = 50%,
        y = 50%,
        radius = 50%,
    },
}

View {
    clip = ellipse {
        x = 50%,
        y = 50%,
        radius-x = 50%,
        radius-y = 30%,
    },
}

View {
    clip = inset {
        top = 1px,
        right = 2px,
        bottom = 1px,
        left = 2px,
    },
}

View {
    clip = polygon {
        points = "1px, 1px, 10px, 1px, 10px, 10px, 1px, 10px",
    },
}

Interface description

Inherit methods from Properties, fmt.Stringer

Properties

"bottom"

Specifies the bottom border position of inset clip shape

Constant: Bottom

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = inset {
            top = 10%,
            bottom = 10%,
            left = 10%,
            right = 10%,
            radius = _{
                x = 0.2em,
                y = 0.2em,
            }
        },
    },
}
view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.InsetClip(
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.NewRadiusProperty(rui.Params{
                rui.X: rui.Em(0.2),
                rui.Y: rui.Em(0.2),
            }),
        ),
    }),
})

"left"

Specifies the left border position of inset clip shape

Constant: Left

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = inset {
            top = 10%,
            bottom = 10%,
            left = 10%,
            right = 10%,
            radius = _{
                x = 0.2em,
                y = 0.2em,
            }
        },
    },
}
view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.InsetClip(
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.NewRadiusProperty(rui.Params{
                rui.X: rui.Em(0.2),
                rui.Y: rui.Em(0.2),
            }),
        ),
    }),
})

"points"

Points which describe polygon clip area. Values are in a sequence of pair like: x1, y1, x2, y2 ...

Constant: Points

Types: []SizeUnit, string

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = polygon {
            points = "1px, 1px, 10px, 1px, 10px, 10px, 1px, 10px",
        },
    },
}
view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.PolygonClip(
            []any{
                rui.Px(1),
                rui.Px(1),
                rui.Px(10),
                rui.Px(1),
                rui.Px(10),
                rui.Px(10),
                rui.Px(1),
                rui.Px(10),
            },
        ),
    }),
})

"radius"

Specifies the radius of the corners or the radius of the cropping area

Constant: Radius

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = lightsalmon,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = circle {
            x = 50%,
            y = 50%,
            radius = 50%,
        },
    },
}
view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.CircleClip(
            rui.Percent(50),
            rui.Percent(50),
            rui.Percent(50),
        ),
    }),
})

"radius-x"

Specifies the x-axis corners elliptic rounding radius of the elliptic clip shape

Constant: RadiusX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = lightsalmon,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = ellipse {
            x = 50%,
            y = 50%,
            radius-x = 50%,
            radius-y = 30%,
        },
    },
}
view: = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.EllipseClip(
            rui.Percent(50),
            rui.Percent(50),
            rui.Percent(30),
            rui.Percent(50),
        ),
    }),
})

"radius-y"

Specifies the y-axis corners elliptic rounding radius of of the elliptic clip shape

Constant: RadiusY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = lightsalmon,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = ellipse {
            x = 50%,
            y = 50%,
            radius-x = 50%,
            radius-y = 30%,
        },
    },
}
view: = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.EllipseClip(
            rui.Percent(50),
            rui.Percent(50),
            rui.Percent(30),
            rui.Percent(50),
        ),
    }),
})

Specifies the right border position of inset clip shape

Constant: Right

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = inset {
            top = 10%,
            bottom = 10%,
            left = 10%,
            right = 10%,
            radius = _{
                x = 0.2em,
                y = 0.2em,
            }
        },
    },
}
view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.InsetClip(
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.NewRadiusProperty(rui.Params{
                rui.X: rui.Em(0.2),
                rui.Y: rui.Em(0.2),
            }),
        ),
    }),
})

"top"

Specifies the top border position of inset clip shape

Constant: Top

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = inset {
            top = 10%,
            bottom = 10%,
            left = 10%,
            right = 10%,
            radius = _{
                x = 0.2em,
                y = 0.2em,
            }
        },
    },
}
view = rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.InsetClip(
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.Percent(10),
            rui.NewRadiusProperty(rui.Params{
                rui.X: rui.Em(0.2),
                rui.Y: rui.Em(0.2),
            }),
        ),
    }),
})

"x"

Specifies x-axis position of the clip shape

Constant: X

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = lightsalmon,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = circle {
            x = 50%,
            y = 50%,
            radius = 50%,
        },
    },
}
view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.CircleClip(
            rui.Percent(50),
            rui.Percent(50),
            rui.Percent(50),
        ),
    }),
})

"y"

Specifies y-axis position of the clip shape

Constant: Y

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    background-color = lightsalmon,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.png",
        fit = cover,
        clip = circle {
            x = 50%,
            y = 50%,
            radius = 50%,
        },
    },
}
view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.BackgroundColor:     rui.LightSalmon,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Source: "avatar.png",
        rui.Clip: rui.CircleClip(
            rui.Percent(50),
            rui.Percent(50),
            rui.Percent(50),
        ),
    }),
})
func GetClip(view View, subviewID ...string) ClipShape

Returns a view clipping area. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned

func GetShapeOutside(view View, subviewID ...string) ClipShape

Returns a shape around which adjacent inline content. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned