トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。

Index Menu
(2)<FirstTitle>:Javaデモ/グラフィック「Figure」(1) オブジェクト指向プログラミング <LastTitle>:Javaデモ/Swingグラフィック「Thread、Figure」(2) オブジェクト指向プログラミング (1)<FirstTitle>:Javaデモ/CUI対戦デモ(10) オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人 (4)<FirstTitle>:JavaScriptデモ/FieldRoll 011 オブジェクト指向プログラミング <LastTitle>:JavaScriptデモ/FieldRoll 016 オブジェクト指向プログラミング (1)<FirstTitle>:【備忘録】VisualStudio Code/「インデント整形、設定パネル、ターミナル操作、文字ザイズ変更」 <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:Webページにおける基本的な留意点 <LastTitle>:Webページにおける基本的な注意点(3) (2)<FirstTitle>:Chromeモバイル・エミュレーターの操作法 <LastTitle>:モバイル・エミュレーター用のフォント・サイズ自動調整用「CSS、JavaScript」 (1)<FirstTitle>:SEO(Search Engine Optimization:検索エンジン最適化) <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [000003CA]  <Date>: 2022/04/27 14:56:52
<Title>: JavaScriptデモ/CanvasBound002 オブジェクト指向プログラミング
<Name>: amanojaku@管理人

このデモは「継承(インヘリタンス)」を具象化しているので、オブジェクト指向プログラミングの教材として参考になるでしょう。
(図形が動くだけの)グラフィック表示のデモです、そして「継承(インヘリタンス)」のデモでもあります。
あくまでもデモなので、手抜きをしています。

オブジェクト指向プログラミングにおいて多態性(ポリモーフィズム)を具現化する場合は それらの肝となる「共通の機能」(メソッド)を抽出することです(肝となる「共通の機能」が複数 存在する場合もあります)。
この場合は「Drawing()、Move()」が肝となる「共通の機能」となりますが、その肝となる「共通の機能」が抽出できるか どうかが、多態性(ポリモーフィズム)を具現化できるか どうかの基準になります。
肝となる「共通の機能」(メソッド)は、その機能ごとに完全にシグネチャが一致していなければなしません、ただし コンストラクタや その他のメソッドは必ずしもシグネチャが一致しなくても良いです。
当然 継承関係も最適になるように考察する必要があります。
JavaScriptは動的型付け言語(変数に何でも入る)なので、静的型付け言語においてのオブジェクト指向の(厳密な)多態性(ポリモーフィズム)とは違いますが、動的型付け言語の「なんちゃって多態性(ポリモーフィズム)」でも「共通の機能」(メソッド)の抽出は必要になります。
下記プログラムは静的型付け言語で多態性(ポリモーフィズム)を具現化しやすいようにクラス設計を配慮しています。

(教材として参考にする場合は)とりあえず動きの部分は作らなくても良いので、図形の表示だけでも作ってみると良いでしょう。
動きの部分を作らなくても良いなら、「Move()」メソッドは不要です。

「継承(インヘリタンス)」で対応できない場合は「合成(コンポジション)、委譲(デリゲーション)」などで対応します、オブジェクト内に機能拡張用オブジェクトを作ることを合成(コンポジション)と言い、自オブジェクト・メソッド内で合成(コンポジション)オブジェクト・メソッドを呼び出している場合は委譲(デリゲーション)と言います。

下記は実際に動くページです。

http://ashtarte.pa.land.to/test/CanvasBound002.htm


<html>
<head>
<mefta charset="UTF-8">
</head>
<body>
<canvas id="idCanvas" height="500px" width="500px" style='border: solid thin #000000;' ></canvas><br/>
<script>
  oCanvas = document.getElementById('idCanvas');
  ctx = oCanvas.getContext('2d');
  nCanvasW = oCanvas.width;
  nCanvasH = oCanvas.height;
  
  class Figure {
    x = 0;
    y = 0;
    dx = 0;
    dy = 0;
    bc = null;
    
    constructor(x,y,dx,dy,bc) {
      this.setPosition(x,y);
      this.dx = dx;
      this.dy = dy;
      this.backcolor = bc;
    }
    
    setPosition(x,y) {
      this.x = x;
      this.y = y;
    }
    
    Move( ) {
      let nx,ny;
      nx = this.x+this.dx;
      ny = this.y+this.dy;
      if(nx<0){
        nx = 0;
        this.dx = -this.dx;
      }
      if(nCanvasW<nx){
        nx = nCanvasW;
        this.dx = -this.dx;
      }
      if(ny<0){
        ny = 0;
        this.dy = -this.dy;
      }
      if(nCanvasH<ny){
        ny = nCanvasH;
        this.dy = -this.dy;
      }
      this.setPosition(nx,ny);
    }
    
    Drawing( ) { } // ダミー
  };
  
  class Square extends Figure {
    edge = 0;
    
    constructor(x,y,eg,dx,dy,bc) {
      super(x,y,dx,dy,bc);
      this.edge = eg;
    }
    
    Drawing( ) {
      let half = this.edge/2;
      console.log(half);
      ctx.fillStyle = this.backcolor;
      ctx.fillRect(this.x-half, this.y-half, this.edge, this.edge);
    }
  };
  
  class Ball extends Figure {
    radius = 0;
    
    constructor(x,y,r,dx,dy,bc) {
      super(x,y,dx,dy,bc);
      this.radius = r;
    }
    
    Drawing( ) {
      ctx.beginPath(); // パスの初期化
      ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
      ctx.closePath();
      ctx.fillStyle = this.backcolor;
      ctx.fill();
    }
  };
  
  class Pentagram extends Ball {
    constructor(x,y,r,dx,dy,bc) {
      super(x,y,r,dx,dy,bc);
    }
    
    Drawing( ) {
      ctx.beginPath(); // パスの初期化
      this.CreateStar(this.radius);
      ctx.closePath();
      ctx.fillStyle = this.backcolor;
      ctx.fill();
    }

    CreateStar(r){
      // 「Canvasで五芒星を書く」より。
      // https://qiita.com/nasum/items/a59f2ee4df4fd2f24227
      let degree = [-90,-234,-18,-162,-306];
      let cdt = this.CreateCordinate(r,degree[0]);
      ctx.moveTo(this.x+cdt.x,this.y+cdt.y);
      for(let i = 1; i<degree.length; i++){
        cdt = this.CreateCordinate(r,degree[i]);
        ctx.lineTo(this.x+cdt.x,this.y+cdt.y);
      }
    }
    
    CreateCordinate(r,angle){
      let x = r * Math.cos(angle / 180 * Math.PI);
      let y = r * Math.sin(angle / 180 * Math.PI);
      return {
        "x" : x,
        "y" : y
      };
    }
  }
  
  a1oFg = new Array();
  a1oFg.push(new Square(nCanvasW/2,0,100,0,1,"#00f"));
  a1oFg.push(new Ball(nCanvasW,nCanvasH/2,50,-1,0,"#0f0"));
  a1oFg.push(new Ball(0,nCanvasH/2,50,1,1,"#f00"));
  a1oFg.push(new Pentagram(nCanvasW/2,nCanvasH,50,1,-1,"#f0f"));
  
  var oInterval = setInterval(function () { 
    ctx.clearRect(0, 0, nCanvasW, nCanvasH);
    for(let i = 0; i<a1oFg.length; i++){
      a1oFg[i].Move(); 
      a1oFg[i].Drawing(); 
    }
  }, 7);
  
</script>
</body>
</html>

Block( Address 0000062D Identity 000003B0 )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.