一、JAVA Applet 波浪
利用五芒星來畫出波浪,並以number變數控制其波數。
提示:
不需放在CMSimple內,直接執行程式即可,五芒星可以不必旋轉。
參考:
『Java - Wave Applet 範例』、『Java - Draw Star 範例方法』
範例結果如下:
二、CMSimple AJAX 表單輸入
在CMSimple中建立一個form表單包含三個input輸入框,能夠輸入你自己的 班級、姓名、學號 驗證身份是否正確,
若答案正確則在CMSimple中印出身份正確,
若其中一個答案錯誤則印出身份錯誤。
條件:
1. 必須包含AJAX menu選單。
參考:
『CMSimple - my_main_function 範例plugins程式』
提示:
PHP使用if多個條件成立的使用方法如下...
1 2 3 4 5 | if (a== "字串1" && b== "字串2" && c== "字串3" ) { echo "內容1" ; } else { echo "內容2" ; } |
三、CMSimple AJAX 即時顯示
請參考『Java - Draw Applet Gear 範例方法』將其編譯並產生Class檔案,在CMSimple中建立一個form表單包含四個input輸入框,
能夠輸入 座標x、座標y、節圓半徑rp、齒數n,
再使用Applet來顯示齒輪並能夠藉由以上參數來控制,
最後必須能夠由AJAX即時顯示在CMSimple中。
條件:
1. 必須包含AJAX menu選單。
參考:
『CMSimple - my_main_function 範例plugins程式』、『CMSimple - my_main_function 範例plugins子程式』
四、以Java Applet繪製動畫
請繪製一個寬為100的小正方形,讓小正方形能夠持續繞著寬為500的大正方形行走,
參考:
『Java - Draw Anime Star 範例』
提示:
大正方形可以不用畫出來。
範例結果如下:
參考範例目錄
- Java - Wave Applet 範例
- Java - Draw Star 範例方法
- CMSimple - my_main_function 範例plugins程式
- CMSimple - my_main_function 範例plugins子程式
- Java - Draw Gear 範例方法
- Java - Draw Anime Star 範例
Java - Wave Applet 範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | // 在 Eclipse 執行, 以滑鼠右鍵, Run as Applet // 在 NetBeans 執行, 則以滑鼠右鍵, 按下 Run File (系統會建立對應的 html) // 若 Application 與 Applet 同時存在, 在 Eclipse 可以分別以滑鼠右鍵, 選擇執行 // 若 Application 與 Applet 同時存在, 在 NetBeans 按下 Run File, 僅會執行 Application import java.applet.Applet; import java.awt.*; public class HelloWorld extends Applet { Stroke drawingStroke = new BasicStroke( 2 ); // static 變數才可以在各方法中共用 String peakNumber = "" ; int number; public void init() { peakNumber = getParameter( "peakNumber" ); if (peakNumber != null ) { // 轉成整數使用 Integer.parseInt() // 轉為浮點數使用 Float.parseFloat() number = Integer.parseInt(peakNumber); } else { // 若 peakNumber 取不到值, 則內定為 5 number = 5 ; } } public void paint(Graphics g) { int i; Graphics2D graph = (Graphics2D)g; graph.setStroke(drawingStroke); graph.setPaint(Color.black); for (i= 1 ;i<=number;i++) { // 每一行向下增量 20 單位 graph.drawString( "Hello World" , 10 , 10 +i* 20 ); printC(graph,i, 80 , 10 +i* 20 ); } for (i=number- 1 ;i>= 1 ;i--) { // 必須考慮前半部已經增量 number*20 graph.drawString( "Hello World" , 10 , 10 +(number+number-i)* 20 ); printC(graph,i, 80 , 10 +(number+number-i)* 20 ); } } public void stop() { } public void printC(Graphics g, int m, int x, int y) { Graphics2D graph = (Graphics2D)g; int i; for (i= 0 ;i<m;i++) { graph.drawString( "!" , x+i* 10 , y); } } } |
Java - Draw Star 範例方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | //drawstar(graph, x座標, y座標, 半徑, 旋轉角度); public void drawstar(Graphics g, int x, int y, int r, int angle){ Graphics2D graph = (Graphics2D)g; int i,j; double deg = 3.14159 / 180 .; double temp1, temp2, temp3, temp4; double [] ptt_x = new double [ 10 ]; double [] ptt_y = new double [ 10 ]; double [] pt_x = new double [ 10 ]; double [] pt_y = new double [ 10 ]; for (i= 0 ;i< 7 ;i++) { pt_x[i] = x+r*Math.sin( 72 .*deg*i+angle*deg); pt_y[i] = y-r*Math.cos( 72 .*deg*i+angle*deg); temp1 = Math.cos( 54 .*deg- 72 .*deg*i-angle*deg); temp2 = Math.sin( 54 .*deg- 72 .*deg*i-angle*deg); temp3 = Math.sin( 18 .*deg); temp4 = Math.cos( 36 .*deg); ptt_x[i] = x+r*temp3*temp1/temp4; ptt_y[i] = y-r*temp3*temp2/temp4; } for (i= 0 ;i< 5 ;i++) { graph.drawLine(( int )pt_x[i], ( int )pt_y[i], ( int )ptt_x[i], ( int )ptt_y[i]); j=i+ 1 ; graph.drawLine(( int )ptt_x[i], ( int )ptt_y[i], ( int )pt_x[j], ( int )pt_y[j]); } } |
CMSimple - my_main_function 範例plugins程式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | <?php // 檔名:index.php // 編寫成類別格式的程式樣版 (ready for CMSimple plugin) // CMSimple呼叫格式「#CMSimple $output.=my_main_function();#」 // 程式的主函式 function my_main_function() { $myplugin = new Cmyplugin; return $myplugin ->myplugin_main(); } // 程式類別 class Cmyplugin{ public $common1 = "common1" ; public $common2 = "common2" ; function myplugin_main() { $menu = $_GET [ "menu" ]; $printonce =0; if ( $menu ) { switch ( $menu ) { case "function1" : // could be html form or action scripts $output .= $this ->myplugin_function1(); $output .= $this ->myplugin_printmenu(); break ; case "function2" : // could be html form or action scripts $output .= $this ->myplugin_function2(); $output .= $this ->myplugin_printmenu(); break ; case "function3" : // AJAX 即時顯示範例 $output .= $this ->myplugin_function3(); $output .= $this ->myplugin_printmenu(); break ; case "printmenu" : $output .= $this ->myplugin_printmenu(); break ; default : // use function3 as default function $output .= $this ->myplugin_printmenu(); } } else { // 未指定 menu 則列出表單 $output .= $this ->myplugin_printmenu(); } return $output ; } //範例程式1 - 印出文字測試 function myplugin_function1() { $output = "function 1 and some html " . $this ->common1. " and " . $this ->common2; $output .= " some more html" ; return $output ; } //範例程式2 - 印出文字測試 function myplugin_function2() { $output = "function 2 and some html " . $this ->common1. " and " . $this ->common2; $output .= " some more html" ; return $output ; } //範例程式3 - AJAX 即時顯示結果 function myplugin_function3() { global $sn , $su ; $output .=" <script src=\"./jscript/prototype.js\" language=\"JavaScript\" type=\"text/javascript\"></script> <script language=\"JavaScript\" type=\"text/javascript\"> function submitEntryForm(event) { var updater = new Ajax.Updater({success: 'var_list' ,error: 'error_list' }, './plugins/my_main_function/addaction.php' , { parameters: {num1:$( 'num1' ).value, num2:$( 'num2' ).value, num3:$( 'num3' ).value} }); event.preventDefault(); } function addObservers(event) { $( 'entry' ).observe( 'submit' , submitEntryForm); } Event.observe(window, 'load' , addObservers); </script> <form id= 'entry' action= '' method= 'post' > num1: <input type= 'text' name= 'num1' id= 'num1' value= '10' /><br /> num2: <input type= 'text' name= 'num2' id= 'num2' value= '20' /><br /> num3: <input type= 'text' name= 'num3' id= 'num3' value= '30' /><br /> <input type= 'submit' id= 'submit' value= 'Send' /> </form> <div id= 'var_list' ></div> <div id= 'error_list' ></div> "; return $output ; } // 以下成員函式, 用來測試 AJAX 表單的使用 function myplugin_printmenu() { global $sn , $su ; $output .=" <script src=\"./jscript/prototype.js\" language=\"JavaScript\" type=\"text/javascript\"></script> <script src=\"./jscript/Menu.js\" language=\"JavaScript\" type=\"text/javascript\"></script> <script language=\"JavaScript\" type=\"text/javascript\"> Menu.init(\"menu2\"); </script> <style type=\"text/css\"> #menu2, #menu2 ul { margin: 0; padding: 0; } #menu2 li { list-style-type: none; } #menu2 { font: 12px Verdana, Arial; } #menu2 li, #menu2 a { float: left; } #menu2 a { display: block; padding: 6px; text-decoration: none; background-color: #FFF; color: #2362AF; } #menu2 a:hover, #menu2 a.menu_open { background-color: #2362AF; color: #FFF; } #menu2 ul { visibility: hidden; position: absolute; width: 150px; border: 1px solid #CCC; margin-top: 1px; } #menu2 ul li { width: 150px; } #menu2 ul a { width: 144px; padding: 3px; } * html #menu2 ul a { width: 150px; } #menu2 ul a.submenu { background-image: url(\"./jscript/menu_arrow_right.gif\"); background-repeat: no-repeat; background-position: 138px 6px; } #menu2 ul a.submenu:hover, #menu2 ul a.submenu.menu_open { background-image: url(\"./jscript/menu_arrow_right_mo.gif\"); } #menu2 ul ul { margin-top: -1px; } </style> <ul id=\"menu2\"> <li><a href=\ "" . $sn . "?" . $su ."&menu=function1\">Data 1</a></li> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2</a> <ul> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2-1</a></li> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2-2</a> <ul> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2-2-1</a></li> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2-2-2</a></li> </ul> </li> <li><a href=\ "" . $sn . "?" . $su ."&menu=function2\">Data 2-3</a> </ul> </li> <li><a href=\ "" . $sn . "?" . $su ."&menu=function3\">AJAX即時顯示</a></li> </ul> "; return $output ; } } |
CMSimple - my_main_function 範例plugins子程式
1 2 3 4 5 | <?php //檔名:addaction.php $total = $_POST [ 'num1' ] + $_POST [ 'num2' ] + $_POST [ 'num3' ]; echo $_POST [ 'num1' ]. "+" . $_POST [ 'num2' ]. "+" . $_POST [ 'num3' ]. "=" . $total ; ?> |
Java - Draw Gear 範例方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | //drawgear(graph, x座標, y座標, 節圓半徑, 齒數); public void drawgear(Graphics g, int midx, int midy, int rp, int n){ Graphics2D graph = (Graphics2D)g; int imax= 15 ; int i= 0 ; int j= 0 ; double a= 0 , d= 0 , ra= 0 , rb= 0 , rd= 0 , dr= 0 , num= 0 , sigma= 0 , ang= 0 , ang2= 0 , lxd= 0 , lyd= 0 , r= 0 , theta= 0 , alpha= 0 , xpt= 0 , ypt= 0 , xd= 0 , yd= 0 , lfx= 0 , lfy= 0 , rfx= 0 , rfy= 0 ; double pi = Math.acos(- 1 ); double deg = pi/ 180 .; graph.drawLine(midx, midy, midx, midy-rp); a = 2 *rp/n; d = 2.5 *rp/n; ra = rp+a; rb = rp*Math.cos( 20 *deg); rd = rp-d; dr = (ra-rb)/imax; num = n; sigma = 3.14159 /( 2 *num)+Math.tan( 20 *deg)- 20 *deg; for (j= 0 ;j<n;j++) { ang = - 2 .*j*pi/num+sigma; ang2 = 2 .*j*pi/num+sigma; lxd = midx+rd*Math.sin(ang2- 2 .* 3.14159 /num); lyd = midy-rd*Math.cos(ang2- 2 .* 3.14159 /num); xd = rd*Math.sin(-ang); yd = rd*Math.cos(-ang); for (i= 0 ;i<=imax;i++) { r = rb+i*dr; theta = Math.sqrt((r*r)/(rb*rb)- 1 .); alpha = theta - Math.atan(theta); xpt = r*Math.sin(alpha-ang); ypt = r*Math.cos(alpha-ang); if (i== 0 ) { graph.drawLine(( int )(midx+xpt), ( int )(midy-ypt), ( int )(midx+xd), ( int )(midy-yd)); } graph.drawLine(( int )(midx+xpt), ( int )(midy-ypt), ( int )(midx+xpt), ( int )(midy-ypt)); if (i==imax) { lfx = midx+xpt; lfy = midy-ypt; } } /*the line from last end of dedendum point to the recent end of dedendum point*/ graph.drawLine(( int )lxd, ( int )lyd, ( int )(midx + xd), ( int )(midy - yd)); for (i= 0 ;i<=imax;i++) { r = rb+i*dr; theta = Math.sqrt((r*r)/(rb*rb)- 1 .); alpha = theta-Math.atan(theta); xpt = r*Math.sin(ang2-alpha); ypt = r*Math.cos(ang2-alpha); xd = rd*Math.sin(ang2); yd = rd*Math.cos(ang2); if (i== 0 ) { graph.drawLine(( int )(midx+xpt), ( int )(midy-ypt), ( int )(midx+xd), ( int )(midy-yd)); } graph.drawLine(( int )(midx+xpt), ( int )(midy-ypt), ( int )(midx+xpt), ( int )(midy-ypt)); if (i==imax) { rfx = midx+xpt; rfy = midy-ypt; } } graph.drawLine(( int )lfx, ( int )lfy, ( int )rfx, ( int )rfy); } } |
Java - Draw Anime Star 範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | import java.applet.Applet; import java.awt.*; public class MovingHelloWorld extends Applet implements Runnable{ Stroke drawingStroke = new BasicStroke( 2 ); String peakNumber = "" ; int number; int frame, delay = 13 ; Thread animator; boolean frozen = false ; Dimension offDimension; Image offImage; Graphics offGraphics; double deg= 3.14159 / 180 .; int pos_x= 0 ; int vel_x= 1 ; int pos_y= 0 ; int vel_y= 1 ; int bound_x= 200 ; int bound_y= 200 ; public void init() { setBackground(Color.white); peakNumber = getParameter( "peakNumber" ); if (peakNumber != null ) { number = Integer.parseInt(peakNumber); } else { number = 3 ; } } public void start() { if (frozen) { } else { if (animator == null ) { animator = new Thread( this ); } animator.start(); } } // 利用繪圖物件變數 g 執行每一影格的繪圖 public void paintFrame(Graphics g) { int i; // 將 g 轉換為 Graphics2D 物件格式, 然後將位址指給 graph 繪圖物件 // 實際執行繪圖的物件為 graph Graphics2D graph = (Graphics2D)g; // 有關繪筆種類 (選擇筆觸格式) Stroke stroke = //new BasicStroke (15.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND); new BasicStroke ( 2 .0f, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_MITER); //graph.setStroke(drawingStroke); graph.setStroke(stroke); graph.setPaint(Color.black); if (pos_x < 0 ) { // 列印位置碰到左邊界時, 位置歸零, 並且改變速度方向 pos_x = 0 ; // 將 x 列印位置歸零 vel_x = -vel_x; // 改變速度方向. } else if (pos_x > bound_x) { // 列印位置碰到右邊界時, 位置設為右邊頂值, 並且改變速度方向 pos_x = bound_x; // 將 x 列印位置停在右邊邊界 vel_x = -vel_x; // 改變速度方向 } // x 列印位置, 以 vel_x 的速度進行增量 pos_x += vel_x; if (pos_y < 0 ) { // 列印位置碰到左邊界時, 位置歸零, 並且改變速度方向 pos_y = 0 ; // 將 y 列印位置歸零 vel_y = -vel_y; // 改變速度方向. } else if (pos_y > bound_y) { // 列印位置碰到右邊界時, 位置設為右邊頂值, 並且改變速度方向 pos_y = bound_y; // 將 y 列印位置停在右邊邊界 vel_y = -vel_y; // 改變速度方向 } // y 列印位置, 以 vel_y 的速度進行增量 pos_y += vel_y; // 畫出旋轉的 drawstar drawstar(graph, 100 +pos_x, 100 +pos_y, 30 , frame); } public void stop() { animator = null ; offImage = null ; offGraphics = null ; } public void run() { long startTime = System.currentTimeMillis(); while (Thread.currentThread() == animator) { frame++; repaint(); try { startTime +=delay; Thread.sleep(Math.max( 0 , startTime-System.currentTimeMillis())); } catch (InterruptedException e) { break ; } } } public boolean mouseDown(Event e, int x, int y) { if (frozen) { frozen = false ; start(); } else { frozen = true ; stop(); } return true ; } // 更新繪圖畫面 public void update( Graphics g ) { Dimension d = getSize(); offImage = createImage(d.width, d.height); offGraphics = offImage.getGraphics(); offGraphics.setColor(getBackground()); offGraphics.fillRect( 0 , 0 , d.width, d.height); offGraphics.setColor(Color.black); paintFrame(offGraphics); g.drawImage(offImage, 0 , 0 , null ); } //drawstar(graph, x座標, y座標, 半徑, 旋轉角度); public void drawstar(Graphics g, int x, int y, int r, int angle){ Graphics2D graph = (Graphics2D)g; int i,j; double deg = 3.14159 / 180 .; double temp1, temp2, temp3, temp4; double [] ptt_x = new double [ 10 ]; double [] ptt_y = new double [ 10 ]; double [] pt_x = new double [ 10 ]; double [] pt_y = new double [ 10 ]; for (i= 0 ;i< 7 ;i++) { pt_x[i] = x+r*Math.sin( 72 .*deg*i+angle*deg); pt_y[i] = y-r*Math.cos( 72 .*deg*i+angle*deg); temp1 = Math.cos( 54 .*deg- 72 .*deg*i-angle*deg); temp2 = Math.sin( 54 .*deg- 72 .*deg*i-angle*deg); temp3 = Math.sin( 18 .*deg); temp4 = Math.cos( 36 .*deg); ptt_x[i] = x+r*temp3*temp1/temp4; ptt_y[i] = y-r*temp3*temp2/temp4; } for (i= 0 ;i< 5 ;i++) { graph.drawLine(( int )pt_x[i], ( int )pt_y[i], ( int )ptt_x[i], ( int )ptt_y[i]); j=i+ 1 ; graph.drawLine(( int )ptt_x[i], ( int )ptt_y[i], ( int )pt_x[j], ( int )pt_y[j]); } } } |