javascript Объект MVC Холст 'класс' декорации

Question

Привет, я новичок во всех шаблонах OOJ и прототипов и пытаюсь изучить это при создании моего приложения, включающего много тегов html5 canvas.

Я хотел бы создать начальный объект canvas для размещенияОсновы стандартных опций, которые мне нужны для выполнения тэга canvas, это должны быть динамические значения, поэтому ниже приведен мой конструктор (извините за мою терминологию, если она неверна)

 //create the view object
    var view = view ||{};
    //generic canvas obj
    view.pageCanvas = function(){
    //incase I need 'this in  a new context'
    var This = this;
//get the canvas
    this.canvas = function(id){ 
        document.getElementById(id).getContext('2d');
        };
//draw a line
    this.line = function (x,y){
        return  this.canvas.lineTo(x,y);
    }; 
//set the line width
    this.linewidth = function(width){
         this.canvas.lineWidth(width);
    };
//set the stroke colour
    this.lineCol = function(colour){
        return this.canvas.strokeStyle = colour;
    }
//draw the line
    this.build = this.canvas.stroke();
};

Я бы тогда использовал что-то вродепосле его вызова

Background = new view.pageCanvas();
    Background.canvas('BG');    
    Background.canvas.line(400 , 0);
    Background.canvas.line(0,500);
    Background.canvas.linewidth(10);
    Background.canvas.lineCol( "blue"); // line color
    Background.canvas.build();

Я получаю что-то не так в этом, так как я получаю ошибки типа на 'this.canvas.stroke ()'

Может кто-нибудь предоставить какие-либо указатели относительно того, гдеЯ иду не так, или, действительно, этот шаблон не лучший способ сделать это?В конечном итоге я хочу, чтобы дизайн был масштабируемым

Заранее спасибо:)

Answer 1

В вашем случае this.canvas - это функция, поэтому вы не можете разрешить this.canvas.stroke (), поскольку this.canvas, как вы определили, является функцией, которая принимает идентификатор тега canvas в вашей DOM.

Вместо того, чтобы сделать this.canvas функцией, вы должны вместо этого сделать его просто document.getElementById (''), чтобы он был ссылкой на объект canvas.

 //create the view object
    var view = view ||{};
    view.setCanvas = function(id) {
        this.canvas = document.getElementById(id).getContext('2d');
    };
    //generic canvas obj
    view.pageCanvas = function() {
      //incase I need 'this in  a new context'
      var This = this;
//draw a line
    this.line = function (x,y){
        return  this.canvas.lineTo(x,y);
    }; 
//set the line width
    this.linewidth = function(width){
         this.canvas.lineWidth(width);
    };
//set the stroke colour
    this.lineCol = function(colour){
        return this.canvas.strokeStyle = colour;
    }
//draw the line
    this.build = this.canvas.stroke();
};

Таким образом, setCanvasПосмотрите, что выше, и вы можете при необходимости изменить то, что вы хотите с ним делать.