Zebra入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Hello World


  无独有偶,编程的学习都是始于Hello World,zebra的Hello World非常简单。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--引用zebra脚本库-->
    <script src="./zebra.min.js"></script>
</head>
<body>
</body>
</html>
//javascritp 代码
zebra.ready(function(){
    var root = new zebra.ui.zCanvas(400, 700).root;
    root.setLayout(new zebra.layout.FlowLayout(
                    zebra.layout.CENTER,
                       zebra.layout.CENTER, 
                       zebra.layout.VERTICAL, 2
    ));
    root.setBorder(zebra.ui.borders.plain);
    root.add(new zebra.ui.ImagePan('logo.png'));
    root.add(zebra.layout.CENTER, new zebra.ui.Label("Hello World"));
});

  与其他的前端JS库使用方法一样,zebra使用前请先引入脚本库。

  在练习环境中,可以通过路径./zebra.min.js引用 zebra 脚本库