NTUT Computer graphics laboratory - cubism 簡報系統

您好! 這份範例投影片就是教您如何用我們的簡報系統~

Prerequisite: Reveal.js 基本入門

請參考: https://revealjs.com/

本系統所改進的部分

能夠顯示cubism人物

          
            <section>
            data-no="老師網頁的cubism人物編號(從0開始,網頁上的編號-1)" 
            data-positionx="cubism人物水平位移範圍(建議-1 ~ 0.9)" 
            data-positiony="cubism人物垂直位移範圍(建議-0.9~0.4)" 
            data-scale="cubism人物縮放(建議1~2之間的小數值,最大極限是3)" 
            data-motionno="cubism人物指定動作編號(從0開始,請參閱model3.json檔案的ALL MOTION GROUP)">
              簡報內容...
            </section>
          
        

嵌套式slide

則父頁面的設定會被子頁面的設定所覆蓋

Example code:

            
              <section data-no="3" data-positionx="0.5" data-positiony="-0.2" data-scale="1.2" data-motionno="2">
                <section data-no="4" data-positionx="0.5" data-positiony="-0.2" data-scale="1.2" data-motionno="2">
                  子頁面1
                </section>
                <section> data-no="6" data-positionx="0.5" data-positiony="-0.2" data-scale="1.2" data-motionno="2">
                  子頁面2
                </section>
              <</section>
            
          

我是子頁面

沒有設定屬性

預設就是沒有人物

此時是使用reveal原生的section slide

以下頁面為reveal.js預設外掛的展示

備忘錄測試

你應該看不到備忘錄

highlight外掛

但如果你要顯示html code,那你應該要自行跳脫<>的符號!

          
            // this is a iife function(立即表達函數) to prevent variable pollution
            (() => {
              function saySomething(msg: string){
                return "I say " + msg;
              }

              let msg = "hi!";
              console.log(saySomething(msg));
            });
          
        

Math外掛測試

有時候你會顯示數學式子

\[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \]