1

キャンバスで数学グラフを作成するためのライブラリを作成していますが、以前は、グローバル コンテキスト プロトタイプにメソッドを直接追加するというアプローチでした。

CanvasRenderingContext2D.prototype.point=function(x,y){
    this.fillRect(x,y,1,1);
};

しかし、それは推奨されていないことがわかったので、私が今しようとしているのは、グローバルオブジェクトを作成することです。

window.Graph=function(context){
    this.ctx=context;
    alert(this.ctx);
    this.CanvasRenderingContext2D.prototype.point=function(x,y){
        this.ctx.fillRect(x,y,1,1);
    };
};

私も試してみました

this.ctx.prototype.point=function(x,y){
        this.ctx.fillRect(x,y,1,1);
};

それらはすべて次のようなエラーを返しますcannot set property 'point' to undefined

それを呼び出す理想的な方法は

var g=new Graph(ctx);
g.point(5,5);

これを行う最良の方法は何ですか？

ありがとう

4

2 に答える 2

3

探しているものは次のとおりです。

function Graph(context) {
    this.context = context;
}

Graph.prototype.point = function (x, y) {
    this.context.fillRect(x, y ,1, 1);
}

var g = new Graph(context);
g.point(5, 5);
于 2013-05-16T16:34:54.600 に答える
2

plalxは素晴らしいデザインパターンを示しています...

コンストラクターを使用した別の例を次に示します。

var Graph = (function () {

    // constructor
    function Graph(context) {

        // "class" properties go here
        this.context = context;
    }

    // "class" methods added to prototype here
    Graph.prototype.point = function (x,y) {
        this.context.fillRect(x,y,1,1);
    };

    // return a self reference
    return Graph;

})();    // make class available by self-executing

// instantiate your Graph class into a graph object
var graph = new Graph(context);
于 2013-05-16T17:39:52.990 に答える