MujicaUI

Media · #360

ImageCompare 浅色主题渲染快照
浅色 · 渲染快照
ImageCompare 深色主题渲染快照
深色 · 渲染快照

360 ImageCompare 前后对比

用途

前后两张图片叠放,用滑块分隔对比。

最小示例

before, after := ui.NewBitmap(examplePhoto), ui.NewBitmap(examplePhoto)
split := 0.5
view := func(c *ui.Context) {
	core.Use(c, core.Settings{})
	media.ImageCompare(c, before, after, &split, media.ImageCompareOptions{})
}
ui.Render(view, 400, 300, 1)

参数

func ImageCompare(c *ui.Context, before, after ui.ImageSource, split *float64, opts ImageCompareOptions) ChoiceResult

*split 取 0 到 1,表示分隔线位置;超出 panic。两张图都须为 *ui.Bitmap 或 *ui.SVG,盒子按 before 的宽高比。

字段类型默认值含义
BeforeLabel / AfterLabelstring"Before" / "After"两侧标签,也组成无障碍名称。
Disabledboolfalse禁用。

状态

分隔线与菱形手柄;两侧标签始终显示,不只靠画面区分。

事件

Changed() 在分隔位置变化后为 true。

键盘操作

按键作用
← / →移动 1%
Home / End最左 / 最右
拖动任意位置拖动分隔线

限制

  • 两张图都按 Cover 铺满盒子,尺寸不同时会裁切。