Несколько полотен (страниц) в Fabric.js

Question

Я пытаюсь создать несколько страниц в виде холстов, используя Fabric.js при нажатии кнопки - например. каждый раз, когда нажимается кнопка, создается новая страница.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы эти холсты использовали те же функции, которые создаются при загрузке страницы и привязаны только к исходному холсту. Есть ли способ создать экземпляры холста и использовать те же самые функции?

Answer 1

Мое понимание вашего вопроса в том, что вы создаете несколько холстов внутри одного документа HTML.

Когда вы назначаете функции своему начальному холсту, вы имеете в виду, что они добавляются как методы в ваш объект canvas? Я думаю, что лучше обернуть холст в другом объекте JavaScript и назначить методы этому объекту. Кроме того, вы можете использовать прототип для определения методов для класса, тогда эти методы будут доступны экземплярами этого класса. Например:

/* MyCanvas class */ 
function MyCanvas() { 
    /* Creates a canvas */ 
    this.canvas = document.createElement("canvas"); 
    document.body.appendChild(this.canvas); 
}; 

/* Define MyCanvas prototype */ 
MyCanvas.prototype = { 
    /* Define getCanvas method */ 
    getCanvas: function() { 
     /* Returns the real canvas object */ 
     return this.canvas; 
    }, 

    /* Define get2DContext method */ 
    get2DContext: function() { 
     /* Returns the 2D context */ 
     return this.canvas.getContext("2d"); 
    } 
} 

/* Create two canvases */ 
var myCanvas1 = new MyCanvas(); 
var myCanvas2 = new MyCanvas(); 

/* Access MyCanvas methods */ 
var canvas1 = myCanvas1.getCanvas(); 
var ctx2 = myCanvas2.get2DContext(); 

Кстати, я никогда не использовал fabric.js.