KMOL - 程式教學部落: 期末考題

一、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多個條件成立的使用方法如下...

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 範例

// 在 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);
  }
 }
}

Top

Java - Draw Star 範例方法

 //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]);
  }
 }

Top

CMSimple - my_main_function 範例plugins程式

<?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;
 }
}

Top

CMSimple - my_main_function 範例plugins子程式

<?php
//檔名:addaction.php
$total = $_POST['num1'] + $_POST['num2'] + $_POST['num3'];
echo $_POST['num1']."+".$_POST['num2']."+".$_POST['num3']."=".$total;
?>

Top

Java - Draw Gear 範例方法

 //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);
  }
 }

Top

Java - Draw Anime Star 範例

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]);
  }
 }
}

KMOL - 程式教學部落

2011年6月21日星期二

期末考題

一、JAVA Applet 波浪

二、CMSimple AJAX 表單輸入

三、CMSimple AJAX 即時顯示

四、以Java Applet繪製動畫

參考範例目錄

Java - Wave Applet 範例

Top

Java - Draw Star 範例方法

Top

CMSimple - my_main_function 範例plugins程式

Top

CMSimple - my_main_function 範例plugins子程式

Top

Java - Draw Gear 範例方法

Top

Java - Draw Anime Star 範例

Top

沒有留言:

張貼留言

2011年6月21日 星期二

期末考題

一、JAVA Applet 波浪

二、CMSimple AJAX 表單輸入

三、CMSimple AJAX 即時顯示

四、以Java Applet繪製動畫

參考範例目錄

Java - Wave Applet 範例

Top

Java - Draw Star 範例方法

Top

CMSimple - my_main_function 範例plugins程式

Top

CMSimple - my_main_function 範例plugins子程式

Top

Java - Draw Gear 範例方法

Top

Java - Draw Anime Star 範例

Top

沒有留言:

張貼留言

2011年6月21日星期二