Douglas Crockfords - 基本メソッドを継承クラスに呼び出す方法

私はCrockfordの継承パターンを使って基本クラスShapeを構築しようとしています。この基本シェイプを使用して、私は円、四角形、三角形を描画しようとしています。私はちょっと固まっている。ベースメソッドを呼び出す/修正する方法がわかりませんでしたDouglas Crockfords - 基本メソッドを継承クラスに呼び出す方法

function points(x,y) { 
    x = this.x; 
    y = this.y; 
} 

function Shape() { 
    return { 
      this.points: [ ], 

    init : function(){ 
    if(typeof this.context === ‘undefined’){ 
      var canvas = document.getElementById(‘canvas’); 
       var context = canvas.getContext(‘2d’); 
      } 
    }, 
    draw: function(){ 
      var context = this.context; 
      context.beginPath(); 
      context.moveTo(this.points[0].x, this.points[0].y); 
      for(var i=1; i< this.parameter.length; i++){ 
       context.lineTo(this.parameter[i].x, this.parameter[i].y); 
      } 
      context.closePath(); 
      context.stroke(); 
    } 
}; 
} 

function Circle(x, y, r){ 
var points = Shape(); 
    point.x = x; 
    points.y = y; 
    points.r = r; 
    var baseMethod = that.draw; 
     that.draw = function(){ 
     /*how to modify the base method to draw circle*/ 
    }; 

} 
function Rectangle(a, b, c, d){ 
var points = Shape(); 
    point.a = a; 
    points.b = b; 
    points.c = c; 
    points.d = d 
    var baseMethod = that.draw; 
     that.draw = function(){ 
     /*how to call base method to draw rectangle*/ 
    }; 

}

出典

2012-03-16 Priya

、 'X = this.x'する必要があります' this.x = x'（yにも同じ）。 'Shape'では、this.points = []'は 'points：[]'でなければなりません。 'var context ='は 'this.context ='でなければなりません。 –

あなたのコードをlintしてください、その醜い – Raynos

宣言的な文/句のシリーズは質問ではありません:) – vol7ron

コードではかなりの問題があります。まず、円や長方形などのより複雑な図形に移動する前に、基本的な描画コードが動作していることを確認する必要があります。描画線から始めます。私はあなたのコードを片付けたのだが、直線を描くと協力しました：

//returns basic point object which has 
//two properties x & y 
function point(x, y) { 
    return { 
     x: x, 
     y: y 
    } 
} 


//function that returns a shape object with all the 
//mechanisms for drawing lines between points 
function Shape(canvasID) { 
    return { 
     points: [], //not 'this.points' (which would most likely be window.points) 
     addPoint: function(x, y) {//adding a point to a shape is an operation of shape 
      this.points.push(point(x, y)) 
     }, 
     init: function() { 
      if (typeof this.context === 'undefined') { 
       var canvas = document.getElementById(canvasID); 
       var ctx = canvas.getContext('2d'); 
       this.context = ctx; //add the context reference to the current shape object 
      } 
     }, 
     draw: function() { 
      this.init(); 
      var context = this.context; 
      context.beginPath(); 
      var that = this; //create a local reference to the current 'this' object. 
      //insures us against any possible 'this' scope problems 
      context.moveTo(that.points[0].x, that.points[0].y); 
      for (var i = 1; i < that.points.length; i++) { 
       context.lineTo(that.points[i].x, this.points[i].y); 
      } 
      context.closePath(); 
      context.stroke(); 
     } 
    }; 
} 

//Simple Line object - good for testing your 
//basic drawing functionality 
function Line(canvasID, x, y, x2, y2) { 
    var shape = Shape(canvasID); 
    shape.addPoint(x, y); 
    shape.addPoint(x2, y2); 
    shape.draw(); 

} 

//Execute your drawing functionality after the 
//window has loaded to make sure all your objects exist before 
//trying to use them 
window.onload = function() { 
    Line('canvas', 100, 100, 200, 200); 
}

私は必ずしもこれはあなたが何をしているかのアプローチするための最良の方法であるかどうかで販売されていないよ - しかし、DCの基本的なアプローチを作成することですオブジェクトは "新しい"キーワードを使用する必要はありません。したがって、JavaScriptオブジェクト表記法を使用して関数呼び出しからオブジェクトを返します。

これで、線を描くことができました。次に、一連の線を順番に描画します（パス）。その後、長方形を作成します。矩形の描画を開始する場所（開始x/y座標）をコードに指示するコードが必要です。次に、矩形のコーナーの座標を計算するために使用される矩形の高さと幅を示すパラメータを渡すことができます。一連の連結線が描画されたのと同じ方法で描画される形状オブジェクトに追加します。 1つの注意点は、コンテキストオブジェクトに何らかの「createRectangle」関数があるかどうかをチェックすることです（円でも同じです）。私はHTML5/canvasでこのような作業をしていないので、実際に自分自身を知ることはできません。他の環境でもそうです。

編集

はあなたのhtmlのDOCTYPE宣言がHTML5あることを確認する必要があることに言及し忘れました。多くのIDEが自動的にあなたのhtmlをhtml4として宣言します。 HTML5はちょうど必要があります。<!DOCTYPE html>また

、あなたはこのように、HTML本体に何かをcanvas要素を宣言してください：ポイントで

<canvas id="canvas" width="300" height="150"> 
    </canvas>

出典

2012-03-16 20:42:49

その動作しないhttp://jsfiddle.net/priyaa2002/QvMVC/ – Priya

コピー＆ペーストのエラーがあるようにコードを編集し、canvasIDパラメータをShape関数に渡すのを忘れていました。 http://jsfiddle.net/SteveMc/QvMVC/3/ –

Douglas Crockfords - 基本メソッドを継承クラスに呼び出す方法

答えて

関連する問題