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 your code, 그 추악한 – 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의 기본 접근 방식은 만드는 것입니다 "new"키워드를 사용하지 않고도 객체를 사용할 수 있습니다. 따라서 그는 JavaScript 객체 표기법을 사용하여 함수 호출에서 객체를 반환합니다.

이제 선을 그릴 수 있습니다. 다음 단계는 일련의 연결된 선을 차례대로 그려 보는 것입니다 (경로). 그 후에 직사각형을 만듭니다. 직사각형 그리기를 시작할 위치 (시작 x/y 좌표)를 코드에 알려주는 코드가 필요하다. 그런 다음 직사각형의 모서리 좌표를 계산하고 전달할 사각형의 높이와 너비를 나타내는 매개 변수를 가질 수있다. 일련의 연결된 선이 그려지는 것과 같은 방식으로 그려 질 모양 객체에 연결됩니다. 한 가지주의 할 점은 컨텍스트 객체에 일종의 'createRectangle'함수가 있는지 확인하는 것입니다 (원과 동일). HTML5/캔버스에서 이런 종류의 작업을 수행하지 않았기 때문에 실제로는 자신을 알지 못합니다. 다른 환경에서도 마찬가지입니다.

편집은 확실히 당신의 HTML의 DOCTYPE 선언은 HTML5되어 있는지 확인해야 함을 언급하는 것을 잊었다. 많은 IDE가 자동으로 HTML을 html4로 선언합니다. HTML5는 단지 필요 : <!DOCTYPE html> 또한

,이 같은 HTML 본문에 뭔가를 캔버스 요소를 선언해야합니다 : 포인트에서

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

출처

2012-03-16 20:42:49

그것의 작동하지 않습니다 http://jsfiddle.net/priyaa2002/QvMVC/ – Priya

거기에 복사 및 붙여 넣기 오류가있는 것처럼 보이는 코드를 편집하고 canvasID 매개 변수를 셰이프 함수에 전달하는 것을 잊었습니다. http://jsfiddle.net/SteveMc/QvMVC/3/ –

Douglas Crockfords - 기본 메서드를 상속 된 클래스로 호출하는 방법

답변

관련 문제