1.2 界面设计

Webmax提供按钮，前景图，背景图等界面。选择菜单栏的界面，可以找到。

背景图和前景图设计比较简单，按钮设计相对麻烦一下，下面以一个例子重点介绍，先进行按钮设计，再进行按钮功能设计。

1.2.1 按钮设计

现在设计一个界面：有两个按钮“显示”，“消隐”。

单击按钮“消隐”时，隐藏牙齿模型。

单击按钮“显示”时，显示牙齿模型。

（1） 导入s3d文件

（2） 选择界面/添加按钮，往界面里面添加按钮“显示”。

（3） 我们可以设置当光标离开与进入，按下按钮的图像。

在侧边栏的属性选项卡可以设置按钮的位置，大小，可见性与函数名。

注：我们可以单击工具栏的可以选择物体。

在属性选项卡，可以设置按钮的位置，按钮图片的大小，旋转度，透明度，最重要的设置对应的函数名以及初始时是否为可见。

webmax自动命名该按钮为Button_1。在属性选项卡的可见复选框上打勾，在函数名文本框中填入在html页面相应这个按钮的函数名ShowTooths。（注意：有时候当保存工程文件之后，再打开工程文件时，会发现原来建的按钮不见了，这是webmax工程文件的软件自身问题。）

（4） 同样地添加另一个按钮“消隐”，添加函数HideTooths，webmax自动命名该按钮为Button_2,两个按钮在同一个位置。

（5） 选择发布/打包，选择一种浏览方式。

（6） 选择文件\保存，保存为model6.n3d。

（7） 下面进行javascript开发，打开model6.html进行对ShowTooths，HideTooths编写代码。

1.2.2 按钮功能函数设计

打开发布的html，在里面添加代码实现函数。现在要在script里面添加两个函数ShowTooths和HideTooths,它们对应着界面按钮设计里面的函数。

先介绍一下参数：

Button_1------是按钮“显示”对象的名字。

Button_2-------是按钮“消隐”对象的名字。

⑴首先当场景加载时我们设置让Button_1不可见。

在function AllIsDown()里面进行初始化话设置。

function AllIsDown()

{

//设置渲染的背景色

VGS2.SetBackgroundColor(128, 128, 128);

VGS2.SetButtonVisibility("Button_1",0); //设置按钮1不可见。

}

⑵下面是实现它们的功能。添加的代码要在

。。。。。。 ，一般而言添加函数具体位置不限。

function ShowTooths() //实现了显示牙齿模型

{

    var toothname="TOOTH ";

    for(var index=11;index<=18;index++)//逐个设置每个牙齿可见

   {

     toothname=toothname+index;

     VGS2.SetModelVisibility(toothname, 1);//显示模型的函数

     toothname="TOOTH ";

   }

VGS2.SetRenderStatus(1);//渲染场景，相当与重绘

// 按钮“显示”不可见，按钮“消隐”可见

VGS2.SetButtonVisibility("Button_2",1);

    VGS2.SetButtonVisibility("Button_1",0);

}

function HideTooths()//实现了隐藏牙齿模型

{

     var toothname="TOOTH ";

     for(var index=11;index<=18;index++)//逐个设置每个牙齿不可见

    {

      toothname=toothname+index;

      VGS2.SetModelVisibility(toothname, 0);//隐藏牙齿模型的函数。

      toothname="TOOTH ";

    }

VGS2.SetRenderStatus(1); //渲染场景，相当与重绘

// 按钮“显示”可见，按钮“消隐”不可见

  VGS2.SetButtonVisibility("Button_2",0); VGS2.SetButtonVisibility("Button_1",1);

}

设计完毕，可以实现了。

下一页有关案例功能实现

上一页  [1] [2] [3] [4]  下一页