Transform

Table of contents

Create from source
Create from resource
Interface description
Properties
- "rotate"
- "rotate-x"
- "rotate-y"
- "rotate-z"
- "scale-x"
- "scale-y"
- "scale-z"
- "skew-x"
- "skew-y"
- "translate-x"
- "translate-y"
- "translate-z"

Description of the View's translation, rotation, scale and distortion

Create from source

func NewTransform(params Params) Transform

Creates a new transform property data and return its interface

Create from resource

View {
    perspective = 100px,
    transform = _{
        translate-x = 100px,
        translate-y = 100px,
        rotate-x = 1.0,
        rotate-y = 0.0,
        rotate-z = 0.0,
        rotate = 10deg,
        scale-x = 1.1,
        scale-y = 1.2,
        skew-x = 10deg,
    }
}

Interface description

Inherit methods from Properties, fmt.Stringer

Properties

"rotate"

Angle of the view rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise

Constant: Rotate

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate = 45deg,
            },
            text = "Some rotated text",
        },
    ],
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate = 1,
            },
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.Rotate: rui.Deg(45),
            }),
            rui.Text: "Some rotated text",
        }),
    },
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.Rotate: 1,
            }),
            rui.Text:   "Some rotated text",
        }),
    },
})

"rotate-x"

x-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateX

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate-x = 1,
                rotate-y = 0,
                rotate-z = 0,
                rotate = 45deg,
            },
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.RotateX: 1,
                rui.RotateY: 0,
                rui.RotateZ: 0,
                rui.Rotate:  rui.Deg(45),
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"rotate-y"

y-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateY

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate-x = 0,
                rotate-y = 1,
                rotate-z = 0,
                rotate = 45deg,
            },
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.RotateX: 0,
                rui.RotateY: 1,
                rui.RotateZ: 0,
                rui.Rotate:  rui.Deg(45),
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"rotate-z"

z-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateZ

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate-x = 1,
                rotate-y = 0,
                rotate-z = 0,
                rotate = 45deg,
            },
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.RotateX: 1,
                rui.RotateY: 0,
                rui.RotateZ: 0,
                rui.Rotate:  rui.Deg(45),
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"scale-x"

x-axis scaling value of a 2D/3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleX

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                scale-x = 2,
            },
            perspective = 1px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.ScaleX: 2.0,
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some scaled text",
        }),
    },
})

"scale-y"

y-axis scaling value of a 2D/3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleY

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                scale-y = 2,
            },
            perspective = 1px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.ScaleY: 2.0,
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some scaled text",
        }),
    },
})

"scale-z"

z-axis scaling value of a 3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleZ

Types: float, int, string

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

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                scale-z = 2,
                translate-z = -100px,
            },
            perspective = 400px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.ScaleZ:     2.0,
                rui.TranslateZ: rui.Px(-100),
            }),
            rui.Perspective: rui.Px(400),
            rui.Text:        "Some scaled text",
        }),
    },
})

"skew-x"

Angle to use to distort the element along the abscissa. The default value is 0

Constant: SkewX

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

ListLayout {
    padding = 1em,
    content = [
        Button {
            content = "Save",
            transform = _{
                skew-x = -10deg,
            },
        },
        Button {
            content = "Load",
            transform = _{
                skew-x = -10deg,
            },
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewButton(session, rui.Params{
            rui.Content: "Save",
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.SkewX: rui.Deg(-10),
            }),
        }),
        rui.NewButton(session, rui.Params{
            rui.Content: "Load",
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.SkewX: rui.Deg(-10),
            }),
        }),
    },
})

"skew-y"

Angle to use to distort the element along the ordinate. The default value is 0

Constant: SkewY

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

ListLayout {
    padding = 1em,
    content = [
        Button {
            content = "Layer 1",
            transform = _{
                skew-y = 10deg,
            },
        },
        Button {
            content = "Layer 2",
            transform = _{
                skew-y = 10deg,
            },
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewButton(session, rui.Params{
            rui.Content: "layer 1",
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.SkewY: rui.Deg(10),
            }),
        }),
        rui.NewButton(session, rui.Params{
            rui.Content: "Layer 2",
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.SkewY: rui.Deg(10),
            }),
        }),
    },
})

"translate-x"

x-axis translation value of a 2D/3D translation

Constant: TranslateX

Types: SizeUnit, SizeFunc, string, float, int

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

See SizeUnit description for more details

Examples

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.Content: rui.NewButton(session, rui.Params{
        rui.ID:        "button",
        rui.Content:   "Push me",
        rui.MouseOver: hoverIn,
        rui.MouseOut:  hoverOut,
        rui.Shadow: rui.NewViewShadow(
            rui.Em(0.5),
            rui.Em(0.5),
            rui.Em(0),
            rui.Em(0),
            rui.Black,
        ),
        rui.TransformTag: rui.NewTransform(rui.Params{
            rui.TranslateX: rui.Em(-0.5),
            rui.TranslateY: rui.Em(-0.5),
        }),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, nil)
    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateX: 0,
        rui.TranslateY: 0,
    }))
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, rui.NewViewShadow(rui.Em(0.5), rui.Em(0.5), rui.Em(0), rui.Em(0), rui.Black))

    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateX: rui.Em(-0.5),
        rui.TranslateY: rui.Em(-0.5),
    }))
}

"translate-y"

x-axis translation value of a 2D/3D translation

Constant: TranslateX

Types: SizeUnit, SizeFunc, string, float, int

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

See SizeUnit description for more details

Examples

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.Content: rui.NewButton(session, rui.Params{
        rui.ID:        "button",
        rui.Content:   "Push me",
        rui.MouseOver: hoverIn,
        rui.MouseOut:  hoverOut,
        rui.Shadow: rui.NewViewShadow(
            rui.Em(0.5),
            rui.Em(0.5),
            rui.Em(0),
            rui.Em(0),
            rui.Black,
        ),
        rui.TransformTag: rui.NewTransform(rui.Params{
            rui.TranslateX: rui.Em(-0.5),
            rui.TranslateY: rui.Em(-0.5),
        }),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, nil)
    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateX: 0,
        rui.TranslateY: 0,
    }))
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, rui.NewViewShadow(rui.Em(0.5), rui.Em(0.5), rui.Em(0), rui.Em(0), rui.Black))

    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateX: rui.Em(-0.5),
        rui.TranslateY: rui.Em(-0.5),
    }))
}

"translate-z"

z-axis translation value of a 3D translation

Constant: TranslateZ

Types: SizeUnit, SizeFunc, string, float, int

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

See SizeUnit description for more details

Examples

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.Content: rui.NewButton(session, rui.Params{
        rui.ID:          "button",
        rui.Content:     "Push me",
        rui.MouseOver:   hoverIn,
        rui.MouseOut:    hoverOut,
        rui.Perspective: rui.Px(200),
        rui.TransformTag: rui.NewTransform(rui.Params{
            rui.TranslateZ: rui.Px(0),
        }),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateZ: rui.Px(50),
    }))
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.TransformTag, rui.NewTransform(rui.Params{
        rui.TranslateZ: rui.Px(0),
    }))
}