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),
),
}),
})
"right"
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),
),
}),
})
Related global functions
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