zim.js基于canvas的一组漂亮按钮绘制

buttons / tabs / toggle / label for canvas，基于canvas绘制的界面组件，带悬停交互效果。

h5, canvas, button

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1979
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const frame = new Frame("fit", 800, 600, "#EEE", "#555");
frame.on("ready", () => {
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

// often need below - so consider it part of the template
    const stage = frame.stage;
    const stageW = frame.width;
    const stageH = frame.height;

// REFERENCES for ZIM at https://zimjs.com

const buttons = series(

// ROW 1
        new Button(),
        // custom corner
        new Button({
            label: "ZIM",
            corner: 0,
            backgroundColor: pink,
            rollBackgroundColor: green,
            corner: [40, 0, 40, 0]
        }),
        // custom label
        new Button({
            label: new Label({
                text: "CUSTOM",
                size: 28,
                rollColor: white
            }),
            backgroundColor: light,
            rollBackgroundColor: dark,
            borderColor: dark,
            borderWidth: 3,
            corner: 30
        }),

// ROW 2
        // toggle button with gradient and custom corner
        new Button({
            label: "TOGGLE",
            toggle: "BACK",
            corner: 0,
            backgroundColor: blue,
            rollBackgroundColor: green,
            gradient: .2
        }),
        // using Pizzazz for backing
        new Button({
            label: "GO",
            backing: pizzazz.makeShape("cloud", dark),
            rollBacking: pizzazz.makeShape("cloud", grey)
        }),
        // little Tile of three icon (from Pizzazz) buttons
        new Tile({
            obj: series(
                new Button({
                    label: "",
                    backgroundColor: grey,
                    width: 60,
                    corner: 8,
                    icon: pizzazz.makeIcon("play", white).alp(.7),
                    toggleIcon: pizzazz.makeIcon("pause", white).alp(.7)
                }),
                new Button({
                    label: "",
                    backgroundColor: grey,
                    width: 60,
                    corner: 8,
                    icon: pizzazz.makeIcon("heart", white).alp(.7),
                    toggleBacking: new Rectangle({
                            width: 60,
                            height: 60,
                            color: red,
                            corner: 8
                        }).centerReg(null, null, false) // do not add
                }),
                new Button({
                    label: "",
                    backgroundColor: grey,
                    width: 60,
                    corner: 8,
                    icon: pizzazz.makeIcon("sound", white).alp(.7),
                    toggleIcon: pizzazz.makeIcon("mute", white).alp(.7)
                })
            ),
            cols: 3,
            rows: 1,
            spacingH: 10,
            // clone:false // use the objects passed in (helpful if they have events already)
        }),

// ROW 3 
        // confirmation with wait
        new Button({
            label: "DELETE",
            wait: "CONFIRM",
            waitTime: 2000,
            corner: 0,
            backgroundColor: grey,
            rollBackgroundColor: red
        }),
        // loading with wait and Pizzazz
        new Button({
            label: "LOAD",
            color: dark,
            rollColor: dark,
            waitBacking: pizzazz.makePattern({
                type: "slants",
                colors: makeSeries([yellow, orange]),
                interval: 500
            }),
            backgroundColor: yellow,
            rollBackgroundColor: green,
            corner: 30
        }),
        new Tabs({
            width: 200,
            tabs: ["A", "B", "C"],
            backgroundColor: green,
            rollBackgroundColor: orange,
            offBackgroundColor: brown,
            corner: 20
        })
    );

// The Tile
    const tile = new Tile({
        obj: buttons,
        cols: 3,
        rows: 3,
        spacingH: 20,
        spacingV: 50,
        clone: false // handy if objects already have events on them
    }).center();

// normally a mousedown or click event would be put on the button
    // here we put the event on the tile and check the text property of the target
    // note the treatment of the wait states for confirming and loading	
    const deleteMessage = new Pane(300, 200, "DELETED");
    tile.on("mousedown", e => {
        let button = e.target;
        let text = button.text;
        if (text == "ZIM" || text == "GO") {
            zgo("http://zimjs.com", "_blank");
        } else if (button.waiting && text == "CONFIRM") {
            deleteMessage.show();
            timeout(2000, () => {
                deleteMessage.hide();
            })
            button.clearWait();
        } else if (!button.waiting && text == "LOAD") {
            timeout(3000, () => {
                button.clearWait();
            }); // emulating load time - see Frame loadAssets() progress parameter
        }
    });

new Label("ZIM - Buttons: toggle, backings, icons, wait, patterns, tabs").alp(.7).sca(.7).center().mov(0, -220);

stage.update(); // this is needed to show any changes

createIcon();

}); // end of ready

编译

CSS

HTML

buttons / tabs / toggle / label for canvas，基于canvas绘制的界面组件，带悬停交互效果。

h5, canvas, button

编辑器支持Emmet

快捷键

buttons / tabs / toggle / label for canvas，基于canvas绘制的界面组件，带悬停交互效果。

h5, canvas, button

使用Bodymovin.js制作的播放按钮等待动画

Slick.js+Animate.css 带文本说明层的平滑图片轮播控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：