Question

我正在尝试使用Crockford的继承模式构造基类Shape。使用这个基础形状，我试图绘制一个圆形，一个矩形和一个三角形。我有点卡住了。我不知道如何调用/修改基本方法

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

}

Answer 1

你的代码遇到了很多问题。首先，您需要确保在完成更复杂的形状（如圆形和矩形）之前已经完成了基本的绘图代码。从绘制线开始。我已经整理了你的代码，并使用直线绘图：

//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 / canvas中完成这种工作 - 尽管我在其他环境中也有。

修改

忘了提一下，你需要确保你的html的doctype声明是html5。很多IDE会自动将你的html声明为html4。 Html5只需要：<!DOCTYPE html>

另外，请确保在html正文中声明一个canvas元素，如下所示：

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

Douglas Crockfords - 如何将基本方法称为继承类

1 个答案: